Morningstar

Mockup of desktop view for Morningstar, showcasing the home page, products pages, and the page for a single product.
Mockup of mobile view for Morningstar's home page, including the main navigation dropdown menu and its hover effects.
Screenshot of the Women's products section of Morningstar. The page is light with pastel colored accents and gradients.
Screenshot of the single product page for Morningstar, the layout featured a large modeled product image to the left, and description and color, size and quantity selection to the right.
Different types of menus of the products page, including the dropdown menu for sorting options, and the product card menu for quick selection and adding to cart.

Technologies used

Lighthouse

100/100

Woman wearing a bold streetwear set with a black and white pattern

Morningstar is a custom-built e-commerce web app designed to sharpen my skills in both frontend &fullstack development.

My goal was to simulate a real-world development environment: designing an expressive, responsive UI from scratch, building a REST API & integrating dynamic product data.

The app puts special focus on UI/UX, accessibility & performance, earning a 100/100 Lighthouse score without compromising style or interactivity.

UI/UX

Navigation is designed to be quick & easy. Users can reach key content & actions within one or two clicks from anywhere on the site. The UI is playful with a style that feels both modern & a little nostalgic - something that works well across a wide age range.

Visual of the design system of project: Morningstar

Design System

I created a consistent, component-based UI using Tailwind & custom design tokens. Every part of the layout - from buttons to cards to color palette - follows a shared system to keep the app visually cohesive & easy to expand.

Visual of the responsive layout of project: Morningstar

Responsive layout

The layout adapts smoothly from mobile to widescreen using utility-first classes. I paid close attention to spacing, scaling & content structure to ensure the site feels intuitive no matter the device size.

Visual of the interactivity of project: Morningstar

Interactivity

From dropdown menus to product hover states, every interaction was designed to feel intentional. I focused on micro-interactions & visual feedback to guide the user without distracting them.

Visual of the filtering & sorting of project: Morningstar

Filtering & Sorting

I built filter and sorting features that feel fast & intuitive. Filter menus, sort dropdowns & category pages are all powered by async Redux logic & tightly integrated with the API structure.

Challenges

  • REST API icon

    Keep product data dynamic and always up to date

  • Global state icon

    Manage global state for cart, wishlist, and filtering

  • Dynamic data icon

    Make the app accessible for all users

  • Lighthouse score icon

    Hit a perfect 100/100 Lighthouse score

Outcome

  • Built and connected a custom REST API to serve live product data

  • Managed global state with Redux slices (cart, wishlist, filters)

  • Wrote semantic HTML, added ARIA labels & created reusable A11y-friendly components

  • Focused on performance and best practices & landed a 100/100 Lighthouse score

Reflection

This project was technically complete months ago, but I revisited it with fresh eyes to polish the layout & clean up the code. I made the structure more maintainable & optimized everything for performance & readability.

I enjoyed making the navigation smooth & intuitive, so users could access key features with as few clicks as possible.

Along the way, I deepened my understanding of fullstack development & gained confidence designing layout systems from scratch.