buyTheWay

⚠️ Note: This project is currently under development. Some sections and functionalities are still in progress.

Introduction

"buyTheWay" is a modern e-commerce application that enables users to shop quickly and efficiently. With a user-friendly design and intuitive features, it makes everyday shopping easier.

Design

You can view the UI design I created in Figma at the following link: buyTheWay Figma Design

Features

• Shopping Experience

  • Users can save desired products to a wishlist and later add them to or remove them from the cart.
  • Users can view recently viewed products.
  • Users are suggested similar products from the same category and gender when available.
  • Users can quickly browse products through the mobile menu.
  • Users can filter products by categories, price, size, etc.
  • Users can search for products.

• User Management:

  • Users can register and log in with a secure password.
  • Authentication is implemented using JWT (JSON Web Token).

• Profile Management:

  • Users can manage their profiles, update information, and save their favorites.

• Customer Support:

  • Users can interact with a chat support system powered by ChatGPT.

Technologies

• Frontend: React
• Backend: Node.js, Express
• Database: MySQL
• State Management: Redux Toolkit
• Styling: Tailwind CSS
• API Type: RESTful API
• Design Tools: Figma
• AI: Powered by OpenAI's GPT technology.

Client-Side Routing

• The application uses React Router to enable fast and user-friendly navigation.

Performance Optimization

• Lazy Loading: Components and resources are loaded as needed to minimize load times.

SEO and Accessibility

• Lighthouse Score: The application is optimized for SEO, performance, and accessibility.
• Semantic HTML: For better user experience and accessibility.

Testing and Code Quality

• Unit Tests: Jest for test coverage. 🚧
• Code Style: ESLint and Prettier for consistency.
• Version Control: Git with a clear branching strategy.

Security

• Proxy Server: All API requests are routed through a proxy server before reaching the API server, keeping the direct API address hidden for additional security.
• Data Encryption: Sensitive data such as passwords and authentication tokens are encrypted during transmission and in the database.
• CORS Policies: Strict Cross-Origin Resource Sharing (CORS) policies are implemented to prevent unauthorized requests.

Installation

Frontend

1. Clone the repository:

   git clone [email protected]:barisbalcimusic/buyTheWay-frontend.git

   or

   git clone https://github.com/barisbalcimusic/buyTheWay-frontend.git

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

Backend

1. Clone the repository:

   git clone [email protected]:barisbalcimusic/buyTheWay-backend.git

   or

   git clone https://github.com/barisbalcimusic/buyTheWay-backend.git

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

Proxy Server

1. Clone the repository:

   git clone [email protected]:barisbalcimusic/buyTheWay-proxyServer.git

   or

   git clone https://github.com/barisbalcimusic/buyTheWay-proxyServer.git

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

Demo and Screenshots

buyTheWay Live Demo