FreshCart

Many online stores lose customers between browsing and paying: pages that feel cramped on a phone, sign-up and password recovery that are confusing, and carts that empty themselves at the worst moment.

The brief was to implement a full store on a ready e-commerce API, following a provided Figma design for desktop, tablet and mobile — and to improve on it where the experience could be smoother.

Treat the store as a set of journeys rather than pages: discover, decide, buy, and come back. Each journey had to work for a guest and for a logged-in customer.

Keep all API calls in one place — a services layer of server actions — so pages stay simple and every request handles success and failure the same way.

The Figma design was translated into reusable components — product cards, page heroes, empty states, confirm dialogs, pagination — built with Tailwind CSS and shadcn/ui so every page shares one visual language.

Each screen was checked at mobile, tablet and desktop widths. Filters, the cart summary and the checkout form were arranged so the main action is always within reach on a phone.

Next.js App Router with TypeScript throughout. Authentication uses NextAuth with the API's JWT; a route guard redirects visitors away from checkout, orders and profile pages until they sign in, then returns them to where they were going.

Forms — sign-up, login, forgot and reset password, addresses, checkout, profile — are validated with React Hook Form and Zod schemas, so mistakes are explained in plain words before anything is sent.

The store covers categories, brands, product details with reviews, search with filters and sorting kept in the URL, pagination, wishlist, cart quantities, coupons, cash or online checkout, order history, saved addresses and account settings.

The hardest part was keeping the cart and wishlist consistent between the browser and the server. A visitor who isn't logged in should still be able to shop — but the moment they sign in, nothing they chose should disappear or be duplicated.

The solution was a cart context with two modes. Guests' items live in LocalStorage and update instantly. When the session becomes authenticated, the guest cart is replayed into the server cart item by item — keeping the larger quantity when a product already exists — then cleared, and the interface refreshes from the server's response. The wishlist follows the same pattern.

Pages are rendered by Next.js and data is fetched on the server where possible, so the first view arrives ready. Shared layouts and components keep the client bundle small, and the store is deployed on Vercel.

A complete, responsive store that takes a shopper from the first product to a placed order — including the awkward moments in between, like forgetting a password or signing in halfway through shopping. It is live on Vercel and its code is public on GitHub.