WatchResto 🍕🌟

A full-stack restaurant management and customer ordering system with social features.

🎥 Preview

Check out the app in action:

📹 Watch Demo Video

See more screenshots in the App_preview folder.

📁 Project Structure

WatchResto/
├── admin-dashboard/          # Admin dashboard (React)
├── restaurant-frontendcls/   # Customer frontend (React)
├── backend/                  # Node.js/Express backend
├── App_preview/             # Application screenshots & demo video
└── dev-scripts/             # Development utilities

🚀 Features

Customer Features

• 🍽️ Browse menu items with real-time updates
• 🛒 Shopping cart with order management
• 👥 Social features (stories, friends, tagging)
• 📱 User profiles with dietary preferences
• 🏪 Marketplace for discovering restaurants
• 💳 Multiple payment methods
• 📦 Order tracking with ETA

Admin Features

• 📊 Dashboard with analytics
• 🍴 Menu management (CRUD operations)
• 👨‍💼 Staff management
• 📝 Order management
• 🎟️ Promo code system
• 🏪 Restaurant approval system
• 📖 Story moderation
• 👥 User management

🛠️ Tech Stack

Frontend:

• React 18
• React Router
• Context API (Auth, Cart)
• CSS3 with custom styling
• React Easy Crop for image editing

Backend:

• Node.js
• Express 5
• PostgreSQL
• JWT Authentication
• Passport.js (OAuth support)
• bcrypt for password hashing

📦 Installation

Prerequisites

• Node.js (v16+)
• PostgreSQL (v12+)
• npm or yarn

1. Clone the repository

git clone https://github.com/YOUR_USERNAME/WatchResto.git
cd WatchResto

2. Backend Setup

cd backend
npm install

# Create .env file
cp .env.example .env
# Edit .env with your credentials

Environment Variables (.env)

DATABASE_URL=postgres://username:password@localhost:5432/watchresto
JWT_SECRET=your-secret-key-here
PGUSER=postgres
PGHOST=localhost
PGDATABASE=watchresto
PGPASSWORD=your-password
PGPORT=5432

Initialize Database

# Run the complete schema
psql -U postgres -d watchresto -f complete_db_schema.sql

3. Admin Dashboard Setup

cd ../admin-dashboard
npm install
npm start
# Runs on http://localhost:3000

Default Admin Login:

• Username: admin
• Password: change-me

4. Customer Frontend Setup

cd ../restaurant-frontendcls
npm install
npm start
# Runs on http://localhost:3001

5. Start Backend Server

cd ../backend
npm start
# Runs on http://localhost:5000

📚 Database Schema

The database includes the following tables:

• users - Customer accounts
• menu_items - Restaurant menu
• orders - Customer orders
• promo_codes - Discount codes
• staff - Staff members
• stories - Social stories
• restaurants - Marketplace restaurants
• friends - User friendships
• restaurant_favorites - User favorites

🔐 Authentication

• JWT-based authentication
• OAuth support (Google, Facebook, Twitter, Instagram)
• Admin role-based access control
• Protected routes in both frontends

🎨 Key Features Implementation

Image Cropping

Menu items and profile pictures support image upload with cropping functionality using react-easy-crop.

Real-time Updates

Menu items sync between admin dashboard and customer frontend.

Social Features

• Story sharing with images and tags
• Friend tagging in stories
• Like and love reactions
• Comments system

Payment Integration

Supports multiple payment methods:

• Credit/Debit Card
• PayPal
• Google Pay
• Apple Pay

🚧 Development

Start all services

# Option 1: Use the development script
cd dev-scripts
./start-all.ps1

# Option 2: Start individually
# Terminal 1 - Backend
cd backend && npm start

# Terminal 2 - Admin Dashboard
cd admin-dashboard && npm start

# Terminal 3 - Customer Frontend
cd restaurant-frontendcls && npm start

📝 API Endpoints

Authentication

• POST /api/auth/register - User registration
• POST /api/auth/login - User login
• POST /api/admin/login - Admin login

Menu

• GET /api/menu-items - Get all menu items
• POST /api/menu-items - Add menu item (admin)
• PUT /api/menu-items/:id - Update menu item (admin)
• DELETE /api/menu-items/:id - Delete menu item (admin)

Orders

• GET /api/orders - Get all orders (admin)
• GET /api/orders/my - Get user orders
• POST /api/orders - Create order
• PATCH /api/orders/:id/status - Update order status (admin)

Users

• GET /api/users - Get all users (admin)
• GET /api/users/:id - Get user profile
• PUT /api/users/:id - Update user profile

Stories

• GET /api/stories - Get all stories
• POST /api/stories - Create story
• DELETE /api/stories/:id - Delete story

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License.

👥 Authors

• Your Name - Initial work

🙏 Acknowledgments

• React documentation
• Express.js community
• PostgreSQL community
• All contributors