Chah - Fine Teas

Mobile responsive e-commerce frontend

Description

I made this single-page application for The Odin Project Shopping Cart assignment.

Project Objectives

• Client-side routing with React Router
• Shopping cart component with item count visible from all routes
• Tests in React Testing Library

Usage

Visit the live site on GitHub Pages.

Or run locally with:

git clone https://github.com/kathyavini/shopping-cart.git
cd shopping-cart
npm install
npm run start

Features

• Navigation and layout animations in CSS + Framer Motion
• Co-location of JSX and styles with Styled-Components
• Mobile-responsive

Demo

Technologies used

• React
• React Router
• React Testing Library
• Styled Components

Credits and Attributions

I modelled Chah on the Shopify Theme Foodie by We Are Underground.

Especially for the cart component, I tried to replicate the design and the responsive behaviour pretty closely:

Chah (left) + Foodie: Grind Theme (right)

I also used the colours, fonts, buttons, and a few other inspirations throughout the site. It was a pleasure to work off of a professional design instead of trying to create my own, and it saved me quite a bit of time relative to my previous frontend projects :)

All credit and copyright belong to We Are Underground.