- About
- Features
- Website Pages
- Structure
- Deployed Website Link
Create an e-commerce website using https://fakeapi.platzi.com/
- Fetch all/single products.
- Sort products by price and title.
- Update/delete products.
- User login/logout and register.
- Update User profile.
- Add product to cart and remove product from cart.
- Includes feature to switch between dark/light themes.
- Testing unit for the reducers.
- Responsive for small display (designed for both laptop and mobile display (400 x 600)).
/: displays general information/products: includes all products and allow user to search and sort products/products/:id: contain information on a single product and has features that allowadminsto delete or edit that specific product. The delete and edit features are not displayed tocustomers./cart: allow users to view products added to the cart. Users can edit the count or remove product from there./signinand/signout: allow users to login in or register a new account./createproduct: allow any user to create a new product "even Guest users for now"./profile: view user profile. This route can only be accessed when user is logged in./*: Not found page
├───public
│ clothes.jpg
│ electronics.jpg
│ favicon.ico
│ furniture.jpg
│ index.html
│ laptop.jpg
│ Logo.png
│ manifest.json
│ razor.jpg
│ robots.txt
│ shoes.jpg
│
└───src
│ App.tsx
│ index.tsx
│ react-app-env.d.ts
│
├───features
│ drawerComp.tsx
│
├───Images
│ black-wallpaper.jpg
│ login.png
│ Logo.png
│ white-wallpaper.jpg
│
├───Pages
│ │ home.tsx
│ │ notfound.tsx
│ │ routes.tsx
│ │ utils.ts
│ │
│ ├───cart
│ │ Cart.tsx
│ │
│ ├───product
│ │ createproduct.tsx
│ │ product.tsx
│ │ productEditForm.tsx
│ │ products.tsx
│ │ product_info.tsx
│ │ product_utils.ts
│ │
│ ├───slider
│ │ slider.scss
│ │ slider.tsx
│ │
│ └───userlog
│ login.tsx
│ profilePage.tsx
│ protectedroutes.tsx
│ register.tsx
│
├───redux
│ │ store.ts
│ │
│ └───reducers
│ cartReducer.ts
│ productReducer.ts
│ themeModeReducer.ts
│ userReducer.ts
│
├───reduxhook
│ hooks.ts
│
├───routes
│ routes.tsx
│
├───Styles
│ app.scss
│
├───test
│ ├───reducers
│ │ cartReducer.test.ts
│ │ productReducer.test.ts
│ │ userReducer.test.ts
│ │
│ └───shared
│ server.ts
│
├───Themes
│ badgeTheme.ts
│ darkTheme.ts
│ gridTheme.ts
│ lightTheme.ts
│
└───Types
product.ts
routes.ts
user.ts
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent