5mg is a full-stack healthcare e-commerce web application, a clone of Tata 1mg, built with React, Redux, Chakra UI, Node.js, Express, and MongoDB, that lets users browse, filter, sort, and purchase health products online.
What is 5mg?
5mg is a full-stack web application clone of Tata 1mg, India's leading consumer health platform, reproducing core e-pharmacy functionality: product catalog browsing, detailed product views, filtering and sorting, cart management, and order summaries, with user authentication. The frontend runs on React 18.2.0 with Redux 4.2.0 for state management and Chakra UI 2.2.8 for styling; the backend uses Node.js 16.14.2, Express.js 4.18.1, and MongoDB 6.0. The project is deployed on Vercel and was built by a five-member team.
Key Features
- Responsive design — The entire website is fully responsive across devices, including the landing page, product pages, cart, and order summary.
- User authentication — Login and signup pages with credentials handled through Express, MongoDB, Node.js, and React.
- Product filtering — Filter products by brand and discount; filters work together.
- Product sorting — Sort products by price or rating, and combine sorting with filtering.
- Product details — Dedicated product details page presenting item information in a brief, structured manner.
- Cart operations — Add and remove items, update item quantities, and view an order summary before checkout.
- Debounced search — The landing page includes product search with debouncing for smoother input handling.
Who is it for?
- Full-stack developers — Can study how a production-like MERN stack application organizes authentication, state management, and e-commerce flows.
- E-commerce product managers — Can use the clone to explore typical Tata 1mg customer journeys like browsing, filtering, adding to cart, and order review.
- Healthcare startups — Can reference the cart and order-summary mechanics when building online pharmacy features.
What can you do with 5mg?
- Online shoppers: Browse a catalog of health products, filter by brand or discount, sort by price or rating, and add items to a cart.
- Store administrators: Test the product details page and cart logic as a template for building a working storefront prototype.
- UI/UX designers: Evaluate how Chakra UI components are composed into responsive pages for a healthcare brand.
How does 5mg work?
After cloning the repository, install dependencies for both the frontend and backend directories with npm install, then start the local server with npm start in the frontend folder. Users register or sign in, browse the product list, apply filters and sorts, view item details, add to cart, adjust quantities, and reach an order summary that leads to checkout.
FAQ
Is 5mg free?
The source repository is public and free to clone; the deployed demo is available on Vercel. The project itself is an open educational clone, not a commercial product.
What tech stack does 5mg use?
It uses React 18.2.0, Redux 4.2.0, and Chakra UI 2.2.8 on the frontend, with Node.js 16.14.2, Express.js 4.18.1, and MongoDB 6.0 on the backend. The app is deployed on Vercel.
Does 5mg include a backend?
Yes, the repository includes a backend folder with Express and MongoDB, covering user signup and login as well as product data storage.
Can I filter and sort at the same time?
Yes, the product page supports combined filtering by brand and discount along with sorting by price or rating, applied together.
