Invoice Management Application

A simple full-stack application for managing invoices, built with NestJS and React.

Tech Stack

Backend

• Framework: NestJS
• ORM: Prisma
• Authentication: JWT (JSON Web Tokens)
• Database: PostgreSQL (managed via Docker)

Frontend

• Framework: React
• Build Tool: Vite
• Language: TypeScript
• State Management: Redux Toolkit (with RTK Query)
• UI Library: Material-UI (MUI)
• Forms: React Hook Form
• Schema Validation: Zod

Getting Started

Follow these instructions to get a copy of the project up and running on your local machine.

Prerequisites

• Node.js (v18 or later)
• Docker and Docker Compose

Installation & Setup

1. Clone the Repository

git clone <your-repository-url>
cd InvoiceAppAssignment

2. Backend Setup (Server)

First, set up and run the backend server.

# Navigate to the server directory
cd server

# Install dependencies
npm install

# Create a .env file in the 'server' directory and add the following lines:
# You can copy the contents below into a new file named .env

server/.env

DATABASE_URL="postgresql://user:password@localhost:5432/invoicedb?schema=public"
JWT_SECRET="your-super-secret-key"
JWT_EXPIRES_IN="1d"

# Start the PostgreSQL database using Docker
docker-compose up -d

# Apply database migrations
npx prisma migrate dev

# Seed the database with initial data (e.g., a demo user)
npx prisma db seed

# Start the backend server
npm run start:dev

The backend will be running at http://localhost:3000.

3. Frontend Setup (Client)

In a new terminal, set up and run the React client.

# Navigate to the client directory from the root folder
cd client

# Install dependencies
npm install

# Create a .env.local file in the 'client' directory and add the following line:

client/.env.local

VITE_API_URL=http://localhost:3000

# Start the frontend development server
npm run dev

The frontend will be running at http://localhost:5173.

Usage

Open your browser and navigate to http://localhost:5173. You will be directed to the login page.

Demo Credentials

Use the following credentials to log in and see the application in action:

• Email: john@example.com
• Password: password123

Once logged in, you can view the list of invoices. Clicking on an invoice will open a modal with its details.