Welcome to the CoffeeShop E-Commerce Website, a sample React application showcasing a frontend for a virtual coffee shop. This project is built entirely with React, utilizing modern tools and libraries like Tailwind CSS, HeadlessUI, Typescript, and Vite for efficient development. The data for products and user cart items are stored in the browser's Local Storage for a simplified, client-only experience.
-
Responsive Design: The website is designed to be accessible and responsive across various devices, providing a seamless experience for users on both desktop and mobile.
-
Product Catalog: Browse through a variety of coffee products with detailed descriptions, prices, and images. Products and their details are stored in Local Storage.
-
Shopping Cart: Manage your selected items in the shopping cart. Users can add, remove, and update quantities of products, and all changes are stored in Local Storage.
-
Checkout Process: A simplified checkout process allows users to enter their shipping information and complete the purchase. For the sake of this sample, no actual payment processing is implemented.
-
User Authentication: Implement Google Login for user authentication. This provides a secure and convenient way for users to create accounts and log in.
-
Map Integration: Utilize Mapbox to display the location of the coffee shop, providing users with a visual reference.
-
React: A JavaScript library for building user interfaces.
-
Tailwind CSS: A utility-first CSS framework for rapidly building modern designs.
-
HeadlessUI: A set of completely unstyled, fully accessible UI components for React.
-
Typescript: A superset of JavaScript that adds static types, enhancing code quality and development experience.
-
Vite: A fast development server, bundler, and optimized build tool.
-
Mapbox: A mapping platform for embedding maps into applications.
Disclaimer: The product images used in this project are for demonstration purposes only and are sourced from Starbucks and Flaticon. It's essential to replace these placeholder images with ones that you have the right to use in your project. Ensure compliance with copyright and licensing agreements when selecting and using images. The creators of this project do not claim ownership or authorization for the use of the referenced images.
- Clone the repository:
git clone https://github.com/dev-zha/coffee-shop.git
- Install dependencies:
cd coffee-shop
yarn install
- Configure Google Login:
Obtain your Google API credentials and update the configuration in the project.
- Configure Mapbox:
Sign up for a Mapbox account, create a new project, and obtain an access token. Update the map configuration in the project.
- Run the development server:
yarn dev
- Open your browser and navigate to http://localhost:5173 to see the CoffeeShop E-Commerce Website in action!
- Zaw Htet Aung
Feel free to contribute, report issues, or suggest improvements. Happy coding!