Front-end Project

Introduction

Welcome to the ILH Store E-commerce Application, a online shopping platform, and a front-end project by Integify Assignment. Developed using React, Redux, and Material UI, our application offers user registration and login features, along with admin functionality and advanced product filtering thunks.

Table of content

• Technologies
• Deployment
• Api Reference
• Folder Structure
• Screenshots

Technologies

Category	Libraries and Tools
Frontend Framework and Libraries	TypeScript, React, React Router, React Slick, React Hook Form
State Management	Redux Toolkit, React-Redux, Redux-persist
User Interface and Styling	Material UI, Material Icons
HTTP Requests	Axios
Form Validation	Yup
Testing	Jest, MSW (Mock Service Worker)

Deployment

Live Link : https://ilhecom.netlify.app/

Demo Admin User

"email": "admin@mail.com",
"password": "admin123"

Demo Customer User

"email": "john@mail.com",
"password": "changeme"

Api Reference

Platzi Fake Store API

https://fakeapi.platzi.com/

Usage

In the project directory, you can run:

npm install

Install all the dependencies

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

Folder Structure

├───public
│   ├───assets
│   └───projectImages
└───src
    ├───assets
    ├───components
    │   ├───AdminDataCard
    │   ├───AdminProductDetails
    │   ├───AdminSideBar
    │   ├───AuthGuards
    │   ├───Button
    │   ├───Card
    │   ├───CartCalculator
    │   ├───CartIcon
    │   ├───CartItem
    │   ├───CenterContainer
    │   ├───FilterBar
    │   │   ├───CategoryFilter
    │   │   ├───FilterByName
    │   │   └───FilterByprice
    │   ├───ImageSlider
    │   ├───Info
    │   ├───InputSearch
    │   ├───InputSelect
    │   ├───Link
    │   ├───LoginForm
    │   ├───Logo
    │   ├───Modal
    │   ├───Navbar
    │   │   ├───HamburgerMenu
    │   │   ├───NavigationBar
    │   │   └───TooltipMenu
    │   ├───NewProductForm
    │   ├───Pagination
    │   ├───ProfileComp
    │   ├───TextField
    │   └───UserRegisterForm
    ├───hooks
    ├───pages
    ├───redux
    │   ├───reducers
    │   └───thunks
    ├───test
    │   ├───data
    │   ├───reducers
    │   └───server
    ├───types
    └───validation

Features Done

• Fetch and display all and single products.
• Create at least 4 pages (products, profile, user, cart)
• Product reducer
• User reducer
• Cart reducer
• Adding and removing from the cart
• Login and authorization (admins can delete and update products)
• Routing and private pages
• Testing the reducers
• Rewrite the README, deploy the project, add the deployment link here and to the README.md
• Pagination when fetching and displaying.

Screenshots

Credits and Acknowledgements

• pIctures: https://www.pexels.com/
• video: https://asos.com