- Clone the main branch to your machine
- Run terminal and execute "npm install"
- Execute "npm run server"
- Run another terminal and execute "npm run client"
- Open "localhost: 3000" in browser
- About 40 functional components created by using React
- Routing through the pages with react-router-dom
- Reactivity of components by using the base react hooks (useState, useEffect, useCallback)
- API requests with using the fetch interface and custom hook useRequest
- Linking components by Redux technology. Store, providers, reducers
- Controlling async login operations with Redux Saga Middleware
- Comfortable control of component styles with styled-components library
- The custom color theme provider supports availability to change the color theme inside the whole app
- Login, registration, item froms with custom fields created with Formik library
- Forms validation for login, password, email, phone number with Yup library
- Secure login process with Jsonwebtoken and Bcryptjs libraries
- The server path works with NoSQL MongoDB by Mongoose library and connect witn frontend by Express library
- Controllers and models support to create, edit, delete items and users
- Prop-types library protects against mistype errors
- Support for Localstorage to store temporary values for unauthorized customers
The webshop contains such components and abilities:
- Endless-scrollable products list with dynamic pagination
- Advirtisment carusel that moves in a circle every 2 seconds
- Search functionality to find the product by name
- Filtration and sorting found products by price.
- Catalogue to find list of products by category and type. Static pagination of the list
- The cart of customer with quantity icon.
- Sign up, sign in functionality. The cart of authorized customers is stored in the database
- The product page with price, description, characteriscics and the ability to add the product to the cart
- Tooltips display the result of requests
- Settings bar allows to change the color theme
- Adaptive design for desktop (width > 1260px), mobile (width < 361px) and tab (width < 769px)
- Swipping the advirtisment carusel in the mobile mode
- AddItem page to add new products to database
- Custom animated loader displayed during uploading proccesses