feat: Add MongoDB authentication system with complete documentation

DOCUMENTATION.md

@@ -0,0 +1,168 @@
+# 📚 Documentation Index
+
+This file provides quick links to all documentation in the ACM Catalog project.
+
+## 📖 Main Documentation
+
+### **Project Overview**
+
+- [Main README](./README.md) - Complete project overview and quick start guide
+
+### **Backend Documentation**
+
+- [Backend README](./backend/README.md) - Backend setup, API endpoints, and MongoDB configuration
+  - Installation instructions (MongoDB, dependencies)
+  - Environment configuration
+  - API endpoint documentation
+  - Security features
+  - Troubleshooting guide
+
+### **Frontend Documentation**
+
+- [Frontend README](./frontend/README.md) - Frontend setup and usage guide
+  - Quick start instructions
+  - Available scripts
+  - Usage examples
+  - Troubleshooting
+- [Frontend Architecture Guide](./frontend/ARCHITECTURE.md) - Detailed architecture explanation
+  - Folder structure
+  - React Router setup
+  - API integration patterns
+  - Context usage guidelines
+  - Custom hooks
+  - Best practices
+- [Style Guide](./frontend/STYLES.md) - Design system and styling standards ⭐ NEW!
+  - Color palette
+  - Typography (Londrina Solid font)
+  - Spacing system
+  - Component styles
+  - Responsive design
+  - CSS naming conventions
+  - Examples and checklist
+
+---
+
+## 🗂️ Quick Reference
+
+### **File Structure**
+
+```
+acm-catalog/
+├── backend/              # Express + MongoDB server
+│   ├── config/          # Database configuration
+│   ├── middleware/      # Auth middleware
+│   ├── models/          # MongoDB schemas
+│   ├── routes/          # API endpoints
+│   └── README.md        # Backend docs
+│
+└── frontend/            # React + Vite app
+    ├── src/
+    │   ├── context/     # Global state (AuthContext)
+    │   ├── services/    # API layer
+    │   ├── hooks/       # Custom hooks
+    │   ├── components/  # Reusable UI
+    │   ├── pages/       # Page components
+    │   ├── HomePage/    # Home page module
+    │   ├── examples/    # Example components
+    │   └── assets/      # Images, etc.
+    ├── README.md        # Frontend docs
+    ├── ARCHITECTURE.md  # Architecture guide
+    └── STYLES.md        # Style guide (NEW!)
+```
+
+---
+
+## 🚀 Getting Started
+
+### **For New Developers:**
+
+1. Read [Main README](./README.md) for project overview
+2. Follow [Backend README](./backend/README.md) to set up MongoDB and backend
+3. Follow [Frontend README](./frontend/README.md) to set up React app
+4. Read [Architecture Guide](./frontend/ARCHITECTURE.md) to understand the codebase
+5. Review [Style Guide](./frontend/STYLES.md) before creating components
+
+### **For Existing Team Members:**
+
+- **Adding new features?** → Check [Architecture Guide](./frontend/ARCHITECTURE.md)
+- **Creating new components?** → Follow [Style Guide](./frontend/STYLES.md)
+- **Backend API changes?** → Update [Backend README](./backend/README.md)
+- **Frontend changes?** → Keep this structure in mind
+
+---
+
+## 🔐 Authentication Flow
+
+```
+1. User visits app → Redirected to /login (if not authenticated)
+2. User signs up/logs in → JWT token generated
+3. Token stored in localStorage + HTTP-only cookie
+4. Protected routes check token → Access granted/denied
+5. User logs out → Token cleared
+```
+
+**Documentation:**
+
+- Backend auth: [backend/README.md](./backend/README.md#authentication-api-endpoints)
+- Frontend auth: [frontend/ARCHITECTURE.md](./frontend/ARCHITECTURE.md#using-authentication)
+
+---
+
+## 🛠️ Development Workflow
+
+### **Starting Development:**
+
+```bash
+# Terminal 1 - Backend
+cd backend
+npm run dev
+
+# Terminal 2 - Frontend
+cd frontend
+npm run dev
+
+# Terminal 3 - MongoDB (if not running as service)
+sudo systemctl start mongod
+```
+
+### **Creating a New Feature:**
+
+1. Create feature branch: `git checkout -b feature/your-feature`
+2. Backend: Add routes in `backend/routes/`
+3. Frontend: Add API call in `frontend/src/services/api.js`
+4. Frontend: Create component/page
+5. Test thoroughly
+6. Update relevant documentation
+7. Create pull request
+
+---
+
+## 📝 Documentation Standards
+
+When adding new features, update:
+
+- [ ] Main README if it affects overall setup
+- [ ] Backend README for new API endpoints
+- [ ] Frontend README for new components/pages
+- [ ] ARCHITECTURE.md for architectural changes
+- [ ] This index if new docs are added
+
+---
+
+## 🤝 Contributing
+
+See [Main README](./README.md#contributing) for contribution guidelines.
+
+---
+
+## 📧 Support
+
+For questions or issues:
+
+- Check relevant documentation above
+- Review example components in `frontend/src/examples/`
+- Contact ACM UIC development team
+
+---
+
+**Last Updated:** October 28, 2025

README.md

@@ -1 +1,151 @@
-# acm-catalog
+# ACM Catalog
+
+A full-stack web application for managing the ACM catalog with MongoDB authentication.
+
+## 📁 Complete Project Structure
+
+```
+acm-catalog/
+├── backend/                      # Express.js + MongoDB authentication server
+│   ├── config/
+│   │   └── db.js                # MongoDB connection configuration
+│   ├── middleware/
+│   │   └── auth.js              # JWT authentication middleware
+│   ├── models/
+│   │   └── User.js              # User schema with password hashing
+│   ├── routes/
+│   │   └── auth.js              # Authentication endpoints
+│   ├── .env.local               # Environment variables (not committed)
+│   ├── package.json             # Backend dependencies
+│   ├── server.js                # Main server entry point
+│   └── README.md                # Backend setup documentation
+│
+└── frontend/                     # React + Vite frontend
+    ├── src/
+    │   ├── context/             # Global state management
+    │   │   └── AuthContext.jsx  # Authentication state
+    │   ├── services/            # API communication
+    │   │   └── api.js           # API service layer
+    │   ├── hooks/               # Custom React hooks
+    │   │   └── useApi.js        # API hooks (useFetch, useApi)
+    │   ├── components/          # Reusable UI components
+    │   │   ├── Navbar.jsx       # Navigation component
+    │   │   ├── Navbar.css       # Navbar styles
+    │   │   └── ProtectedRoute.jsx # Route protection
+    │   ├── pages/               # Page components
+    │   │   ├── Login.jsx        # Login page
+    │   │   ├── Signup.jsx       # Signup page
+    │   │   └── Auth.css         # Auth pages styling
+    │   ├── HomePage/            # Home page module
+    │   │   ├── HomePage.jsx     # Main home component
+    │   │   ├── HomePage.css     # Home page styles
+    │   │   ├── Title.jsx        # Title component
+    │   │   └── AboutUs.jsx      # About section
+    │   ├── examples/            # Example components (reference)
+    │   │   ├── CatalogList.jsx  # Example: data fetching
+    │   │   └── CreateItemForm.jsx # Example: form submission
+    │   ├── assets/              # Static assets
+    │   │   └── MainMenuPic.png  # Images, icons
+    │   ├── App.jsx              # Main app with routing
+    │   └── main.jsx             # React entry point
+    ├── public/                  # Public static files
+    ├── .env                     # Frontend environment variables
+    ├── package.json             # Frontend dependencies
+    ├── vite.config.js           # Vite configuration
+    ├── ARCHITECTURE.md          # Frontend architecture guide
+    └── README.md                # Frontend setup instructions
+```
+
+## 🚀 Quick Start
+
+### Prerequisites
+
+- **Node.js** (v16+)
+- **npm**
+- **MongoDB** (v8.0+)
+
+### Backend Setup
+
+```bash
+cd backend
+npm install
+
+# Setup MongoDB (see backend/README.md for detailed instructions)
+sudo systemctl start mongod  # Linux
+brew services start mongodb-community  # macOS
+
+# Configure environment variables
+# Edit .env.local with your MongoDB URI and JWT secret
+
+# Start development server
+npm run dev
+```
+
+**📖 See [backend/README.md](./backend/README.md) for complete backend setup instructions**
+
+### Frontend Setup
+
+```bash
+cd frontend
+npm install
+npm run dev
+```
+
+**📖 See [frontend/README.md](./frontend/README.md) and [frontend/ARCHITECTURE.md](./frontend/ARCHITECTURE.md) for detailed information**
+
+---
+
+## 🔐 Authentication Features
+
+- ✅ User signup with email/password validation
+- ✅ Secure login with JWT tokens (30-day expiration)
+- ✅ Password hashing with bcryptjs
+- ✅ HTTP-only cookie authentication
+- ✅ Protected routes (frontend & backend)
+- ✅ Auto-login on page refresh
+- ✅ Logout functionality
+
+---
+
+## 🏗️ Architecture
+
+### **Backend Stack:**
+
+- Express.js - Web framework
+- MongoDB - Database
+- Mongoose - ODM
+- JWT - Token authentication
+- bcryptjs - Password hashing
+
+### **Frontend Stack:**
+
+- React 19 - UI library
+- Vite - Build tool
+- React Router - Routing
+- Context API - State management
+- Custom hooks - Reusable logic
+
+---
+
+## 📚 Documentation
+
+- **Backend API**: [backend/README.md](./backend/README.md) - Complete API documentation
+- **Frontend Setup**: [frontend/README.md](./frontend/README.md) - Setup instructions
+- **Frontend Architecture**: [frontend/ARCHITECTURE.md](./frontend/ARCHITECTURE.md) - Architecture guide
+- **Style Guide**: [frontend/STYLES.md](./frontend/STYLES.md) - Design system and styling standards
+- **Documentation Index**: [DOCUMENTATION.md](./DOCUMENTATION.md) - Complete documentation index
+
+---
+
+## 🤝 Contributing
+
+1. Create a feature branch: `git checkout -b feature/your-feature-name`
+2. Make your changes
+3. Test thoroughly
+4. Submit a pull request to the main repository
+
+---
+
+## 📝 License
+
+This project is maintained by ACM UIC.