About
Morningstar is a fully responsive e-commerce web app built to sharpen my skills in UI design and fullstack development.
The app showcases a fake online clothing store, and pulls product data from a custom-built Express(opens in a new tab) + MongoDB(opens in a new tab) API.
My goal was to simulate something akin to a real-world dev environment: from building an API and handling dynamic product filtering, to crafting a layout that is both expressive and responsive.
UI/UX
Built with utility-first Tailwind(opens in a new tab) classes for quick styling and consistency. The layout is fully responsive and scales smoothly from mobile to widescreen.
I also focused on creating seamless interaction design — making sure users can access key content and actions within one or two clicks, wherever they are, for an experience that feels natural and effortless.
Dynamic Routing
Built with React Router(opens in a new tab), the app uses nested routes and dynamic URL parameters to handle product categories and item detail pages.
This prevents full page reloads, in order to create a seamless user experience.
State Management
I knew I wanted to keep product and cart logic centralized with global state. I used Redux Toolkit(opens in a new tab) to manage global state for the products, cart, filters and UI controls.
Async logic (like API fetching) is handled with thunks.
Custom API
Powered by Express(opens in a new tab) and MongoDB(opens in a new tab), I built a custom REST API to serve product data. The API supports filtering, querying by category or type, and is designed to mirror the structure of a real-world backend.