E-Commerce Web Store using Pokémon API - Documentation

Deploy at Vercel: Poke-Store-Next

Project Overview

This is an educational project of an e-commerce web store built using ReactJS, NextJS, SASS, SWR, Chakra UI, FontAwesome, Node, JavaScript, and can be run on both Linux and Windows operating systems. The main objective of this project is to create a Next.js application that interacts with the Pokémon API (https://pokeapi.co/api/v2/pokemon) to display Pokémon-related products for sale.

Project Objectives

1. Create a Next.js Application: The project begins with setting up a Next.js application using the create-next-app command. Next.js is chosen for its server-side rendering capabilities, making it suitable for SEO-friendly and performant web applications.

2. Create Routes: Next.js follows a file-system-based routing approach, where each page is represented by a file inside the pages/ folder. Routes will be created to navigate between different parts of the application.

3. Reproduce HTML on Next.js: The HTML layout and design for the e-commerce web store will be reproduced using components and styling with SASS in the Next.js application.

4. Create and Use Components: Various components will be created to modularize the application and improve code reusability. These components will be used to structure different sections of the web store.

5. Include Components with State: Some components will use React state to manage their behavior, such as managing cart items, adding/removing products from the cart, etc.

6. Fetch Data from Pokémon API: The web store will interact with the Pokémon API (https://pokeapi.co/api/v2/pokemon) to retrieve data about Pokémon products to display on the web store.

7. Use Chakra UI and FontAwesome: Chakra UI will be utilized to create a responsive and visually appealing user interface, and FontAwesome will provide icons for a better user experience.

8. Version Control with GitHub: The entire project code, including the Next.js application, will be hosted on GitHub to allow for easy collaboration and version control.

Project Components

1. pages/ Folder: Contains different pages and routes for the web store.
2. React Components: Several components to handle header, footer, product listing, product details, shopping cart, etc.
3. State Management: Components responsible for managing state, such as shopping cart items and user interactions.
4. API Interaction: Code to fetch Pokémon data from the Pokémon API using SWR library.
5. SASS Styles: Styling for components and layout using SASS to improve readability and maintainability.
6. Chakra UI Integration: Utilizing Chakra UI components to enhance the visual appearance of the web store.
7. FontAwesome Integration: Integrating FontAwesome icons for better visual elements.

Instructions to Run the Project

1. Clone the GitHub repository to your local machine.
2. Make sure Node.js and npm are installed on your system.
3. Navigate to the project root folder in the terminal.
4. Run npm install to install all project dependencies.
5. Run npm run dev to start the Next.js development server.
6. Open your web browser and visit http://localhost:3000 to view the web store.

Educational Purpose Disclaimer

This project is created solely for educational purposes, and it does not serve as a fully functional e-commerce store. The primary goal of this project is to learn and practice the usage of React, Next.js, and other mentioned technologies. It does not handle real payment transactions or other essential e-commerce functionalities. Users should not attempt to use this project for commercial purposes or real-world applications without proper modifications and enhancements.

Resources

1. ReactJS: https://reactjs.org/
2. NextJS: https://nextjs.org/
3. SASS: https://sass-lang.com/
4. SWR: https://swr.vercel.app/
5. Chakra UI: https://chakra-ui.com/
6. FontAwesome: https://fontawesome.com/
7. Node.js: https://nodejs.org/

License

This project is open-source and uses the MIT License. Please refer to the LICENSE file for more details.

---

With this documentation, developers can understand the purpose, objectives, components, and technologies used in the e-commerce web store project. The project is designed for learning and educational purposes, and developers can refer to the GitHub repository for the complete codebase.