Fullstack E-commerce Frontend

This is a frontend part of Fullstack project at Intergify 2024.
This fronted provides nice UI/UX design according to the data from the backend to simulate E-commerce web site.

Basically try to mimic the E-commerce site and make the site fully functional both frontend and backend side in my own way.
Simulate the way of Payment, Mailing, Hosting Images, Authenticate, Google account login etc.

I enjoyed the project with full of joy and also with lots of obstacles, but really had fun!

Check out the result here
Frontend: https://cool-awsome-shopping.netlify.app
Backend: https://fs17-fullstack.onrender.com/api/v1/products

Table of Contents

• Introduction
• Table of Contents
• Getting Started
  • Prerequisites
  • Clone the project
  • Set environment variables
  • Install and run
  • Navgiate
• Usage
  • Scripts
  • Features
  • Architecture and Design
  • Testing
  • Deployment

Getting Started

Prerequisites

• node ^19.2.0
• npm ^9.2.0

Make sure you have npm installed globally.

1.Clone the project:

$ git clone https://github.com/Woongsik/fullstack-e-commerce-frontend.git
$ cd fullstack-e-commerce-frontend

2. Set envrionment variables

Check the .envExample file and set variables into .env
!Important This should be done to run the the app

3.Install and run:

$ npm install   # Install project dependencies
$ npm start     # Compile and launch on local environment

4. Navigate to http://localhost:3000

Usage:

Scripts

In the package.json, below scripts are used.
Since msw doesn't support axios, additional scripts required for test (For the testing purpose, use fetch for mocking server), otherwise axios is used.
When running test scripts, NODE_ENV will be set to test and it will use fetch automatically

   "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "NODE_ENV=test react-scripts test --transformIgnorePatterns \"node_modules/(?!@toolz/allow-react)/\" --env=jsdom",
      "eject": "react-scripts eject"
   },

Features

• Sending queries to server for filtering

  • Find all products: (GET) http:localhost:8080/api/v1/products
    • pagination: ?offset=0&limit=10
  • Find a product:
    • base url: (GET) http:localhost:8080/api/v1/products
      • by title: /?title=Generic
      • by price range: /?price_min=900&price_max=1000
      • by category: /?category=1
      • by joinning filters: /?title=shoes&price_min=900&price_max=1000&category=1
  • Find all categories: (GET) http:localhost:8080/api/v1/categories

• Upload image: (POST) http:localhost:8080/api/v1/files/upload

  # Body
  {
     "file": "<Binary File>"
  }

• Validations with React-hook-form

• Style with Material UI

• JWT for session: (GET) http:localhost:8080/api/v1/users/session

   # Headers
   {
      "Authorization": "Bearer {your access token}"
   }

Screenshots or GIFs

Architecture & Design:

  src
  ┣ assets
  ┃ ┗ images
  ┃ ┃ ┣ Screenshot_Admin_banUser.png
  ┃ ┃ ┣ Screenshot_Admin_products.png
  ┃ ┃ ┣ Screenshot_Detail.png
  ┃ ┃ ┣ Screenshot_Email.png
  ┃ ┃ ┣ Screenshot_Filter.png
  ┃ ┃ ┣ Screenshot_Home.png
  ┃ ┃ ┣ Screenshot_Orders.png
  ┃ ┃ ┣ Screenshot_Payment.png
  ┃ ┃ ┗ Screenshot_Test.png
  ┣ components
  ┃ ┣ cart
  ┃ ┃ ┣ cartFavoriteCard.tsx
  ┃ ┃ ┃ ┗ CartFavoriteCard.tsx
  ┃ ┃ ┣ cartItemCard
  ┃ ┃ ┃ ┗ CartItemCard.tsx
  ┃ ┃ ┗ cartSummary
  ┃ ┃ ┃ ┗ CartSummary.tsx
  ┃ ┣ contextAPI
  ┃ ┃ ┣ footer
  ┃ ┃ ┃ ┗ Footer.tsx
  ┃ ┃ ┣ navbar
  ┃ ┃ ┃ ┗ Navbar.tsx
  ┃ ┃ ┗ ThemeContext.tsx
  ┃ ┣ product
  ┃ ┃ ┣ productCard
  ┃ ┃ ┃ ┗ ProductCard.tsx
  ┃ ┃ ┗ productList
  ┃ ┃ ┃ ┗ ProductList.tsx
  ┃ ┣ profile
  ┃ ┃ ┣ profileContent
  ┃ ┃ ┃ ┗ ProfileContent.tsx
  ┃ ┃ ┗ profileMenu
  ┃ ┃ ┃ ┣ adminMenu
  ┃ ┃ ┃ ┃ ┣ categories
  ┃ ┃ ┃ ┃ ┃ ┣ addCategory
  ┃ ┃ ┃ ┃ ┃ ┃ ┗ AddCategory.tsx
  ┃ ┃ ┃ ┃ ┃ ┣ allCategories
  ┃ ┃ ┃ ┃ ┃ ┃ ┣ categoryDetail
  ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ CategoryDetailsRow.tsx
  ┃ ┃ ┃ ┃ ┃ ┃ ┗ AllCategories.tsx
  ┃ ┃ ┃ ┃ ┃ ┗ Categories.tsx
  ┃ ┃ ┃ ┃ ┣ products
  ┃ ┃ ┃ ┃ ┃ ┣ addProduct
  ┃ ┃ ┃ ┃ ┃ ┃ ┗ AddProduct.tsx
  ┃ ┃ ┃ ┃ ┃ ┣ allProducts
  ┃ ┃ ┃ ┃ ┃ ┃ ┣ productDetail
  ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ ProductDetailsRow.tsx
  ┃ ┃ ┃ ┃ ┃ ┃ ┗ AllProducts.tsx
  ┃ ┃ ┃ ┃ ┃ ┗ Products.tsx
  ┃ ┃ ┃ ┃ ┗ users
  ┃ ┃ ┃ ┃ ┃ ┣ userDetail
  ┃ ┃ ┃ ┃ ┃ ┃ ┗ UserDetails.tsx
  ┃ ┃ ┃ ┃ ┃ ┗ Users.tsx
  ┃ ┃ ┃ ┣ userMenu
  ┃ ┃ ┃ ┃ ┣ account
  ┃ ┃ ┃ ┃ ┃ ┗ Account.tsx
  ┃ ┃ ┃ ┃ ┣ orders
  ┃ ┃ ┃ ┃ ┃ ┣ OrderDetailRow.tsx
  ┃ ┃ ┃ ┃ ┃ ┗ Orders.tsx
  ┃ ┃ ┃ ┃ ┗ password
  ┃ ┃ ┃ ┃ ┃ ┗ Password.tsx
  ┃ ┃ ┃ ┗ ProfileMenu.tsx
  ┃ ┣ ui
  ┃ ┃ ┣ button
  ┃ ┃ ┃ ┣ SizeButtons
  ┃ ┃ ┃ ┃ ┗ SizeButtons.tsx
  ┃ ┃ ┃ ┣ SortButton
  ┃ ┃ ┃ ┃ ┗ SortButton.tsx
  ┃ ┃ ┃ ┣ UiButton.tsx
  ┃ ┃ ┃ ┗ UiRoundButton.tsx
  ┃ ┃ ┣ carousel
  ┃ ┃ ┃ ┣ UiCarousel.css
  ┃ ┃ ┃ ┗ UiCarousel.tsx
  ┃ ┃ ┣ cateogriesSelector
  ┃ ┃ ┃ ┗ CategoriesSelector.tsx
  ┃ ┃ ┣ dialog
  ┃ ┃ ┃ ┣ PaymentDialog.tsx
  ┃ ┃ ┃ ┗ UiDialog.tsx
  ┃ ┃ ┣ fileUploader
  ┃ ┃ ┃ ┗ FileUploader.tsx
  ┃ ┃ ┣ filter
  ┃ ┃ ┃ ┣ filterDrawer
  ┃ ┃ ┃ ┃ ┗ FilterDrawer.tsx
  ┃ ┃ ┃ ┗ filterIndicator
  ┃ ┃ ┃ ┃ ┗ FilterIndicator.tsx
  ┃ ┃ ┣ form
  ┃ ┃ ┃ ┗ UiFormSelects.tsx
  ┃ ┃ ┣ googleLogin
  ┃ ┃ ┃ ┗ GoogleLogin.tsx
  ┃ ┃ ┣ helperText
  ┃ ┃ ┃ ┗ HelperText.tsx
  ┃ ┃ ┣ image
  ┃ ┃ ┃ ┣ UiBrokenImage.tsx
  ┃ ┃ ┃ ┣ UiImage.tsx
  ┃ ┃ ┃ ┣ UiNoImage.tsx
  ┃ ┃ ┃ ┗ UiThumb.tsx
  ┃ ┃ ┣ layout
  ┃ ┃ ┃ ┣ CenteredContainer.tsx
  ┃ ┃ ┃ ┗ GridContainer.tsx
  ┃ ┃ ┣ loading
  ┃ ┃ ┃ ┗ LoadingBackdrop.tsx
  ┃ ┃ ┣ loadingAndMessage
  ┃ ┃ ┃ ┗ LoadingAndMessage.tsx
  ┃ ┃ ┣ pageCounter
  ┃ ┃ ┃ ┗ PageCounter.tsx
  ┃ ┃ ┣ pageNavigation
  ┃ ┃ ┃ ┗ PageNavigation.tsx
  ┃ ┃ ┣ paymentCheckout
  ┃ ┃ ┃ ┗ PaymentCheckout.tsx
  ┃ ┃ ┣ priceRangeSlider
  ┃ ┃ ┃ ┗ PriceRangeSlider.tsx
  ┃ ┃ ┣ scrollToTop
  ┃ ┃ ┃ ┗ ScrollToTop.tsx
  ┃ ┃ ┣ searchInput
  ┃ ┃ ┃ ┗ SearchInput.tsx
  ┃ ┃ ┣ sizes
  ┃ ┃ ┃ ┗ Sizes.tsx
  ┃ ┃ ┣ snackbar
  ┃ ┃ ┃ ┗ UiSnackbar.tsx
  ┃ ┃ ┗ sortSelects
  ┃ ┃ ┃ ┗ SortSelects.tsx
  ┃ ┗ .DS_Store
  ┣ hooks
  ┃ ┗ useUserSession.ts
  ┣ misc
  ┃ ┣ types
  ┃ ┃ ┣ Address.ts
  ┃ ┃ ┣ CartItem.ts
  ┃ ┃ ┣ Category.ts
  ┃ ┃ ┣ Filter.ts
  ┃ ┃ ┣ Forms.ts
  ┃ ┃ ┣ MUI.ts
  ┃ ┃ ┣ Order.ts
  ┃ ┃ ┣ Product.ts
  ┃ ┃ ┣ Size.ts
  ┃ ┃ ┣ Sort.ts
  ┃ ┃ ┣ StripeSecret.ts
  ┃ ┃ ┣ UploadedImage.ts
  ┃ ┃ ┗ User.ts
  ┃ ┗ utils
  ┃ ┃ ┣ DateUtil.ts
  ┃ ┃ ┗ Urls.ts
  ┣ pages
  ┃ ┣ cart
  ┃ ┃ ┗ Cart.tsx
  ┃ ┣ forgetPassword
  ┃ ┃ ┗ ForgetPassword.tsx
  ┃ ┣ home
  ┃ ┃ ┗ Home.tsx
  ┃ ┣ login
  ┃ ┃ ┗ Login.tsx
  ┃ ┣ prodcutDetail
  ┃ ┃ ┗ ProductDetail.tsx
  ┃ ┗ profile
  ┃ ┃ ┗ Profile.tsx
  ┣ redux
  ┃ ┣ slices
  ┃ ┃ ┣ CartSlice.ts
  ┃ ┃ ┣ CategorySlice.ts
  ┃ ┃ ┣ ProductSlice.ts
  ┃ ┃ ┗ UserSlice.ts
  ┃ ┣ utils
  ┃ ┃ ┣ CartSliceUtil.ts
  ┃ ┃ ┣ LocalStrorageUtil.ts
  ┃ ┃ ┗ ProductSliceUtils.ts
  ┃ ┗ store.ts
  ┣ services
  ┃ ┗ APIService.ts
  ┣ test
  ┃ ┣ redux
  ┃ ┃ ┣ CartReducer.test.ts
  ┃ ┃ ┣ CategoryReducer.test.ts
  ┃ ┃ ┣ ProductReducer.test.ts
  ┃ ┃ ┗ UserReducer.test.ts
  ┃ ┗ shared
  ┃ ┃ ┣ CategoryServer.ts
  ┃ ┃ ┣ ProductServer.ts
  ┃ ┃ ┣ ServerUtil.ts
  ┃ ┃ ┗ UserServer.ts
  ┣ .DS_Store
  ┣ App.tsx
  ┣ index.css
  ┣ index.tsx
  ┣ logo.svg
  ┣ react-app-env.d.ts
  ┣ reportWebVitals.ts
  ┗ setupTests.ts 

Testing:

Testing is done by jest and msw. Since msw is not supporting axios, fetch used for testing.
In the script, NODE_ENV will set to 'test' automatically and it will run tests with fetch

All the reducers are tested (productSlice, userSlice, cartSlice, categorySlice)
Total 33 tests runs and passed in 4 test suites.

Testing code src/test/redux
Testing server src/test/shared

   $ npm test   # Testing reducers

Deployment:

One of most popular deployment tool, Netlify used.
Continuous integration for potential fixes and improvements.