Description

This is a React-based front end for a small e-commerce site. It was created with Create React App.
The application uses only functional components and hooks for managing their state.
The application uses fonts from Google Fonts as well as Font Awesome.
The graphic art for the logo and the default image is taken from Logo Sport Vectors by Vecteezy.
It uses a dummy file that mimic the response from the backend API. This file contains an object, that holds information for all product.

Its main characteristics are as follows:

1. CSS styles are custom, i.e. no CSS framework is used. SASS was used as CSS preprocessor. Most of the code is organized into separate files which are imported in corresponding component.
   There are several SASS files that are global and are imported at the top level.
2. The responsive layout was implemented by using:
   1. Flexible Box (Flexbox) layout.
      
   2. Breakpoints and Mixins
3. Navigation between different pages of the app is done using React Router. Every product in the list has its own page.
   
4. All products has more then one image. One is displayed as main and the user can select any of the other images. In case of a broken image the default one is loaded. This is done by using onError event on img tag.
   
5. The user can:
   
   1. Add product to the cart.
      The user can add a given product multiple times to the cart.
      In that case only the product's quantity is updated instead of creating new record in the cart.
      
   2. Edit the quantity of items for a given product.
      
   3. Remove given product from the cart.
      
   4. Perform Checkout action that clears the cart.
      
6. Cart state is managed by using React's Context API. On every cart change its state is updated and saved in the browser local storage.
   This also saves the cart state after page reloading.
   

TODO's

There are several that could be done with this project:

1. Replace html select menu with react-based one using unordered list or something similar
2. Convert JavaScript code to TypeScript
3. Perform some code cleaning

Run/Build

Requirements

• Git
  
• Node.js/NPM
  
• Create React App

1. Install requirements

1.1. Git

Navigate to https://git-scm.com/download/. Download and install the version for your operating system.

1.2. Node.js\NPM

Navigate to https://nodejs.org/en/. Download and install the version for your operating system. On windows this installation should come with both nodejs and npm. On some linux distributions it could install only nodejs so you will have to install npm separately.

1.3. Create React App

To install create-react-app run in terminal:

npm install -g create-react-app

Note: this will install create-react-app globally.

2. Download the project source code:

In order to download the application source code from the repository using the HTTPS-based connection with github
open your favorite console application, navigate to folder of your choice and run:

git clone https://github.com/alchemistbg/react-store.git

You could download the source code using Download ZIP option. Place the archive in a folder of your choice and extract the files there.

3. Navigate to react-store folder:

Enter the application folder by run:

cd react-store

4. Install package dependencies:

To install application dependencies before you start the app, run:

npm i

5. Starting:

To start the application in development mode, run:

npm start

This should also open new browser tab/window, that will navigate you to http://localhost:3000.
The page will reload if you make edits. You will also see any lint errors in the console.

6. Building:

In order to view the application in production mode, first you need to create production build by run:

npm run build

This creates build folder, that contains all the necessary files.
It correctly bundles React in production mode and optimizes the build for the best performance.

To start the production version locally, you will need server for serving static files.
One possible solution is using serve. To install it (globally) run:

npm install -g serve

After successful installation, start the server by using:

serve -s build

The production version is accessible at http://localhost:5000.

7. Testing:

At the moment the application has some very basic tests aimed to check components loading.
In order to run the test in the so called interactive watch mode run:

npm run test

For more information about testing see the section about running tests for more information.