A full-stack coffee e-commerce and café management web application featuring an interactive 3D-inspired frontend, persistent shopping cart, customer checkout, table reservations, order management, and an administrative dashboard.
Built with HTML, CSS, JavaScript, Node.js, Express.js, MongoDB, and Mongoose, the application demonstrates a complete frontend-to-backend commerce workflow and is deployed using Netlify and Render.
Brew3D Coffee Commerce Platform is a full-stack, multi-page web application designed to simulate a modern digital café experience.
The platform allows customers to explore coffee products, add products to a persistent shopping cart, complete checkout, place orders, reserve tables, and contact the café.
A dedicated administrative dashboard provides café-management functionality, including viewing customer orders, viewing reservations, deleting completed or unwanted records, and adding products.
The project demonstrates practical full-stack development by connecting a responsive JavaScript frontend to a deployed Node.js and Express REST API backed by MongoDB Atlas.
- Interactive coffee product catalogue
- Product names, images, and prices
- Coffee-category filtering
- Add-to-cart functionality
- Animated product cards
- Responsive product layouts
- Add products directly from the menu
- Persistent cart using browser LocalStorage
- Live cart quantity indicator
- Multiple-product support
- Product quantity tracking
- Individual item totals
- Dynamic order total calculation
- Remove products from cart
- Cart data retained while navigating between pages
- Dedicated checkout workflow
- Customer full-name collection
- Email-address collection
- Phone-number collection
- Delivery-address collection
- Payment-method selection
- Complete order summary before submission
- Product quantities and prices displayed
- Total order value calculated automatically
- Successful-order confirmation
- MongoDB order persistence
- Cart automatically cleared after successful checkout
The current card option records the selected payment method as part of the order. Integration with a production payment gateway is planned as a future enhancement.
Customers can submit table reservations through the booking interface.
Booking information is sent through the backend API and stored for administrative management.
- Dedicated contact page
- Customer enquiry form
- Backend contact endpoint
- Responsive contact interface
The administrative dashboard provides café-management functionality including:
- View customer orders
- View customer contact information
- View delivery addresses
- View payment methods
- View ordered products
- View quantities
- View order totals
- View order status
- View order timestamps
- Delete customer orders
- View table reservations
- View reservation date and time
- View guest count
- Delete table bookings
- Add new products
Customer Visits Website
│
▼
Browse Coffee Menu
│
▼
Select Coffee Products
│
▼
Add Products to Cart
│
▼
Persistent LocalStorage Cart
│
▼
Review Shopping Cart
│
▼
Proceed to Checkout
│
▼
Enter Customer Details
│
├── Full Name
├── Email
├── Phone
├── Delivery Address
└── Payment Method
│
▼
Review Order Summary
│
▼
Place Order
│
▼
Express REST API
│
▼
MongoDB Atlas
│
▼
Admin Dashboard
│
▼
View / Manage / Delete Order
Customer
│
▼
Table Booking Form
│
▼
Booking Details
│
▼
Express Booking API
│
▼
MongoDB Atlas
│
▼
Admin Dashboard
│
▼
View / Delete Reservation
┌──────────────────────────────┐
│ CUSTOMER │
└──────────────┬───────────────┘
│
▼
┌──────────────────────────────┐
│ NETLIFY FRONTEND │
│ │
│ HTML5 │
│ CSS3 │
│ JavaScript │
│ LocalStorage │
│ Swiper.js │
│ ScrollReveal │
│ Boxicons │
└──────────────┬───────────────┘
│
│ HTTPS / REST API
▼
┌──────────────────────────────┐
│ RENDER BACKEND │
│ │
│ Node.js │
│ Express.js │
│ Mongoose │
│ REST API │
│ CORS │
└──────────────┬───────────────┘
│
▼
┌──────────────────────────────┐
│ MONGODB ATLAS │
│ │
│ Orders │
│ Bookings │
│ Products │
│ Contact Requests │
└──────────────────────────────┘
| Technology | Purpose |
|---|---|
| HTML5 | Multi-page website structure |
| CSS3 | Responsive styling and visual effects |
| JavaScript | Frontend application logic |
| LocalStorage | Persistent shopping-cart storage |
| Swiper.js | Interactive content components |
| ScrollReveal | Scroll-based animations |
| Boxicons | Interface icons |
| Technology | Purpose |
|---|---|
| Node.js | Server-side JavaScript runtime |
| Express.js | REST API and server routing |
| Mongoose | MongoDB object modelling |
| CORS | Frontend/backend cross-origin communication |
| dotenv | Environment-variable management |
| Technology | Purpose |
|---|---|
| MongoDB Atlas | Cloud database |
| Mongoose Schemas | Application data modelling |
| Technology | Purpose |
|---|---|
| Netlify | Frontend deployment |
| Render | Backend API deployment |
| GitHub | Version control and source-code hosting |
| Git | Source-control workflow |
| VS Code | Development environment |
The application contains multiple dedicated pages:
index.html
about.html
menu.html
services.html
booking.html
cart.html
contact.html
admin.html
Introduces Swa Cafe through an animated, coffee-themed landing experience.
Presents the café concept and brand experience.
Displays coffee products and allows customers to add selected products to their shopping cart.
Presents the services offered by Swa Cafe.
Allows customers to submit table reservations.
Displays selected products, quantities, prices and totals before allowing customers to complete their order.
Provides a dedicated customer-contact interface.
Provides administrative access to application data and café-management functionality.
The frontend communicates with the Express backend through REST-style API endpoints.
| Method | Endpoint | Purpose |
|---|---|---|
POST |
/api/orders |
Place a customer order |
GET |
/api/orders |
Retrieve customer orders |
DELETE |
/api/orders/:id |
Delete an order |
| Method | Endpoint | Purpose |
|---|---|---|
POST |
/api/bookings |
Create a table reservation |
GET |
/api/bookings |
Retrieve reservations |
DELETE |
/api/bookings/:id |
Delete a reservation |
| Method | Endpoint | Purpose |
|---|---|---|
POST |
/api/products |
Add a product |
| Method | Endpoint | Purpose |
|---|---|---|
POST |
/api/contacts |
Submit a customer enquiry |
Customer orders can contain information such as:
Order
│
├── Customer
│ ├── Name
│ ├── Email
│ ├── Phone
│ └── Address
│
├── Items
│ ├── Product Name
│ ├── Price
│ ├── Quantity
│ └── Image
│
├── Total
├── Payment Method
├── Status
├── Created Time
└── Updated Time
This information is persisted in MongoDB and retrieved by the administrative dashboard.
The cart is managed on the frontend using browser LocalStorage.
This provides:
- Cart persistence between pages
- Dynamic cart-count updates
- Quantity tracking
- Product removal
- Automatic price calculations
- Checkout order-summary generation
After a successful order is stored through the backend API, the customer's cart is automatically cleared.
Orders submitted through checkout are stored in MongoDB Atlas.
The admin dashboard retrieves these records through:
GET /api/ordersEach administrative order card can display:
- Order ID
- Order date and time
- Customer name
- Customer email
- Customer phone
- Delivery address
- Payment method
- Order status
- Products ordered
- Quantity
- Individual item values
- Total order value
Administrators can remove an order through:
DELETE /api/orders/:idThe dashboard refreshes after a successful deletion.
Table reservations submitted by customers are retrieved by the admin dashboard.
Administrators can view reservation information such as:
- Customer name
- Phone number
- Reservation date
- Reservation time
- Number of guests
Reservations can also be removed from the system through the booking DELETE endpoint.
Coffee-commerce-fullstack/
│
├── assets/
│ └── images/
│
├── backend/
│ ├── models/
│ ├── routes/
│ ├── package.json
│ └── server.js
│
├── docs/
│ └── screenshots/
│
├── index.html
├── about.html
├── menu.html
├── services.html
├── booking.html
├── cart.html
├── contact.html
├── admin.html
├── style.css
├── main.js
└── README.md
The project uses separate frontend and backend deployments.
The static frontend is deployed on Netlify.
It contains:
- HTML pages
- CSS styling
- JavaScript application logic
- Product images and visual assets
The Node.js and Express REST API is deployed on Render.
The frontend communicates with the deployed API to perform operations including:
Create Order
Retrieve Orders
Delete Order
Create Booking
Retrieve Bookings
Delete Booking
Add Product
Submit Contact Request
The backend communicates with MongoDB Atlas for persistent cloud data storage.
Sensitive backend configuration is managed through environment variables rather than being hard-coded into the application.
Typical backend configuration includes:
PORT=5000
MONGO_URL=your_mongodb_connection_stringReal credentials and database secrets should never be committed to the public repository.
git clone <repository-url>
cd Coffee-commerce-fullstackcd backend
npm installCreate:
backend/.env
Add the required MongoDB connection configuration.
Development mode:
npm run devor:
npm startThe backend uses port 5000 by default when no deployment port is provided.
Open the frontend using a local development server or deploy the static application to a hosting provider such as Netlify.
The application focuses on creating a visually engaging café experience through:
- Coffee-inspired visual design
- Glass-style cards
- Animated backgrounds
- Interactive product cards
- Scroll-based animations
- Responsive navigation
- 3D-inspired presentation
- Mobile-friendly layouts
- Dynamic cart notifications
- Smooth checkout flow
This project demonstrates practical experience with:
- Full-stack web development
- JavaScript application development
- REST API design
- Node.js
- Express.js
- MongoDB
- Mongoose
- CRUD operations
- Asynchronous JavaScript
- Fetch API
- JSON data exchange
- Browser LocalStorage
- Responsive UI development
- Form handling
- Client/server integration
- Cloud database integration
- Frontend deployment
- Backend deployment
- Git and GitHub version control
- Debugging deployed full-stack applications
Potential future development includes:
- 🔐 Secure administrator authentication
- 👥 Role-based access control
- 💳 Stripe or another production payment gateway
- 📦 Inventory management
- 🔄 Admin order-status updates
- 🟡 Pending orders
- 🔵 Preparing orders
- 🟢 Completed orders
- 🚚 Delivery-status tracking
- 👤 Customer accounts
- 📧 Automated order-confirmation emails
- 📊 Admin analytics dashboard
- 🔎 Order search and filtering
- 🧾 Digital receipts
- 🧪 Automated frontend and backend testing
- ⚙️ CI/CD pipeline
- 🐳 Docker containerisation
- ☁️ Expanded cloud deployment
Current Status: Functional Full-Stack Application
The current deployed application supports the complete core workflow:
Product Selection
↓
Shopping Cart
↓
Checkout
↓
Customer Order
↓
REST API
↓
MongoDB Persistence
↓
Admin Order Management
Table reservations and administrative booking management are also integrated into the application.
Developed as a full-stack portfolio project demonstrating frontend development, backend API engineering, database integration, deployment, and practical e-commerce workflow implementation.
This project is intended for educational and portfolio purposes.