Important Project Information

Project Description:

This is my final project for the ReactJS course at CoderHouse, part of the front-end web developer career. This project consists of an ecommerce implemented with React together with React Router, React Hooks, Material UI Library as the main framework for React components, Validator for formulary data validation, React Toastify for notifications and using Firebase as a database.

Please keep in mind that no further libraries or frameworks were used on this project as only vanilla Javascript was allowed in order to develop it.

Required Libraries and Frameworks:

• materialUI (v5.4.4 +)
• material Icons (v5.4.4 +)
• node-sass (v7.0.1 +)
• react-router-dom (v6.2.2 +)
• react-toastify (v8.2.0 +)
• firebase (v9.6.9 +)
• validator (v13.7.0 +)

Installation Process From Scratch (see notes below):

Please keep in mind that, in case that you've already have installed and configured Node.js, GitHub CLI and NPM, you should then skip steps 1-5 and start from step number 6.

1. Download and install Node.js

   https://nodejs.org/en/download/

2. Download GitHub CLI

   https://cli.github.com/

3. Install GitHub CLI. On the command line (cmd for example), run the following command:

   winget install --id GitHub.cli

4. Login to your GitHub account on GitHub CLI. On the command line, run the following command:

   gh auth login

5. Download the latest version of npm. On the command line, run the following command:

   npm install -g npm

6. Clone the project on your PC. On the command line, run the following command:

   gh repo clone https://github.com/NPersivale/Proyecto-CoderhouseReactJS.git

7. Install the necessary repository dependencies. On the command line, run the following command:

   npm install

8. Start the repository. On the command line, run the following command:

   npm start

How to Use:

1. Browse through the store and filter by category (game). Select the desired product(s) and add it to the cart
2. Go to the shopping cart and review selected items.
3. Fill the required information in the form located on the right-hand side.
4. Complete the purchase by clicking the green button that's labeled with the same legend.

End User Purchase Demo:

Here's a short demo showing the normal flow a user will go through when buying an item on the site:

Project Diagram:

Below is a flowchart showing the overall structure of the project for better oversight and understanding: