My E-commerce website is a responsive and dynamic platform designed to make online shopping easy and enjoyable. It fetches product information from APIs, ensuring that the inventory is up-to-date and reflective of the latest offerings.
- User Authentication: Allow users to create accounts, log in, and securely manage their profiles.
- Product Listings : Display a variety of products with details such as name, price, and description.
- Shopping Cart : Enable users to add products to their cart and proceed to checkout.
- Search and Filters : Facilitate easy product discovery with search functionality and filters.
- Responsive Design : Ensure a seamless experience across devices.
Follow these steps to set up and run the E-commerce Website on your local machine.
Make sure you have the following software and accounts set up:
- Node.js : Download and install Node.js from nodejs.org.
- API Key : You will need an API key from the API provider API_KEY.
-
Clone the repository to your local machine:
git clone https://github.com/mkkapadi12/E-commerce.git
-
Change your working directory to the project folder:
cd E-commerce -
Create a
.envfile in the project root and add your News API key as follows:REACT_E-COMMERCE_PRODUCTS_API_KEY=your-api-key
-
Install the required dependencies:
npm install
-
Start the development server:
npm start
-
Open your web browser and navigate to http://localhost:3000 to access the E-commerce Website.
Once you have set up the project locally, you can interact with the React E-commerce website to explore products and simulate a shopping experience.
Visit the home page to get an overview of featured products and promotions. Navigate through different sections and get a feel for the overall design and layout.
Explore the product listings by clicking on different categories or using the search functionality. Each product card provides essential information such as the product name, price, and a brief description.
Click on a product card to view detailed information about a specific product. Get an in-depth look at product features, specifications, and customer reviews.
Add products to your cart and proceed to the shopping cart page. Review the items you've added, update quantities, and continue shopping or proceed to checkout.
If you wish to access additional features such as saving favorites or viewing order history, consider creating an account or logging in.
Test the responsiveness of the website by accessing it from different devices - desktops, tablets, and mobile phones. Ensure that the user interface adapts gracefully to various screen sizes.
Feel free to test any additional features, report any issues you encounter, and contribute to the improvement of the project.
We value your feedback! If you have suggestions, find bugs, or want to contribute, please let us know by opening an issue or submitting a pull request.
Enjoy exploring and shopping with our React E-commerce website!
src/contains the main source code of the application.src/components/holds React components used in the app.src/Context/holds React creatContext functionality.src/Helper/holds React small components as a helper used in the app.src/Pages/holds Pages like Home,About which show the users.src/reducer/holds React Hook "useReducer" functionalitysrc/styles/holds Button and Container styled Components.src/App.jsis the root component where the application starts.src/GlobalStyle.jsxcontains the CSS styles for the app using style component.
Contributions and improvements are welcome! If you have any ideas, feature suggestions, or bug reports, please open an issue or create a pull request on the Mayur E-commerce GitHub repository.
This project is licensed under the MIT License. See the LICENSE.md file for details.
- Built with React.js.
- Products data provided by PRODUCT API.
If you have any questions or need assistance, please feel free to contact us at
- Email: [mayurkapadi12@gmail.com]
- GitHub: [https://github.com/mkkapadi12]
Enjoy your Online Shopping with the Mayur E-commerce !