Skip to content

README.md

Latest commit

 

History

History
235 lines (183 loc) · 5.73 KB

README.md

File metadata and controls

235 lines (183 loc) · 5.73 KB

Shoe Collection Management - Fullstack App

A complete fullstack application for managing a shoe collection with authentication, built with Node.js, Express, Prisma, and React.

📋 Features

  • User Authentication: JWT-based authentication with registration and login
  • Shoe Management: CRUD operations for shoes (Create, Read, Delete)
  • Modern UI: Clean and professional interface with responsive design
  • Secure API: Protected endpoints with JWT middleware
  • Database: SQLite database with Prisma ORM

🛠️ Tech Stack

Backend

  • Node.js + Express with TypeScript
  • Prisma ORM with SQLite
  • JWT for authentication
  • bcryptjs for password hashing
  • TypeScript for type safety

Frontend

  • React.js with TypeScript
  • Axios for API calls
  • Modern CSS with gradients and responsive design
  • TypeScript for type safety

📁 Project Structure

livecoding/
├── server/
│   ├── src/
│   │   ├── controllers/     # TypeScript request handlers
│   │   ├── routes/          # TypeScript Express routes
│   │   ├── services/        # TypeScript business logic
│   │   ├── middleware/      # TypeScript auth middleware
│   │   └── index.ts         # Main server file
│   ├── prisma/              # Database schema & migrations
│   ├── tsconfig.json         # TypeScript configuration
│   └── package.json
├── client/                   # React TypeScript frontend
│   ├── src/
│   │   ├── components/      # TypeScript React components
│   │   ├── services/        # TypeScript API service
│   │   └── App.tsx          # Main app
│   ├── tsconfig.json         # TypeScript configuration
│   └── package.json
└── package.json              # Root scripts

🚀 Getting Started

Prerequisites

  • Node.js (v14 or higher)
  • npm or yarn

Installation

  1. Install backend dependencies:
cd server
npm install
  1. Set up the database:
cd server
npx prisma generate
npx prisma migrate deploy
  1. Create .env file in the server directory:
cd server

Create a .env file with:

PORT=3000
JWT_SECRET=your-secret-key-change-this-in-production
  1. Install frontend dependencies:
cd ../client
npm install

🏃 Running the Application

Start the backend server:

cd server
npm start
# or use the root script: npm run start:server

The server will run on http://localhost:3000

Start the frontend (in a new terminal):

cd client
npm start
# or use the root script: npm run start:client

The React app will run on http://localhost:3001

Quick Start (from root):

# Install all dependencies
npm run install:all

# Setup database
npm run setup:db

# Start backend (in one terminal)
npm run start:server

# Start frontend (in another terminal)
npm run start:client

🔌 API Endpoints

Authentication

  • POST /api/auth/register - Register a new user
  • POST /api/auth/login - Login and get JWT token

Shoes (Protected - requires JWT token)

  • GET /api/shoes - Get all shoes
  • POST /api/shoes - Add a new shoe
  • DELETE /api/shoes/:id - Delete a shoe by ID

Authentication

All shoe endpoints require a Bearer token in the Authorization header:

Authorization: Bearer <your-jwt-token>

🧪 Testing the Application

  1. Open http://localhost:3001 in your browser
  2. Register a new account or login
  3. Add shoes using the form
  4. Delete shoes by clicking the delete button
  5. Your data persists across page refreshes (database storage)

📝 Database Schema

User Model

  • id (Int, auto-increment)
  • username (String, unique)
  • password (String, hashed)
  • createdAt (DateTime)

Shoe Model

  • id (Int, auto-increment)
  • name (String)
  • brand (String)
  • createdAt (DateTime)

🔒 Security Features

  • Passwords are hashed using bcryptjs
  • JWT tokens for stateless authentication
  • CORS enabled for cross-origin requests
  • Protected routes with middleware
  • Token expiration (1 hour)

📸 How It Works

  1. Authentication Flow:

    • User registers/login with username and password
    • Password is hashed and stored in database
    • JWT token is generated and sent to client
    • Token is stored in localStorage

  2. Protected API Calls:

    • Frontend includes JWT token in Authorization header
    • Backend middleware validates token
    • Invalid/expired tokens return 401 Unauthorized

  3. Data Flow:

    • React components call API service
    • Service makes HTTP requests to Express backend
    • Backend queries Prisma database
    • Data flows back through the stack

🎨 UI Features

  • Clean gradient background
  • Card-based layout for shoes
  • Form validation
  • Error handling with user-friendly messages
  • Loading states
  • Responsive design

🐛 Troubleshooting

Database issues:

  • Run npx prisma generate to regenerate Prisma client
  • Run npx prisma migrate dev to reset database

Port already in use:

  • Change PORT in .env file
  • Update REACT_APP_API_URL in client/.env

CORS errors:

  • Ensure backend CORS is enabled (already configured)
  • Check API URL in client environment variables

📦 Production Deployment

For production:

  1. Change JWT_SECRET to a secure random string
  2. Update CORS origin to your frontend URL
  3. Use a production-grade database (PostgreSQL)
  4. Build React app: cd client && npm run build
  5. Serve static files from Express or a CDN

👨‍💻 Development Notes

  • All code is modularized for maintainability
  • Separation of concerns: controllers, services, routes
  • Error handling throughout the stack
  • Clean React component architecture
  • Type-safe database operations with Prisma

📄 License

ISC

Built for live coding assessment 🚀