Welcome to the Himalaya Store Project! This project is a simple online store where you can buy Himalaya products, check out different categories, and learn more about the company.
Note : Before starting to see this project, start "json-server" in your local PC by running this command -
json-server --watch db.json
This project is an online store for Himalaya products. It includes a home page, about page, shop page, cart page, login page, and a store locator. The project uses React and Chakra UI to build the user interface.
Here’s how you can get started with the Himalaya Store Project:
-
Clone the repository:
git clone https://github.com/your-username/himalaya-store.git cd himalaya-store
-
Install dependencies:
npm install
-
Start the development server:
npm start
-
Open your browser and go to
http://localhost:3000
.
- Path:
/
- Description: The home page showcases a featured product with an image, description, and a "Shop Now" button. It also displays categories and best sellers.
- Path:
/about
- Description: The about page provides information about the company's story, roots, process, science, and initiatives through different tabs.
- Path:
/cart
- Description: The cart page displays items added to the shopping cart, allows quantity adjustments, and provides options to clear or update the cart. It shows the subtotal and grand total of the items in the cart.
- Path:
/login
- Description: The login page allows users to enter their email and password to log in. Successful login redirects to the home page.
- Path:
/collections
- Description: The shop page displays a list of products. Users can sort products by price (low to high or high to low). Each product is displayed using the
ProductCard
component.
- Path:
/store-locator
- Description: The store locator page allows users to search for nearby stores using a zip code or address. It displays search results and a map with store locations.
- Description: The navbar contains links to the home page, shop page, about page, and store locator. It also includes icons for search, account, and cart.
- Description: The
ProductCard
component displays a single product with its image, title, description, and price. It includes an "Add to Cart" button that allows users to add the product to their shopping cart.
- React: A JavaScript library for building user interfaces.
- Chakra UI: A simple, modular, and accessible component library for React.
- Axios: A promise-based HTTP client for the browser and Node.js.
That's it! You've got all the information you need to understand and start working with the Himalaya Store Project. If you have any questions, feel free to ask.
Happy coding! 🌟