Accessory Avenue

This is an SPA for a mock store selling phone accessories, built with React and Vite.

How to Access Accessory Avenue

Accessory Avenue is hosted on Cloudflare Pages. You can access it here.

Features

• Product Browsing: View a list of available phone accessories.
• Quantity Selection: Adjust product quantity before adding to the cart.
• Add to Cart: Add items to the cart with a button click.
• Remove from Cart: Remove items from the cart when needed.
• Local Storage: Automatically saves the cart status so that cart items persist between page reloads.
• Responsive Design: Ensures a responsive design for all screen sizes.
• Accessibility: Follows web accessibility guidelines to ensure a usable experience for all users.

Tech Stack

• Vite - For fast development and bundling.

• React - For building the user interface with reusable components.

• React Router - For routing between the different views of the SPA.

• JavaScript - The core language for the application logic.

• HTML & CSS - For structuring and styling the application.

• Vitest - For unit testing.

Pages

Home

Shop

Cart

FAQs

Installation

1. Clone the Repository:

   git clone https://github.com/Maddily/accessory-avenue.git
   cd accessory-avenue

2. Install Dependencies:

   npm install

3. Start the Vite Server:

   npm run dev

   The app should now be running at http://localhost:5173.

Testing

Run the following command to execute tests:

npm test

Credits

• Mayada Saeed - Developer
• DummyJSON - Dummy products API
• Home page hero section photo by Martin Engel on Unsplash
• FAQ page heading background photo by Alex Dukhanov on Unsplash