Project Name

A full-stack application built with React and Express as part of The Odin Project's NodeJS curriculum. Features JWT authentication, role-based access control, PostgreSQL via Prisma ORM, and a modular search system.

📋 Table of Contents

• Project Name
  • 📋 Table of Contents
  • ✨ Features
  • 🚀 Getting Started
  • 📁 Project Structure
  • 📖 Documentation
  • 🧪 Testing
  • 💡 Future Improvements
  • 🛠️ Technologies Used
  • 🙏 Acknowledgments

✨ Features

• JWT authentication with HttpOnly cookies
• Role-based access control (USER / ADMIN / SUPER_ADMIN)
• Full-stack search with filters, sorting, and URL-state persistence
• Prisma ORM with PostgreSQL
• Vitest + React Testing Library test suite (client & server)
• Dark/light theme toggle
• Responsive layout with mobile Navbar

🚀 Getting Started

See docs/setup.md for the full environment setup guide.

Quick start (after setup):

npm run install:all   # install all dependencies
npm run dev           # start client + server concurrently

📁 Project Structure

template-react-expressjs/
├── client/               # React + Vite frontend
│   └── src/
│       ├── components/   # UI components grouped by domain
│       ├── config/       # searchConfig.js — drives all search UI
│       ├── layouts/      # MainLayout (Navbar + Outlet)
│       ├── modules/api/  # Fetch wrappers per domain
│       ├── pages/        # Route-level components
│       ├── providers/    # Auth, Theme, Toast context
│       ├── routes/       # AuthRoute, AdminRoute guards
│       ├── routes.jsx    # createBrowserRouter config
│       └── styles/       # Global CSS variables, reset, animations
├── server/               # Express backend
│   └── src/
│       ├── config/       # Passport, CORS, cookie options
│       ├── controllers/  # Route handlers
│       ├── db/queries/   # Prisma query functions per domain
│       ├── middleware/   # Auth, error, app middleware
│       └── routes/       # Express routers
├── docs/
│   ├── setup.md          # Environment setup (PostgreSQL, .env, pgAdmin)
│   ├── architecture.md   # Stack overview, request flow, patterns
│   └── testing.md        # Testing conventions and patterns
├── CONTRIBUTING.md       # Branching, commit conventions, PR process
├── CHANGELOG.md          # Version history
└── package.json          # Root orchestration scripts

📖 Documentation

Doc	Description
docs/setup.md	PostgreSQL installation (Windows/macOS/Linux), .env config, pgAdmin 4
docs/architecture.md	Stack overview, request flow, client/server structure, auth flow
docs/testing.md	Testing patterns, mocking conventions, what to test
CONTRIBUTING.md	Branching strategy, commit conventions, PR process
CHANGELOG.md	Version history

🧪 Testing

cd client && npm run test:watch   # client — watch mode
cd server && npm run test:watch   # server — watch mode

See docs/testing.md for patterns, mocking conventions, and gotchas.

💡 Future Improvements

• Gallery and list view modes for search results
• Pagination on search results
• Email verification on signup
• File upload support (profile avatars)
• Rate limiting on auth endpoints

🛠️ Technologies Used

Client: React 19, React Router 7, Vite, CSS Modules, Lucide React, Vitest, React Testing Library

Server: Node.js, Express, Prisma ORM, PostgreSQL, Passport.js (Local + JWT), bcryptjs, express-validator

Tooling: ESLint, Prettier, concurrently, nodemon

🙏 Acknowledgments

• The Odin Project — For providing an amazing free curriculum
• The TOP Community — For being supportive and helpful throughout

---

Built with 💡 and ☕ as part of my journey through The Odin Project — NodeJS