Stylux is a full-stack e-commerce template for fashion retail, built as a clone of Yepme, that provides a complete shopping experience from product browsing to admin order management.
What is Stylux?
Stylux is an e-commerce web application template specialized in online retail of men's and women's garments and accessories. It runs on the MERN stack — MongoDB, Express, React, and Node.js — with Chakra UI for component styling and Redux for state management. The repository ships with both the React front end and the Node.js/Express back end, including database schemas and REST API endpoints for users, products, cart, and orders.
Key Features
Stylux bundles customer-facing storefront pages, a REST API, and an admin panel into a single codebase.
- Customer-facing pages — Home, product listing, single product detail, cart, checkout, and profile pages are provided as React components.
- Admin dashboard — Separate admin panel includes a dashboard, add product, edit product, manage orders, and manage admin pages.
- REST API backend — Node.js and Express endpoints for
/user,/product,/cart,/order, and/search, protected by an authorization header. - Product filtering and search — The product API supports queries by size, price, category, style, color, material, fit, occasion, sleeves, neck, brand, and gender.
- Chakra UI styling — All UI components are built with Chakra UI, with react-icons, react-lottie, and slick-carousel for icons and carousels.
- Detailed MongoDB schemas — Product, cart, and order models include fields such as originalPrice, sizes, delivery cost, stock, tags, and totalDiscountPrice, with automatic fields for
_id, role, orderDate, and adminId. - Deployment configuration — Front end is configured for Vercel and back end for Cyclic, as stated in the tech stack section.
Who is it for?
Stylux fits developers and teams who need a complete MERN e-commerce starting point with examples.
- Full-stack developers learning MERN — use the complete codebase to see how authentication, product listing, cart, and order flows connect across React, Express, and MongoDB.
- Fashion e-commerce startups — can adapt the product and checkout pages and the admin product management screens as a starting point for a store.
- Students working on team projects — the README documents a daily-branch workflow with a student code naming scheme (for example
fw21_1003_day-2) that teams can follow. - Developers seeking a Chakra UI example — the repo demonstrates integrating Chakra UI with Redux, React Router, and a Node.js backend in a multi-page app.
What can you do with Stylux?
Beyond the default storefront, Stylux supports several concrete workflows.
- Launch a fashion storefront — load products from the
/productAPI and display them on the homepage and product listing pages, with filters by category, brand, size, and other attributes. - Run an admin panel — add, edit, and delete products, manage orders, and manage admins through dedicated admin routes and authorization.
- Process a checkout flow — add items to the cart via the
/cartendpoints, place an order through the/orderendpoint, and store user address and delivery information. - Test a search API — use the
/search?q=endpoint and the/products?query parameters to filter the product catalog.
How does Stylux work?
The repository includes a getting-started guide: clone the repository, run npm install, and install specific dependencies such as react-router-dom, redux, react-redux, redux-thunk, axios, and @chakra-ui/react. The README then instructs developers to create daily branches using a student code naming scheme and pull changes from origin. The backend exposes REST endpoints that the front end consumes using an authorization header.
