/react-webshop

React App example with front and back parts. Read more in README

Primary LanguageJavaScript

Steps to run the project:

  1. Clone the main branch to your machine
  2. Run terminal and execute "npm install"
  3. Execute "npm run server"
  4. Run another terminal and execute "npm run client"
  5. Open "localhost: 3000" in browser

The project contains a necessary and sufficient stack of components and technologies:

  1. About 40 functional components created by using React
  2. Routing through the pages with react-router-dom
  3. Reactivity of components by using the base react hooks (useState, useEffect, useCallback)
  4. API requests with using the fetch interface and custom hook useRequest
  5. Linking components by Redux technology. Store, providers, reducers
  6. Controlling async login operations with Redux Saga Middleware
  7. Comfortable control of component styles with styled-components library
  8. The custom color theme provider supports availability to change the color theme inside the whole app
  9. Login, registration, item froms with custom fields created with Formik library
  10. Forms validation for login, password, email, phone number with Yup library
  11. Secure login process with Jsonwebtoken and Bcryptjs libraries
  12. The server path works with NoSQL MongoDB by Mongoose library and connect witn frontend by Express library
  13. Controllers and models support to create, edit, delete items and users
  14. Prop-types library protects against mistype errors
  15. Support for Localstorage to store temporary values ​​for unauthorized customers

Project description:

The webshop contains such components and abilities:

  1. Endless-scrollable products list with dynamic pagination
  2. Advirtisment carusel that moves in a circle every 2 seconds
  3. Search functionality to find the product by name
  4. Filtration and sorting found products by price.
  5. Catalogue to find list of products by category and type. Static pagination of the list
  6. The cart of customer with quantity icon.
  7. Sign up, sign in functionality. The cart of authorized customers is stored in the database
  8. The product page with price, description, characteriscics and the ability to add the product to the cart
  9. Tooltips display the result of requests
  10. Settings bar allows to change the color theme
  11. Adaptive design for desktop (width > 1260px), mobile (width < 361px) and tab (width < 769px)
  12. Swipping the advirtisment carusel in the mobile mode
  13. AddItem page to add new products to database
  14. Custom animated loader displayed during uploading proccesses