feat: basic api

client/src/app/screens/screen-profile/screen-profile.ts

@@ -1,5 +1,7 @@
 import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { APIService } from '../../services/api';
+import { Transaction } from '@shared/interfaces/transaction';
 
 @Component({
   selector: 'app-screen-profile',
@@ -7,14 +9,22 @@ import { Component } from '@angular/core';
   templateUrl: './screen-profile.html',
   styleUrl: './screen-profile.less',
 })
-export class ScreenProfile {
+export class ScreenProfile implements OnInit{
-    username = 'John Doe';
+  username = 'John Doe';
   email = 'john.doe@example.com';
+  transactions!: Transaction[];
+
+  constructor(private api: APIService){}
+
+  ngOnInit(): void {
+    this.api.getTransactions().subscribe({
+      next: (transactions) => {
+        this.transactions = transactions;
+      },
+      error: (err) => {
+        console.error('Error fetching transactions:', err);
+      },
+    })
+  }
 
-  transactions = [
-    { partner: 'Alice Smith', amount: 50.00, date: new Date('2026-03-01'), type: 'Received' },
-    { partner: 'Bob Johnson', amount: -25.50, date: new Date('2026-02-28'), type: 'Sent' },
-    { partner: 'Charlie Brown', amount: 75.25, date: new Date('2026-02-27'), type: 'Received' },
-    { partner: 'Diana Prince', amount: -100.00, date: new Date('2026-02-25'), type: 'Sent' },
-  ];
 }

client/src/app/services/api.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { APIService } from './api';
+
+describe('Api', () => {
+  let service: APIService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(APIService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

client/src/app/services/api.ts

@@ -0,0 +1,17 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Transaction } from '@shared/interfaces/transaction'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class APIService {
+  private apiUrl = 'http://localhost:3000/api' 
+  
+  constructor(private http: HttpClient){}
+
+  getTransactions(): Observable<Transaction[]>{
+    return this.http.get<Transaction[]>(this.apiUrl + '/transactions');
+  }
+}

server/src/index.ts

@@ -1,6 +1,7 @@
 import express, { Express, Request, Response } from "express";
 import cors from "cors";
 import * as dotenv from "dotenv";
+import transactionsRouter from './routes/transactions';
 
 
 dotenv.config();
@@ -13,6 +14,8 @@ app.get("/api/health", (req: Request, res: Response) => {
   res.json({ status: "OK" });
 });
 
+app.use('/api/transactions', transactionsRouter);
+
 const PORT: number = parseInt(process.env.PORT as string) || 3000;
 app.listen(PORT, () => {
   console.log(`Server running on port ${PORT}`);

server/src/routes/transactions.ts

@@ -0,0 +1,17 @@
+import express from 'express';
+import { Transaction } from "@shared/interfaces/transaction"
+
+const router = express.Router();
+
+// Mock data
+const mockTransactions: Transaction[] = [
+  { id: '1', partner: 'Alice Smith', amount: 50.00, date: new Date('2026-03-01'), type: 'Received' },
+  { id: '2', partner: 'Bob Johnson', amount: -25.50, date: new Date('2026-02-28'), type: 'Sent' },
+];
+
+// GET /api/transactions
+router.get('/', (req, res) => {
+  res.json(mockTransactions);
+});
+
+export default router;

shared/interfaces/transaction.ts

@@ -0,0 +1,7 @@
+export interface Transaction {
+  id: string;
+  partner: string;
+  amount: number;
+  date: Date;
+  type: 'Sent' | 'Received';
+}

tsconfig.json

@@ -8,7 +8,10 @@
     "moduleResolution": "bundler",
     "target": "ES2022",
     "module": "es2022",
-    "lib": ["es2022", "dom"]
+    "lib": ["es2022", "dom"],
+    "paths": {
+      "@shared/*": ["shared/*"]
+    }
   },
   "exclude": ["node_modules"]
 }