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 {
-    username = 'John Doe';
+export class ScreenProfile implements OnInit{
+  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');
+  }
+}