Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/k0l4s/ute-shop
https://github.com/k0l4s/ute-shop
economic expressjs mern mysql reactjs shop typescript uteshop
Last synced: 6 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/k0l4s/ute-shop
- Owner: K0l4s
- Created: 2024-08-20T13:06:42.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-12-29T15:28:09.000Z (9 days ago)
- Last Synced: 2024-12-29T16:22:57.334Z (9 days ago)
- Topics: economic, expressjs, mern, mysql, reactjs, shop, typescript, uteshop
- Language: TypeScript
- Homepage: https://uteshop.vercel.app/
- Size: 5.85 MB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://github.com/k0l4s) |
| 21110314 | Ngô Minh Thuận | Full-stack Developer| [Github](https://github.com/nauht1) |
| 21110300 | Nguyễn Thế Thành | Full-stack Developer| [Github](https://github.com/thanhnt932) |
## 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:
```bash
git clone https://github.com/K0l4s/ute-shop.git
cd ute-shop
```
#### 2. Front end Setup
##### 2.1. Direct to frontend folder
```bash
cd front-end
```
##### 2.2. Install package
```bash
npm install
```
##### 2.3. Run code
```bash
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
```bash
cd back-end
```
##### 3.2. Install package
```bash
npm install
```
##### 3.3. Run code
```bash
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](https://github.com/K0l4s/ute-shop/wiki)