The e-commerce application is a platform dedicated to men's fashion, offering a wide range of stylish and trendy products. Its main purpose is to provide a convenient and engaging shopping experience for men aged 20 to 35. With a focus on the latest fashion trends, the application aims to cater specifically to this demographic, allowing them to browse, discover, and purchase high-quality clothing, accessories, and footwear.
- Live server: https://gent-style.netlify.app
- backend: https://github.com/LamNgo1911/Gent-Style-Backend
-
Introduction
-
Table of Contents
-
Getting Started
- Prerequisites
- Installation
- Setting up the Environment
-
Usage
-
Features
-
Architecture & Design
- Folder Structure
- Data Flow
- Component Structure
-
Testing
-
Deployment
-
Contributing
-
License
-
Node Js (at least version 16.18.0)
-
Git
-
Package Manager: Either npm or Yarn
- npm version: 8.4.1 or higher
- Yarn version: 1.22.10 or higher
- Git command: Git clone https://github.com/LamNgo1911/Gent-Style.git
- Navigate to the project directory: cd fs17-Frontend-project.
- Install the project dependencies: npm install or yarn install.
-
Start the development server: npm start or yarn start
-
Build the production-ready bundle: npm run build or yarn build
-
Run the tests: npm test or yarn test
-
User authentication and registration
-
Browse products, categories and, search products by product name
-
Add products to the shopping cart
-
Manage the shopping cart (remove items, update quantities)
-
Wishlist functionality
-
User profile management
-
Responsive design for mobile and desktop devices
-
Dark/Light mode switch
-
src/
- components/: Contains reusable UI components.
- pages/: Contains the main pages of the application.
- redux/: Contains Redux-related files (actions, reducers, store).
- test/: Contains reducer testing files
- styles/: Contains global styles and styling variables.
- App.tsx: The root component of the application.
- index.tsx: Entry point file.
- The application follows a Redux architecture for managing the state. Actions are dispatched from components, which trigger corresponding reducers to update the state. The updated state is then reflected in the UI using React's re-rendering mechanism.
- In the Context API, the data flow involves creating a context, providing it to components, consuming the context data, updating the data through defined functions, and triggering updates in components.
-
The components are organized based on their functionality and can be reused across different pages. The main components include:
- Header: Displays the navigation bar and user-related actions.
- ProductCard: Displays product information. It includes an image, product name, price, description
- Slider: Displays a list of products with different swiping styles, such as pagination, scrollbar or navigation.
- ImageCard: Displays multiple product images, including a main image and thumbnail views. It enables users to have different perspectives and views of a product.
- Testing libraries/frameworks: Jest, React Testing Library
- Run tests using the command npm test or yarn test.
- The tests are structured into unit tests with reducers, covering different aspects of the application.
-
To deploy the project to a server, follow these general steps:
- Set up a hosting platform (e.g., Netlify, Vercel, AWS, etc.).
- Configure the deployment settings, such as specifying the build command and environment variables.
- Connect the hosting platform to the Git repository to enable automatic deployments based on commits or pull requests.
- Trigger the deployment process, and the hosting platform will build and deploy the application.
-
Getting Started
- Prerequisites
- Installation
- Setting up the Environment
-
Usage
-
Features
-
Architecture & Design
- Folder Structure
- Data Flow
- Component Structure
-
Testing
-
Deployment
-
Contributing
-
License
-
Node Js (at least version 16.18.0)
-
Git
-
Package Manager: Either npm or Yarn
- npm version: 8.4.1 or higher
- Yarn version: 1.22.10 or higher
- Git command: Git clone https://github.com/LamNgo1911/Gent-Style.git
- Navigate to the project directory: cd fs17-Frontend-project.
- Install the project dependencies: npm install or yarn install.
-
Start the development server: npm start or yarn start
-
Build the production-ready bundle: npm run build or yarn build
-
Run the tests: npm test or yarn test
-
User authentication and registration
-
Browse products, categories and, search products by product name
-
Add products to the shopping cart
-
Manage the shopping cart (remove items, update quantities)
-
Wishlist functionality
-
User profile management
-
Responsive design for mobile and desktop devices
-
Dark/Light mode switch
-
src/
- components/: Contains reusable UI components.
- pages/: Contains the main pages of the application.
- redux/: Contains Redux-related files (actions, reducers, store).
- test/: Contains reducer testing files
- styles/: Contains global styles and styling variables.
- App.tsx: The root component of the application.
- index.tsx: Entry point file.
- The application follows a Redux architecture for managing the state. Actions are dispatched from components, which trigger corresponding reducers to update the state. The updated state is then reflected in the UI using React's re-rendering mechanism.
- In the Context API, the data flow involves creating a context, providing it to components, consuming the context data, updating the data through defined functions, and triggering updates in components.
-
The components are organized based on their functionality and can be reused across different pages. The main components include:
- Header: Displays the navigation bar and user-related actions.
- ProductCard: Displays product information. It includes an image, product name, price, description
- Slider: Displays a list of products with different swiping styles, such as pagination, scrollbar or navigation.
- ImageCard: Displays multiple product images, including a main image and thumbnail views. It enables users to have different perspectives and views of a product.
- Testing libraries/frameworks: Jest, React Testing Library
- Run tests using the command npm test or yarn test.
- The tests are structured into unit tests with reducers, covering different aspects of the application.
-
To deploy the project to a server, follow these general steps:
- Set up a hosting platform (e.g., Netlify, Vercel, AWS, etc.).
- Configure the deployment settings, such as specifying the build command and environment variables.
- Connect the hosting platform to the Git repository to enable automatic deployments based on commits or pull requests.
- Trigger the deployment process, and the hosting platform will build and deploy the application.