Dino Discovery Camp Roster

A camp roster application with a React frontend, Express backend, and PostgreSQL database. Campers can view and edit their usernames, with changes persisted to the database.

Prerequisites

• Node.js (v18+)
• PostgreSQL (v14+)
• npm or pnpm

Project Structure

├── backend/     # Express API server
├── frontend/    # React + Vite app
└── database/    # SQL schema and seed files

---

Setup

1. Database

Create the database and apply the schema and seed data:

# Create the database
psql -U postgres -c "CREATE DATABASE dinocamp;"

# Apply schema (creates campers table)
psql -U postgres -d dinocamp -f database/schema.sql

# Seed with sample campers
psql -U postgres -d dinocamp -f database/seed.sql

If you already have an old database and want a clean start:

psql -U postgres -c "DROP DATABASE IF EXISTS dinocamp;"
psql -U postgres -c "CREATE DATABASE dinocamp;"
psql -U postgres -d dinocamp -f database/schema.sql
psql -U postgres -d dinocamp -f database/seed.sql

2. Backend

cd backend
npm install

Copy .env.example to .env and set your PostgreSQL credentials:

cp .env.example .env

Edit .env:

PORT=3001
DB_HOST=localhost
DB_PORT=5432
DB_NAME=dinocamp
DB_USER=postgres
DB_PASSWORD=your_password_here

3. Frontend

cd frontend
npm install

The frontend defaults to http://localhost:3001 for the API. To use a different URL, create .env in the frontend folder:

VITE_API_URL=http://localhost:3001

---

Build

Frontend (production build)

cd frontend
npm run build

Output is written to frontend/dist/.

Backend

The backend is not compiled; it runs directly with Node.js. No build step is required.

---

Run

Development

Run both backend and frontend in separate terminals:

Terminal 1 – Backend

cd backend
npm run dev

Server runs at http://localhost:3001.

Terminal 2 – Frontend

cd frontend
npm run dev

App runs at http://localhost:8080.

Production

Backend

cd backend
npm start

Frontend

Serve the built frontend:

cd frontend
npm run build
npm run preview

Or serve the frontend/dist/ folder with any static file server (e.g. nginx, Apache).

---

API Endpoints

Method	Endpoint	Description
GET	/api/health	Health check
GET	/api/campers	List all campers
PATCH	/api/campers/:id	Update a camper (e.g. username)