Key Features & Highlights

Customer Storefront — Browse, filter, sort, and view bakery products with detailed product information.

Shopping Cart & Checkout — Add products, manage cart, and place orders.

User Authentication — Secure customer registration and login.

Order Management — View orders and track order status.

Admin Dashboard — Manage products and customer orders.

RESTful Backend API — Handle users, products, and orders with a backend API.

Technologies & Architecture

MongoDBExpress.jsNode.jsReactViteTailwind CSSMongooseJWTBcryptCloudinaryMulterAxiosReact Router

View Source Code

Fluffy Delights - Sweet Shop

About Project

A full-stack MERN e-commerce application developed as a university group project for the Web Technologies module. The system was designed for an online bakery and confectionery store, providing a customer storefront, admin dashboard, and RESTful backend API.

The platform allows customers to browse and filter products, manage their shopping cart, place orders, and track order status. Administrators can manage products, upload product images, and monitor and update customer orders through a dedicated dashboard.

Application Development

We developed this project as a group for the Web Technologies module using the MERN stack. The application was divided into three main components: a React-based customer storefront, a React-based admin dashboard, and a Node.js/Express REST API connected to MongoDB. We implemented product browsing, shopping cart functionality, user authentication, checkout, order management, and administrative product and order management.

The backend was designed using RESTful APIs with separate models, controllers, routes, and authentication middleware. We used MongoDB with Mongoose for data management, Cloudinary for product image storage, and JWT with bcrypt for authentication and password security. The frontend applications communicate with the backend through Axios and use React Router for navigation and protected application flows.

What I Learned

Through this project, I gained practical experience in full-stack web development and learned how frontend, backend, database, authentication, and external services work together in a complete web application. I developed a better understanding of REST API design, MongoDB data modeling, JWT authentication, password hashing, file uploads, cloud image storage, React state management, routing, and responsive UI development. Working as part of a group also helped me gain experience in collaborative development, integrating different modules, and managing a shared project structure.