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

2. Set up the database:

cd server
npx prisma generate
npx prisma migrate deploy

3. 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

4. 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 🚀