🎯 Project Purpose

The main goal of this project is to apply the two years of knowledge I gained through university and personal efforts in a practical way, creating a quality software project. Without aiming for a commercial target, I aimed to showcase the software skills acquired during my educational process on a live project, potentially opening doors to job opportunities through this project.

🌐 Target Audience

This project holds value for software developers, employers, students, and potential clients. Software developers and students can learn technical skills or gain inspiration by reviewing the project. For employers, the project demonstrates my software competencies and work discipline. Potential clients can observe a user-friendly interface and performance optimizations by simulating the e-commerce experience.

🚀 User Authentication (Auth)

• Account creation with email and password.
• Quick login using Google and Facebook.
• Password reset via email.

👤 Account Management

• Account Information: Access and edit account details.
• Order Tracking: View and cancel orders through the "My Orders" menu.
• Address Management: Add, remove, and update addresses.
• Shipment Tracking: Monitor the status of shipped orders through the shipment tracking menu.

🛒 Cart Features

• Add, remove, and change quantities of products in the cart.
• Apply promotional codes.
• Select shipping type.

💳 Payment Simulation

• 4-step payment process:
  1. Address Information
  2. Payment Information
  3. Cart Confirmation
  4. Order Verification

🔧 Help & Support

• Frequently Asked Questions (FAQ)
• Privacy Policy
• Return and Exchange Policy
• Delivery Information

🔍 Search & Filter

• Quick and practical search bar.
• 8 different categories and 72 products.
• Filtering options based on the following criteria:
  • Brand
  • Price range
  • Color
  • Product star rating
  • Stock status
  • Price (ascending or descending)
  • Date added (new/old)

⭐ Popular Products

• Listing popular products with a rating of 4 stars and above on the homepage.

❤️ Favorite Products

• Add products to favorites and track them from the favorites page.

📋 Product Features

• Copy product link.
• Add products to the cart with different color options.
• Review technical details of the product.
• 2-3 simulated user reviews for each product.

🎨 Unique Designs and Content

• Project-specific slider and campaign visuals.
• Project-specific JSON file (categories, products, and user information).

📱 Device Compatibility

• Fully responsive design compatible with all devices.

🎨 Modern and Simple UX/UI

• Modern, user-friendly, and minimal interface design.

⚡ Vite

Vite is a fast and efficient build tool developed for modern web projects. It provides quick reload and build advantages during the development process and integrates seamlessly with React.

⚛️ React

React is a popular JavaScript library used for building user interfaces. In this project, dynamic and reusable components enhance and make the user experience more manageable.

🎨 Sass/SCSS

Sass/SCSS is a more powerful and organized version of CSS. It enables us to manage large-scale CSS structures more effectively by making the styles in the project more modular, readable, and maintainable.

🔑 Firebase Authentication

Firebase Authentication is a secure service used for user authentication. By integrating email/password and social login options like Google and Facebook, it allows users to log in easily.

🔥 Firebase Realtime Database

Firebase Realtime Database is a cloud-based NoSQL database that enables real-time synchronization of data. User data, products, orders, and address information are stored and managed securely and quickly.

🌐 Netlify

Netlify is a platform used for hosting and deploying the project. It provides easy integration and automated deployment processes, ensuring the project can go live quickly and be served in a secure environment.

In this project, various dependencies have been used to accelerate the development process and present features more efficiently. Below are the main dependencies used in the project along with brief descriptions:

🛠️ Project Dependencies

• @emotion/react: Allows for styling using a CSS-in-JS approach.
• @emotion/styled: Enables the creation of styled components; ideal for dynamic styles.
• @hookform/resolvers: Simplifies form validation processes when used with React Hook Form.
• @mui/icons-material: Provides icons for Material-UI.
• @mui/material: Offers modern and accessible UI components; such as forms and buttons.
• @reduxjs/toolkit: A set of tools for writing Redux applications more efficiently and simply.
• firebase: Used for authentication and database operations; provides real-time data updates.
• framer-motion: Used for animations and transition effects; enhances user experience.
• js-cookie: Used to manage user information in cookies; ideal for session and preference data.
• npm: Node.js package manager; manages dependencies.
• react: The main library for building user interfaces.
• react-credit-cards-2: Visually presents credit card information during payment processes.
• react-dom: Used to render React components into the DOM.
• react-hook-form: A lightweight and performance-focused library for managing form data.
• react-hot-toast: Provides a modern and stylish solution for user notifications.
• react-icons: A library for easily using various icons.
• react-infinite-logo-slider: Used for displaying logos in an infinite scrolling manner.
• react-lazy-load-image-component: Ensures images are loaded only when they are visible; improves performance.
• react-redux: Connects React components to Redux state management.
• react-router-dom: Manages routing for single-page applications (SPAs); facilitates page transitions.
• swiper: Creates interactive and touch-supported slider components.
• zod: Provides type safety for verifying the correctness of form data.

⚛️ Used Hooks

• useState: Used for managing dynamic data.
• useEffect: Used to intervene in the component lifecycle.
• useRef: Used to directly reference DOM elements.
• useMemo: Prevents recomputation for performance optimization.
• useCallback: Prevents the recreation of function references.
• useDebounce: Prevents unnecessary API calls on user input.
• useDiscountModal: Manages discount modals.
• useLazyImage: Ensures images are loaded only when they are visible.

1. Idea

When starting this project, my goal was to gain experience with various techniques and packages by practicing with React. I aimed to work on a project that would encompass nearly all modern web development processes. I realized that an e-commerce site requires a comprehensive state management structure, multiple route management, high performance, and optimization efforts. Additionally, since a user-friendly and simple interface needs to be compatible across different devices, I decided this project offered a valuable opportunity for extensive work.

2. Resources and Research Process

Before starting the project, I conducted thorough research on the technologies used in the industry and best practices. I analyzed the strengths of technologies like React, Redux, and Firebase. I also worked on tools that would enrich the user experience, using Material UI, Framer Motion, and other UI/UX libraries. I utilized resources such as technical articles, open-source projects, and courses.

3. Project Features

While determining the project features, I analyzed the functionalities and shortcomings of competing e-commerce platforms. In addition to fundamental requirements like a user-friendly interface, fast performance, easy navigation, and seamless payment experiences, I focused on features that would make the project unique. Among these unique values, creating a help and support page, having user-friendly steps for payment processes, and using project-specific JSON data played significant roles. The project is designed to maximize the user experience.

4. Project Storyboard and Prototyping

Before starting the project, storyboard designs were prepared. These drafts provided a clear idea of which pages and components would be included in the project, how these components would interact, and how the designs would present a visual layout. During this process, the focus was on the user journey and user experience.

5. Use of Tools and Resources

Before starting the project, I decided on the tools and technologies to be used. Technologies such as React, Redux Toolkit, Firebase, React Router, and Material UI were identified as the foundational elements of this project. Libraries like Framer Motion for animations, React Hook Form for form management, and Zod for data validation were integrated into the project. These tools offered ideal solutions to meet project goals and provide a user-friendly, performance-oriented experience.

6. Project Initiation

After determining the necessary technologies and goals, we moved on to the project initiation phase. The project structure and overall file architecture were established. During the development process, a targeted roadmap for project management was followed. A development strategy was created for each step according to the specified features and technologies.

7. Project Folder Structure

The project was organized in a modular structure. Basic folder structures such as shared, pages, schema, and routes were defined. Reusable components were created among the project components, ensuring an organized and scalable file architecture. This structure made the project more readable and manageable.

8. Breaking the Project into Phases

The project was divided into different phases for easier management. Subsections such as authentication processes, database connections, management of products and categories, form validation steps, and animation integration were defined. This approach allowed each step to be addressed independently, providing greater control during the development process.

9. Coding Process

The coding process progressed step by step in line with the established goals. Key functions were developed for each component, and the user interface was optimized for device compatibility. During this process:

• The frontend was developed and made compatible with various devices.
• Database connections and data operations were carried out using Firebase Realtime Database.
• Form validation processes were completed using React Hook Form and Zod.
• Animations were added to the project with Framer Motion, enhancing the user experience.

10. Performance and Optimization

Various optimization techniques were applied to improve the project's performance. Techniques such as lazy loading of images were used to enhance page loading speeds. Unnecessary code fragments were cleaned up based on the helpers structure and SOLID principles, resulting in a more modular architecture. The project's network performance was tested using browser Network tools, analyzing and optimizing resource consumption.

Performance Optimization Techniques

• Image Optimization: PNG and JPG image files were converted to WEBP format for faster loading, reducing file sizes by up to 87%.

• useMemo and useCallback: These hooks were used to prevent unnecessary re-renders. Component recalculation and creation only occur when necessary.

• Lazy Loading: Images were loaded using the react-lazy-load-image-component with lazy loading techniques, ensuring that only visible images are loaded when the page is first opened, enhancing loading speed.

• useDebounce: This hook was used in search operations to prevent continuous data queries from users, avoiding unnecessary fetch calls.

• Code Splitting: Using React.lazy and Suspense, components were loaded in chunks, ensuring that only necessary components are loaded initially rather than the entire page.

• Tree Shaking: This principle removes unused imports, code fragments, and whitespace from the project. As a result, only the required modules are included, leading to cleaner and more efficient code.

• Static File Caching: Static files such as CSS, JavaScript, and images were cached using hosting services like Netlify, providing faster access for users when reloading the page.

11. Security and Testing Process

For project security, environment variables were protected, and Firebase "Rules" were implemented. User data, authentication processes, and database access were secured. Bugs and issues in the project were systematically identified and resolved through extensive testing. Various test scenarios were conducted to ensure the application operates smoothly.

12. Deployment Phase

Once the development process was completed, the project was configured and deployed on Netlify. Necessary environment settings and configurations were established on Netlify to ensure the successful integration of the project into the live environment.

13. User Feedback and Maintenance Phase

After the project went live, user feedback began to be collected. Adjustments were made based on this feedback, and the project has been continuously monitored. Maintenance processes are still ongoing, with regular updates aimed at improving user experience.

• Release Date: 22.09.2024

• Last Updated: 12.10.2024 🕟 21:00

• Version: 1.0

• License: MIT License

• Supported Browsers:
  The project is compatible with popular web browsers like Chrome, Firefox, Safari, and Edge in their latest versions.

• Project Link:
  Access the project by clicking Here.

• Developer:
  The project was developed by Hamza Doğan. For more information about the developer, please visit the LinkedIn Profile.

• Feedback and Support:
  Users can provide feedback or request support by contacting [[email protected]].