Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kislevlevy/teva-naot
https://github.com/kislevlevy/teva-naot
Last synced: about 4 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/kislevlevy/teva-naot
- Owner: kislevlevy
- Created: 2024-09-03T07:39:57.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-09-18T23:05:34.000Z (about 2 months ago)
- Last Synced: 2024-09-19T05:53:12.704Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 704 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Teva Naot Better Clone
## Project Overview
### Project Name
**Teva Naot Better Clone**
### Project Description
The goal of this project is to provide customers with the best shopping experience while allowing the company full control through a modern, user-friendly dashboard. The new site replaces the outdated and slow e-commerce site of the Israeli shoe brand, Teva Naot.
### Team Members
- **Kislev Levy** - Team Leader
- **Yaron Ender** - Frontend, API Integration
- **Kobi Set** - Frontend, Routing and Special Components
- **Dana Levin** - Backend, Data, Reviews and Order Routes
- **David Terabisi** - Backend, Data Aggregation, Product, User, and Auth Routes
## Technologies Used
| Frontend | Backend | External Services |
|----------|---------|-------------------|
|             |              |    |
## Frontend
### Framework and Libraries
- The entire frontend of the site is built using **Create Vite React App**.
- State management and API handling with the backend are managed using **RTK** (Redux Toolkit).
- For external API calls that are not handled by our backend, **jQuery** is used, such as auto-completing city names in addresses using the Israeli government API and handling Leaflet coordinates using the OpenWeatherMap API.
### Design and UI
- All components in the site are based on **Flowbite**, **Material UI**, and **Mantine UI** and styled with **Tailwind CSS** to improve readability and performance.
- Animation libraries include **AOS**, **loadable-image**, and **transitions-kit**.
### Map Integration
- **Leaflet** is used for the store locator in the company information section.
### Routing
- All routes are in readable Hebrew to improve user comfort and ability to share links. Restricted routes are managed by making a call to the backend to verify permissions. If access is denied, the user is redirected to the home page.
## Backend
### Server and Framework
- Built using **Node.js** and **Express**, providing all API features.
### Database
- **MongoDB Atlas** with **Mongoose** for schema design. Optimization techniques include using array data types, virtual fields, and indexes for common filters, and utilizing aggregation for complex queries.
### User Security
- Implemented using **bcrypt** for hashing passwords and **JWT** (JSON Web Tokens) for managing user sessions and permissions.
### Cybersecurity
- Middleware includes:
```javascript
app.use(cookieParser());
app.use(helmet());
const limiter = rateLimit({
max: 100,
windowMs: 3600000,
message: "Too many requests from this IP, please try again later.",
});
app.use("/api", limiter);
app.use(express.json({ limit: "10kb" }));
app.use(mongoSanitize());
app.use(xss());
```
### File and Image Handling
- Using **Multer** for handling file uploads, ensuring files are of type PNG or JPEG and resizing them to a maximum of 1MB before uploading to **Cloudinary**.
### Email Handling
- Emails are constructed in a custom HTML file and sent using **Nodemailer** and **Hostinger**.
## Payment and Order Tracking
### Payment Integration
- Orders are created to check and preserve items. PayPal is used for payment handling. Users are redirected to PayPal for payment and returned to the site with a confirmation message. In case of payment failure or cancellation, the order is canceled, and items are returned to stock.
## Dashboard
### Dashboard Features
- For employees of Teva Naot to manage products, sales stats, and orders. Customer service managers can update user information to assist customers.
### User Roles and Permissions
- Managed manually in the database, with roles including customer, employee, and admin. Customers cannot access the dashboard, employees have restricted access, and admins have full access.
### Order Management
- Shipment managers can track orders, change order statuses, search for orders by ID, and print shipping labels.
### Product Management
- Products can be edited, including colors, stock, price, and more. Real-time stock information is available.
## Deployment
### Hosting
- Backend is ready to be hosted on **Google Cloud**
in the mean time backend hosted on **Render** and frontend hosted on **Vercel**.
## Documentation Sections
### Endpoints
```
/api/v1
├── /users
│ ├── GET / - Get all users
│ ├── GET /:id - Get user by ID
│ ├── POST /login - Log in a user
│ ├── GET /logout - Log out a user
│ ├── POST /signup - Sign up a new user
│ ├── PATCH /resetPassword/:resetToken - Reset password with token
│ ├── POST /forgotPassword - Send password reset email
│ ├── PATCH /changePassword - Change current user password
│ ├── GET /getMe - Get current logged-in user info
│ ├── DELETE /disableMe - Disable current user
│ ├── PATCH /updateMe - Update current user info
│
├── /products
│ ├── GET / - Get all products
│ ├── GET /:id - Get product by ID
│ ├── POST / - Create new product
│ ├── PATCH /:id - Edit product by ID
│ ├── DELETE /:id - Delete product by ID
│ ├── GET /foru - Get products by user interest
│ ├── /colors
│ ├── GET / - Get all product colors
│ ├── GET /:id - Get product color by ID
│ ├── POST / - Create new product color
│ ├── PATCH /:id - Edit product color by ID
│ ├── DELETE /:id - Delete product color by ID
│
├── /orders
│ ├── GET / - Get all orders
│ ├── POST / - Create new order
│ ├── POST /success - Order confirmation route
│ ├── POST /failure - Order cancellation route
│ ├── PATCH /:id/changeStatus - Change order status by ID
│
├── /reviews
│ ├── POST / - Create new review
│ ├── GET /:id - Get review by product ID
│ ├── PATCH /:id - Edit review by review ID
│ ├── DELETE /:id - Delete review by review ID
│
├── /stats
│ ├── GET /profits - Get profits separated by timestamps
│ ├── GET /ordersLeft - Get aggregation of orders left to fulfill
```
### Installation and Setup
- Instructions on how to install and set up the project locally:
1. Frontend-
```bash
npm install # to install all dependecies
npm run build # to build the react app
npm run dev # to satrt dev react app
```
2. Backend-
First create .env file regardes to the format and add it to the backend folder.
```bash
npm install # to install all dependecies
npm start # to run nodemon dev app
node server.js # when running the app in production mode
```
### Code Quality and Organization
1. **Consistent Folder Structure**: The project adheres to a standardized folder structure, facilitating easy navigation and organization. This approach enhances maintainability, allowing developers to quickly locate files, debug issues efficiently, and implement changes or expansions as needed.
2. **Comprehensive Schema Validation**: All backend schema validations are mirrored in the frontend to minimize errors and reduce the likelihood of invalid requests from clients. This dual-layer validation approach ensures data integrity and improves the overall robustness of the application.
3. **Adherence to Coding Guidelines**: All coding practices follow specific guidelines designed to ensure uniformity and readability across the codebase. This consistency not only aids current developers in understanding the code but also streamlines onboarding for new team members.
4. **Extensive Code Comments**: Each code block is supplemented with meaningful comments to explain its purpose and functionality. This documentation is invaluable for future developers, providing clarity and context that facilitate quicker understanding and modification of the code.
5. **Prettier and Linting Compliance**: All files have undergone Prettier and linting processes to maintain consistency with the coding standards of other developers. This practice ensures that the code remains clean, readable, and free of common errors, fostering a collaborative and efficient development environment.
### API Documentation
- [Link to Postman Documentation](https://documenter.getpostman.com/view/32737315/2sAXqwXegQ)