Bessawy / E-commerce-Project

Front-End E-commerce Project

Content

• About
• Features
• Website Pages
• Structure
• Deployed Website Link

About

Create an e-commerce website using https://fakeapi.platzi.com/

Features

• 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)).

Website Pages

• /: 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 allow admins to delete or edit that specific product. The delete and edit features are not displayed to customers.
• /cart: allow users to view products added to the cart. Users can edit the count or remove product from there.
• /signin and /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

Structure

├───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

Deloyed Link

https://frontend-project-bessawy.vercel.app