← Back to projects

My shop

myshop homepage screenshot
Homepage for Myshop, an e-commerce website with a complete shopping cart flow.
Live site GitHub

Project description

A modern online shop built with Next.js and TypeScript. The site fetches products from an API, allows users to browse items, search and sort products, view product details, and add items to a shopping cart before completing checkout.

The project focuses on creating a smooth shopping experience with responsive design, product search, cart management and a checkout flow. It was built as part of the JavaScript Frameworks course at Noroff.

What I learned

This project helped me improve my understanding of Next.js, TypeScript and component-based development. I gained experience working with API data, dynamic routing, state management and building reusable components.

I also learned more about creating user-friendly shopping experiences, handling loading and error states, and structuring larger React applications.

Improvements Made

my shop before improvements
Before: Basic loading experience.
myshop after improvements
After: Added skeleton loading to provide visual feedback during loading.

Before adding this project to my portfolio, I reviewed and refined several parts of the application. I removed unused dark mode styles from the default Next.js setup to ensure a more consistent appearance across devices.

I also added skeleton loading states for both the homepage and product pages to improve the user experience while data is loading. In addition, I updated the cart summary to display the total number of items, including quantities, making the checkout experience clearer for users.