Skip to content

GETTING_STARTED.md

Latest commit

 

History

History
138 lines (111 loc) · 3.33 KB

GETTING_STARTED.md

File metadata and controls

138 lines (111 loc) · 3.33 KB

Getting Started Guide

Quick Start Instructions

1. Install Dependencies

# Install backend dependencies
cd server
npm install

# Install frontend dependencies
cd ../client
npm install

2. Set Up Database

# Navigate to server directory
cd ../server

# Generate Prisma client
npx prisma generate

# Run migrations
npx prisma migrate deploy

3. Create Environment File

Create a .env file in the server directory with:

PORT=3000
JWT_SECRET=your-secret-key-change-this-in-production

4. Run the Application

Terminal 1 - Start Backend:

cd server
npm start

Terminal 2 - Start Frontend:

cd client
npm start

5. Access the Application

Testing the Application

  1. Register/Login:

    • Open http://localhost:3001
    • Click "Need an account? Register"
    • Enter username and password
    • Click Register, then Login

  2. Add Shoes:

    • Enter shoe name (e.g., "Air Jordan 1")
    • Enter brand (e.g., "Nike")
    • Click "Add Shoe"

  3. Delete Shoes:

    • Click the "Delete" button next to any shoe

Verification Checklist

  • Backend server starts without errors
  • Frontend React app starts without errors
  • Database tables are created
  • Can register a new user
  • Can login with credentials
  • Can add shoes
  • Can view shoe list
  • Can delete shoes
  • Data persists after page refresh

Troubleshooting

Issue: "Cannot find module 'dotenv'"

  • Solution: Run npm install in the server directory

Issue: Database errors

  • Solution: Run npx prisma generate and npx prisma migrate deploy

Issue: Port already in use

  • Solution: Change PORT in server/.env file

Issue: Frontend cannot connect to backend

  • Solution: Check that backend is running on port 3000
  • Verify REACT_APP_API_URL in client/.env is set correctly

Project Structure

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

Next Steps

For the live coding session:

  1. Test that everything works locally
  2. Be ready to explain:
    • Project structure and architecture
    • How authentication works (JWT flow)
    • API design decisions
    • React component structure
    • Database schema design
    • Error handling approach
  3. Prepare to record the session showing:
    • Project setup
    • Running the application
    • Adding/removing shoes
    • Code walkthrough
    • Technical summary