Stylux

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 /product API 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 /cart endpoints, place an order through the /order endpoint, 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.