Fintech app by Lutfullah Ugurer (lutfullah.com)

A modern fintech dashboard with authentication, wallet overview, and transaction insights.

Screenshots

Dashboard

Sign In

Sign Up

Features

• Auth flows (sign in / sign up)
• Dashboard overview cards
• Working capital chart
• Wallet cards
• Recent transactions and scheduled transfers

Tech Stack

• React + TypeScript
• Vite
• Tailwind CSS
• React Router
• React Query
• Recharts

Getting Started

npm install
npm run dev

Build

npm run build
npm run preview

Environment

VITE_API_BASE_URL=https://case.nodelabs.dev/api

Notes

• Screenshots live in private/ and are not part of the build output.

Tech Stack

• React 18 + TypeScript
• Vite
• Tailwind CSS
• React Router
• React Query
• Recharts

Modern Standards

• Type-safe data flow with TypeScript
• API error normalization and user-facing feedback
• Form validation with Zod + React Hook Form
• Component-level code splitting via React.lazy
• Accessible UI primitives (labels, aria attributes)

API Base URL

https://case.nodelabs.dev/api

API Examples

Register

Request

POST /users/register
{
  "fullName": "John Doe",
  "email": "user@example.com",
  "password": "Pa$w0rd123"
}

Response

{
  "success": true,
  "message": "User registered successfully.",
  "data": {
    "id": "60d0fe4f5311236168a109ca",
    "fullName": "John Doe",
    "email": "user@example.com"
  }
}

TypeScript

export interface RegisterPayload {
  fullName: string
  email: string
  password: string
}

export interface RegisterResponse {
  success: boolean
  message: string
  data: {
    id: string
    fullName: string
    email: string
  }
}

Login

Request

POST /users/login
{
  "email": "user@example.com",
  "password": "Pa$w0rd123"
}

Response

{
  "success": true,
  "message": "User logged in successfully.",
  "data": {
    "accessToken": "jwt-token",
    "user": {
      "id": "60d0fe4f5311236168a109ca",
      "fullName": "John Doe",
      "email": "user@example.com"
    }
  }
}

TypeScript

export interface LoginPayload {
  email: string
  password: string
}

export interface LoginResponse {
  success: boolean
  message: string
  data: {
    accessToken: string
    user: {
      id: string
      fullName: string
      email: string
    }
  }
}

Financial Summary

Request

GET /financial/summary

Response

{
  "success": true,
  "message": "Financial summary retrieved successfully.",
  "data": {
    "totalBalance": {
      "amount": 125750.5,
      "currency": "TRY",
      "change": {
        "percentage": 12.5,
        "trend": "up"
      }
    },
    "totalExpense": {
      "amount": 45320.75,
      "currency": "TRY",
      "change": {
        "percentage": -8.3,
        "trend": "down"
      }
    },
    "totalSavings": {
      "amount": 80429.75,
      "currency": "TRY",
      "change": {
        "percentage": 15.2,
        "trend": "up"
      }
    },
    "lastUpdated": "2026-01-12T21:52:54.132Z"
  }
}

TypeScript

export interface FinancialSummaryResponse {
  success: boolean
  message: string
  data: {
    totalBalance: {
      amount: number
      currency: string
      change: {
        percentage: number
        trend: "up" | "down"
      }
    }
    totalExpense: {
      amount: number
      currency: string
      change: {
        percentage: number
        trend: "up" | "down"
      }
    }
    totalSavings: {
      amount: number
      currency: string
      change: {
        percentage: number
        trend: "up" | "down"
      }
    }
    lastUpdated: string
  }
}