eCommerce Application 🛍️🌐

Welcome to our eCommerce application! This platform replicates real-world shopping experiences in a digital environment 🏪. It's a comprehensive online shopping portal that provides an interactive and seamless experience to users. From product discovery to checkout, the application ensures a smooth journey for the user, enhancing their engagement and boosting their purchasing confidence 🚀.

Users can browse through a vast range of products 📚👗👟, view detailed descriptions, add their favorite items to the basket 🛒, and proceed to checkout 💳. It includes features such as user registration and login 📝🔐, product search 🔍, product categorization, and sorting to make the shopping experience more streamlined and convenient.

An important aspect of our application is that it's responsive 📲, ensuring it looks great on various devices with a minimum resolution of 390px. This feature makes the shopping experience enjoyable, irrespective of the device users prefer.

Key pages in the application include:

• Login and Registration pages 🖥️
• Main page 🏠
• Catalog Product page 📋
• Detailed Product page 🔎
• User Profile page 👤
• Basket page 🛒
• About Us page 🙋‍♂️🙋‍♀️

The application is powered by CommerceTools 🌐, a leading provider of commerce solutions for B2C and B2B enterprises. CommerceTools offers a cloud-native, microservices-based commerce platform that enables brands to create unique and engaging digital commerce experiences.

The application is to be developed in teams of three 👨‍💻👩‍💻👨‍💻. Don't forget to register your team on the RS School App via this link before you start working on the project.

Task Submission to Mentor and Cross-Check Rules

1. For the mentor review, each team member will submit their work individually. This means that each member is responsible for demonstrating their individual contributions to the project.

2. For the cross-check review, only the team lead will submit. The team lead will be responsible for consolidating the contributions of the team into a single submission.

Technology Stack 💻📚

The decision on whether to use a framework for the project lies in the hands of the teams. They have the option to proceed without a framework or, alternatively, they can opt for well-known ones like React ⚛️, Angular 🅰️, or Vue 🟢.

However, there are some constraints on the technology stack:

1. TypeScript is mandatory for this project. It will ensure type safety and improve the maintainability and scalability of the application 📘.
2. jQuery is not allowed. Focus on using modern JavaScript features and APIs, and the capabilities of your chosen framework, rather than relying on jQuery 🚫.
3. The application is a Single Page Application (SPA) with an empty index.html 🗂️.
4. Using pre-built eCommerce templates for the frontend is not allowed. While pre-built templates are off-limits, feel free to draw inspiration from existing designs for your unique user interface. 🚫💻🎨
5. Using data from commercetools-sunrise-data is not allowed. Your application should have its own unique data set to enhance uniqueness and provide a novel user experience. This rule is to encourage creativity and realism in your eCommerce application. 🚫📊💡

Sprint Overviews 🏁📅

Sprint 1 - Project Setup and CommerceTools Integration 🚀🔧

In the first sprint, the team will lay down the project's foundation. This includes setting up the repository, organizing the task board, integrating with CommerceTools to establish the API client, and configuring the development environment. Key technologies used in this sprint include TypeScript, ESLint, Prettier, Husky, and Jest or Vitest for testing.

Sprint 2 - Login, Registration, and Main Pages Implementation 🔐🖥️

The second sprint will focus on building the application's main pages. This includes implementing the login and registration features, managing user authentication state, saving the authentication token, and setting up navigation between pages. Input validation and integration with an authentication service are also critical aspects of this sprint.

Sprint 3 - Catalog Product, Detailed Product, and User Profile Pages Implementation 📚🔍👥

The third sprint will focus on enhancing the user interface and experience. The team will work on implementing the Catalog Product, Detailed Product, and User Profile pages. Features like fetching and displaying products, filtering and sorting, designing product cards, and displaying user's personal information are the key tasks in this sprint.

Sprint 4 - Detailed Product Page Enhancement, Basket Page, Catalog Page Enhancement, and About Us Page Implementation 🛍️📊🙋‍♂️🙋‍♀️

The fourth sprint will focus on improving the Detailed Product page, building the Basket page, enhancing the Catalog page, and implementing the About Us page. This includes enhancing the product view, adding basket functionality, integrating the shopping cart with the product catalog, and providing a comprehensive introduction to the development team. This sprint also focuses on performance optimization to handle a large number of products efficiently.

Key Pages

1. Login Page 🖥️🔐
   The Login page is the user's entry point to the application. It will have fields for entering the username and password. There will be validation checks in place to ensure that all fields are filled before allowing the user to submit the form. On successful login, the user will be directed to the main page of the application.

2. Registration Page 🖥️📝
   The Registration page will allow new users to sign up for the application. It will have fields for entering user information including a username, email, and password. Once the user submits the form after entering all the necessary details, they will be registered and directed to the login page.

3. Main Page 🏠
   The Main Page provides links to all other essential pages, such as the Catalog Product Page, Detailed Product Page, User Profile Page, Basket Page, and About Us Page. Each link should accurately redirect the user to the corresponding page without any errors. In addition, the Main Page can display any other useful information that the team considers beneficial for the user, such as active promo codes, news, updates, or special offers.

4. Catalog Product Page 📋
   The Catalog Product page will display a list of products in a specific category. The products will be displayed as interactive cards with a picture and essential details about the product. Users can click on these cards to get more detailed information about the product.

5. Detailed Product Page 🔎
   The Detailed Product page is where the user can view detailed information about a specific product. It will display an image of the product, a detailed description, the price, and the available options for the product. Users will be able to add the product to their basket from this page.

6. User Profile Page 👤
   The User Profile page will display the personal information of the user. This includes their name, date of birth, and a list of their addresses. This page will also provide an interface for users to edit their personal details and addresses.

7. Basket Page 🛒
   The Basket page is where users can view the products they have added to their basket. They can increase or decrease the quantity of each item or remove items from the basket. The page will also display the subtotal and total prices and provide an option for the users to proceed to the checkout page.

8. About Us Page 🙋‍♂️🙋‍♀️
   The About Us page will give a brief introduction to the development team. It will highlight each member's contributions to the project and provide personal details such as names, roles, short bios, relevant photos, and GitHub profile links. The page will also feature and link the RS School logo, allowing users to learn more about the educational program.

Good luck and happy coding! 👩‍💻👨‍💻🚀