A modern, full-stack coffee shop e-commerce application built with React.js and Node.js.
- Project Overview
- Features
- Tech Stack
- Project Structure
- Installation
- Usage
- Known Issues
- Screenshots
- Contributing
- License
- User Authentication: Email/Password and Google OAuth login
- Product Catalog: Browse coffee, cakes, milkshakes, and soups
- Shopping Cart: Add/remove items with real-time updates
- Order Management: Place and track orders
- Product Reviews: Rate and review products
- Admin Panel: Manage products, orders, and users
- Responsive Design: Mobile-friendly interface
- Customer Support: Interactive chatbot
- React.js - UI Framework
- Redux Toolkit - State Management
- Tailwind CSS - Styling
- React Router - Navigation
- Node.js & Express.js - Server
- MongoDB - Database
- JWT & Passport.js - Authentication
- PM2 - Process Management
- Node.js (v18+)
- MongoDB
- Git
☕ coffeeShop/
├── .github/ # GitHub configuration
│ ├── ISSUE_TEMPLATE/ # Standardized issue templates
│ │ ├── Bug-report.yaml
│ │ ├── Doc.yaml
│ │ ├── Feature-Request.yaml
│ │ └── general_issues.yaml
│ ├── workflow/ # CI/CD GitHub Actions
│ │ ├── PRs.yaml
│ │ ├── auto-comment-pr.yaml
│ │ ├── auto-comment.yaml
│ │ ├── autoCloseLinkedIssues.yaml
│ │ └── main.yaml
│ └── PULL_REQUEST_TEMPLATE.md # Template for pull requests
│
├── backend/ # Backend logic and APIs
│ ├── __tests__/ # Test suites
│ ├── config/ # App configuration and constants
│ ├── middleware/ # Express middleware (auth, logging, etc.)
│ ├── models/ # Mongoose data models
│ ├── routes/ # API route handlers
│ └── seeders/ # Seed data for DB initialization
│
├── public/ # Static assets like icons and images
│
├── src/ # Frontend source code
│ ├── Pages/ # Page-level components for routing
│ ├── Store/ # State management (Redux, Zustand, etc.)
│ ├── components/ # Reusable UI components
│ ├── services/ # API interactions and service logic
│ └── utils/ # Utility functions
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── reportWebVitals.js
│ └── setupTests.js
│
├── .gitignore # Specifies files to exclude from git
├── CODE_OF_CONDUCT.md # Community standards and behavior
├── CONTRIBUTING.md # Guidelines for contributing to the project
├── LICENSE # Legal license (e.g., MIT, Apache)
├── README.md # Entry point for documentation
├── package-lock.json # Exact dependency versions
├── package.json # Project metadata and dependencies
├── postcss.config.js # CSS transformer configuration
└── tailwind.config.js # TailwindCSS styling configuration
- Clone the repository
git clone https://github.com/Mujtabaa07/coffeeShop.git
cd coffeeShop- Setup Backend
cd backend
npm install
# Create your local environment file
cp .env.example .env
# OR copy from the local example
cp .env.local.example .env
# Edit .env with your actual values (MongoDB URI, JWT secret, Google OAuth, etc.)
nano .env
# Start the backend server
npm start- Setup Frontend
# In project root directory
npm install
# Create your local environment file
cp .env.example .env.local
# OR copy from the local example
cp .env.local.example .env.local
# Edit .env.local with your API URL and Google Client ID
nano .env.local
# Start the frontend
npm start- Open your browser
- Frontend: http://localhost:3000
- Backend API: http://localhost:3000/api
Create a .env file in the backend/ directory:
MONGODB_URI=mongodb://localhost:27017/mscafe_coffeeshop
JWT_SECRET=your-jwt-secret-key
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
PORT=3000
NODE_ENV=development
# Or run separately:
# Backend: cd backend && npm run dev
# Frontend: npm startOnce the server is running, you can view the app at (http://localhost:3000).
To use the app:
- View Coffee Menu: Browse through the available coffee items on the homepage.
- Learn About Coffee: Check out the sourcing section to learn more about our sustainably sourced beans.
- Place an Order: In future releases, you'll be able to add items to the cart and complete orders.
The Edit Profile button on the user profile screen is currently non-functional, clicking or tapping it does not trigger any visible action.
- The button may lack an
onClickor equivalent event handler - The navigation route to the Edit Profile screen may be missing or misconfigured
- The Edit Profile screen/component might not be implemented or properly linked
- Check if the button has a correctly assigned event handler
- Verify that navigation to the Edit Profile screen is set up and routed properly
- Confirm that the target screen/component exists and is integrated into the navigation system
We welcome contributions! Follow the steps below to contribute to this project:
# Click the "Fork" button at the top-right of the repository page to create a copy in your GitHub account.Create a .env.local file in the root directory:
REACT_APP_API_URL=http://localhost:3000/api
REACT_APP_GOOGLE_CLIENT_ID=your-google-client-idNote: Your local .env files are ignored by Git for security. Use the provided .env.example files as templates.
- Frontend: https://coffee-shop-teal.vercel.app
- API: Contact for backend access
Coming soon - Add your screenshots here
We welcome contributions! Please see CONTRIBUTING.md for details.
- Fork the repository
- Clone your fork locally (
git clone https://github.com/<your-username>/coffeeShop.git cd coffeeShop) - Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Use the ISSUE_TEMPLATE for bugs, feature requests, or improvements.
- Follow the CODE_OF_CONDUCT.md and keep things respectful and inclusive.
- Review the CONTRIBUTING.md for detailed guidance. New to open source? Don’t worry — this project is beginner-friendly! 🌱
This project is licensed under the MIT License - see the LICENSE file for details.
Mujtabaa07 - GitHub
If you find this project helpful, please give it a star! ⭐
Made with ❤️ and lots of ☕