Node.js Full-Stack Application

A production-ready full-stack application built with Express.js backend and React 19 frontend, demonstrating clean architecture, scalability, and best practices.

Features

Task #1: Authentication System

• Session & token-based authentication
• Login/Logout APIs
• Session & token expiry management
• "Remember me" functionality
• Protected routes
• HTTP-only cookie token storage

Task #2: CSV Processing

• Upload and import CSV files (Sample 1 format)
• Generate XLSX files (Sample 2 format)
• Stock data management
• File validation and error handling

Task #3: Database Optimization

• Optimized database schema with proper indexes
• Prisma migrations and seeders
• Complex SQL queries for data analysis
• Scalable for millions of records

Technology Stack

Backend

• Node.js with ES6 Modules
• Express.js
• MySQL with Prisma ORM
• JWT & Express Session
• CSV parsing and XLSX generation
• Bcrypt for password hashing

Frontend

• React 19
• TypeScript
• Vite
• TailwindCSS
• shadcn/ui components
• Custom theme system (light/dark mode)

Project Structure

project-root/
├── backend/              # Express.js backend (ES6 modules)
│   ├── config/          # Configuration files
│   ├── controllers/     # Request handlers
│   ├── middleware/      # Custom middleware
│   ├── routes/          # API routes
│   ├── services/        # Business logic
│   ├── validators/      # Input validation
│   ├── utils/           # Helper functions
│   ├── prisma/          # Prisma schema, migrations, seed
│   └── queries/         # SQL queries (Task 3)
├── frontend/             # React 19 frontend
│   └── src/
│       ├── components/  # React components (UI + Logic separated)
│       ├── pages/       # Page components
│       ├── hooks/       # Custom hooks
│       ├── services/    # API services
│       └── utils/       # Helper functions
└── README.md            # This file

Quick Start

Prerequisites

• Node.js (LTS version - v18 or higher)
• MySQL database (v5.7 or higher)
• npm or yarn

Step-by-Step Setup

1. Clone and Navigate

git clone https://github.com/Jaffer720/Node-Task.git
cd Task

2. Backend Setup

cd backend
npm install

Create .env file:

# Windows (PowerShell)
Copy-Item .env.example .env

# Linux/Mac
cp .env.example .env

Edit .env and update the DATABASE_URL with your MySQL credentials:

DATABASE_URL="mysql://root:your_password@localhost:3306/task_db"

Generate Prisma Client, run migrations, and seed database:

npm run prisma:generate
npm run migrate
npm run seed

Start the backend server:

npm run dev

✅ Backend will run on http://localhost:3000

3. Frontend Setup

Open a new terminal:

cd frontend
npm install
npm run dev

✅ Frontend will run on http://localhost:5173

4. Access the Application

Open your browser and navigate to: http://localhost:5173

Login with:

• Email: admin@example.com
• Password: admin123

Login Credentials

After running npm run seed in the backend, you can login with:

Admin User:

• Email: admin@example.com
• Password: admin123

Test Users (for Task #3):

• Email: user1@example.com to user10000@example.com
• Password: password123

API Endpoints

Authentication

• POST /api/auth/login - Login
• POST /api/auth/logout - Logout
• GET /api/auth/verify - Verify authentication
• POST /api/auth/refresh - Refresh token

CSV Processing

• POST /api/csv/upload - Upload CSV file (requires authentication)
• GET /api/csv/generate - Generate Sample 2 file (requires authentication)

Database Queries (Task 3)

SQL queries are available in backend/queries/task3-queries.sql:

1. Select all users with address count
2. Select users without addresses
3. Select duplicate addresses with counter

Development

Backend

• Uses ES6 modules (type: "module" in package.json)
• Prisma ORM with full ES6 support
• Hot reload with npm run dev
• Migrations: npm run migrate
• Seeders: npm run seed
• Prisma Studio: npm run prisma:studio (database GUI)

Frontend

• React 19 with TypeScript
• Component separation pattern (UI + Logic)
• shadcn/ui components
• TailwindCSS with dark mode
• Vite for fast development

Component Architecture

Each feature component follows a separation pattern:

• ComponentUI.tsx - Pure UI component (no business logic)
• useComponent.ts - Custom hook with all logic
• index.tsx - Main export combining both

This ensures:

• Testability: Logic can be tested independently
• Reusability: UI can be reused with different logic
• Maintainability: Clear separation of concerns
• Type Safety: Full TypeScript support

Build for Production

Backend

cd backend
npm start

Frontend

cd frontend
npm run build
npm run preview

License

ISC