Timbu Cloud Shop

Overview

Welcome to the Timbu Cloud Shop project! This project is a collaborative effort to create a visually appealing and responsive e-commerce webpage, featuring a shop page and a checkout page, using React

Features

• Collaboration: Partnered with a designer to bring the Timbu Cloud Shop page design to life.
• Responsive Design: The website is fully responsive, ensuring optimal functionality on desktop, tablet, and mobile devices.
• Product Display: Products are fetched and showcased with clear descriptions and high-quality images from Timbu Cloud Api.
• Static Checkout Page: A checkout page is implemented (static, no functional checkout process).

Technologies Used

• Frontend: React
• Styling: Styled-components
• Global State: React-Redux and @reduxjs/toolkit
• Data Fetching and caching: @tanstack/react-query

Requirements Met

• Design Adherence: Pixel-perfect implementation of the Figma design provided by the designer.
• Product Display: Clear and concise product descriptions and images.
• Navigation: Intuitive navigation allowing users to browse through the shop page.
• Static Pages: All necessary static pages implemented with attention to detail.
• Responsiveness: Fully responsive design, adaptable to different screen sizes.
• Code Quality: Well-structured, indented, and easy-to-read code.

Project Structure

• Components: Reusable React components for the shop page, product listings, and checkout page.
• Styles: Styled-components for maintaining clean and manageable styles.

How to Run the Project

1. Clone the Repository:

   git clone https://github.com/yourusername/timbu-cloud-shop.git

2. Install Dependencies:

   cd timbu-cloud-shop
   npm install

3. Run the Development Server:

   npm run dev

4. Open http://localhost:5173 to view it in the browser.

Links

• Live Demo: Timbu Cloud Shop on Vercel