UTE SHOP

UTE Shop is an e-commerce website specializing in selling economics books, offering users an intuitive shopping experience and a rich collection of resources.

Collobrations

Size: 3 Members

Student ID	Fullname	Role	Contact
21110223	Huỳnh Trung Kiên	Full-stack Developer	Github
21110314	Ngô Minh Thuận	Full-stack Developer	Github
21110300	Nguyễn Thế Thành	Full-stack Developer	Github

Task Assignment

ID	Task	Member
1	Setup Project	Huỳnh Trung Kiên Ngô Minh Thuận
2

Key Features

• User-Friendly Interface:
  Designed with a clean layout and responsive design for seamless navigation across devices.
• Comprehensive Book Database:
  Includes details such as titles, authors, genres, publication year, pricing, and stock availability.
• Dynamic Search and Filters:
  Enables users to search by keywords and filter by categories, price range, or popularity.
• Shopping Cart and Checkout:
  Simplifies the purchasing process with secure payment integration.
• Admin Dashboard:
  Allows administrators to manage books, orders, and user data efficiently.

Technologies Used

• Frontend: ReactJS, TypeScript, Tailwind CSS
• Backend: ExpressJS
• Additional Tools: Vite.js, Git for version control

Order Flow

Installation and Setup

Follow these steps to run the project locally:

Prerequisites

• Node.js (v16 or higher)
• Git

Steps

1. Clone the repository:

git clone https://github.com/K0l4s/ute-shop.git  
cd ute-shop

2. Front end Setup

2.1. Direct to frontend folder

cd front-end

2.2. Install package

npm install

2.3. Run code

npm run dev

2.3. Open the application in your browser

Access http://localhost:3000

3. Back end setup

3.1. Direct to backend folder

cd back-end

3.2. Install package

npm install

3.3. Run code

npm start

Folder Structures

1. Backend

2. Frontend

This document explains the structure of the frontend project and describes the purpose of each folder within the /src directory.

/components

This folder contains reusable React components that can be used throughout the application.
Examples include buttons, input fields, modals, and other UI elements.

/pages

This folder includes components representing different pages of the website.
Each file corresponds to a specific route in the application, such as the home page, about page, or contact page.

/assets

Static assets like images, icons, and other media files are stored here.
This ensures that all static resources are organized and easily accessible.

/utils

Contains utility functions and constants that are used across the application.
Examples include helper functions for formatting dates, calculating values, or handling API requests.

---

How to Use This Structure

1. Place reusable UI components in /components to keep the code modular.
2. Create a new file in /pages for each unique route or page in your application.
3. Store all static assets in /assets to maintain consistency.
4. Add shared logic and constants to /utils for easier management and reuse.

Feel free to extend the structure as needed for your project requirements.

More