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:

  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-

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.

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