The project was developed as a final project at the Integrify bootcamp. It offers core functionality for a typical E-commerce website, designed to serve as a base for selling fashion and jewelry products for Synchronize Recording Studio.
This repository contains the frontend source code for an E-commerce sample application. The project includes the implementation of a RESTful API for managing users, products, orders, carts, categories, and reviews (in the future!).
NOTE: The backend repository can be found here
Link to deployed Frontend Web UI: Frontend
Link to deployed Backend Server: Backend
- TypeScript:
^4.9.5 - React:
^18.2.0 - Node.js:
v18.14.2 - Git
- Package Manager: Either npm or Yarn
- npm:
^8.4.1 - Yarn:
^1.22.10
- npm:
- TailwindCSS:
^3.4.1
-
Open your terminal and clone the repository with the following command:
git clone https://github.com/tripplen23/synchronize-ecommerce.git
-
Navigate to the project directory:
cd fs17-Frontend-project -
Install all the packages:
npm install # or yarn -
Start the application in your local machine:
npm start # or yarn start
Mock Customer credentials:
- Email: customer1@customer.com
- Password: customer@123
Mock Admin credentials:
- Email: binh@admin.com
- Password: binh@123
└── /src
├── App.css
├── App.tsx
├── index.css
├── index.tsx
├── react-app-env.d.ts
├── reportWebVitals.ts
├── setupTests.ts
├── asset
| ├── fonts
| └── imgs
├── components
| ├── layouts
| | ├── Footer
| | ├── Header
| | └── index.tsx
| ├── reusable
| | ├── ButtonComponent
| | ├── CustomNavComponents
| | ├── GoToTopComponent
| | ├── IconComponent
| | ├── LogoComponent
| | ├── ModalComponent
| | | ├── AddingProductModalComponent.tsx
| | | ├── ModalComponent.tsx
| | | ├── UpdatingOrderModalComponent.tsx
| | | ├── UpdatingProductModalComponent.tsx
| | | └── UpdatingUserModalComponent.tsx
| | ├── ProductCardComponent
| | ├── ProfileComponent
| | | ├── OrderHistoryTable.tsx
| | | └── ProfileModal.tsx
| | ├── SpinnerComponent
| | └── TransitionEffect
├── constants
| ├── Route.ts
| └── Status.ts
├── data
├── helpers
│ └── getImageData.ts
├── hooks
│ └── useThemeSwitcher.ts
├── misc
│ ├── authType.ts
│ ├── cartType.ts
│ ├── categoryType.ts
│ ├── enum.ts
│ ├── orderType.ts
│ ├── productType.ts
│ └── userType.ts
├── pages
│ ├── AdminDashboard
| | ├── AdminOnly
| | | ├── AdminProfile.tsx
| | | ├── AdminOrder.tsx
| | | ├── AdminProduct.tsx
| | | ├── AdminProfile.tsx
| | | ├── AdminReview.tsx
| | | └── AdminUser.tsx
| | └── AdminDashboard.tsx
│ ├── Auth
| | ├── Login.tsx
| | └── Register.tsx
│ ├── Cart
| | ├── CartModal
| | | ├── CartModal.tsx
| | | ├── CartModalItem.tsx
| | | └── CartModalSummary.tsx
| | ├── Cart.tsx
| | ├── CartItem.tsx
| | ├── CartLeft.tsx
| | ├── CartRight.tsx
| | └── EmptyCart.tsx
│ ├── Catalog
│ ├── CustomerProfile
│ ├── Home
│ ├── Order
│ └── Product
├── redux
| ├── features
| | ├── auth
| | | ├── authReducer.test.ts
| | | ├── authService.ts
| | | └── authSlice.ts
| | ├── cart
| | | ├── cartService.ts
| | | └── cartSlice.ts
| | ├── category
| | | ├── categoryService.ts
| | | └── categorySlice.ts
| | ├── order
| | | ├── orderService.ts
| | | └── orderSlice.ts
| | ├── product
| | | ├── productService.ts
| | | └── productSlice.ts
| | ├── slider
| | | └── sliderSlice.tsx
| | └── user
| | | ├── userService.ts
| | | └── userSlice.ts
│ └── utils
| | ├── newAxiosConfig.ts
| | ├── hook.ts
| | └── store.ts
├── routes
│ ├── PrivateRouteProps.tsx
│ ├── ProtectedRoute.tsx
│ └── Routes.tsx
├── shared
│ └── authMSW.ts
└── style
└── toastify.css
