makaevaelena / ecommerce-application Goto Github PK

Issue RSS-ECOMM-2_19: Implement Direct Navigation Links to Main, Login, and Registration Pages for Unauthorized Users (15 points) 🚀
Description
Implement direct navigation for unauthorized users to the main, login, and registration pages. This means that users should be able to access these pages directly by typing the respective URLs into the address bar of their web browser, without needing to navigate through other pages of the application first. Ensure these direct access links are working properly and take users to the correct pages. 🔗

Acceptance Criteria
Users can directly access the main page by typing its URL into the browser's address bar. 🏠
Users can directly access the login page by typing its URL into the browser's address bar. 🔒
Users can directly access the registration page by typing its URL into the browser's address bar. 📝
Direct access to these pages does not cause any errors or issues with the application's functionality. ✔️
Navigation using the implemented routing is smooth, without page refreshes (when applicable, e.g., in a Single Page Application). ⚙️
Navigational features of the browser (such as the back and forward buttons) work correctly after using these direct access links. 🔄
Webinar Resources:

RS School 2023Q1 Classes, SPA. Part 1.
RS School 2023Q1 Classes, SPA. Part 2.
As Willie Nelson puts it, "On the road again, I just can't wait to get on the road again." Let's make sure our users are always ready and eager to get 'on the road' to our application's pages with perfect direct navigation! 🎵🛣️

Issue RSS-ECOMM-1_04: Set up project task board (6 points) 📋
Description 📝
Create a project task board using a project management tool (e.g., Trello or Jira), organizing tasks into lists or columns corresponding to their status (e.g., To Do, In Progress, Done). This task board will be the main reference for the team's progress and will help everyone stay up to date on the project's status. 🔄

Acceptance Criteria 📚
A task board is created using a project management tool (e.g., Trello or Jira). 🧩
The task board has lists or columns for various task statuses (e.g., To Do, In Progress, Done). 🗂️
Relevant project tasks are added to the task board. ➕

Issue RSS-ECOMM-2_11: Integrate the registration form with a chosen authentication service (10 points) 🔒
Description
Integrate the registration form with a chosen authentication service, such as commercetools, to handle user registration. Ensure that the registration process is secure and follows best practices for handling user information. In the case of commercetools, you can refer to their API documentation for customer registration here: commercetools API - Create/Sign up Customer. 🌐

Upon successful account creation, display a success message to the user, informing them that their account has been created. The message should be clear, concise, and visually accessible. 🎉

You can check the successful creation of a customer using the browser's DevTools Network tab. When a customer is successfully created, you will see a response like the one documented here: Customer Created Message. 🧑‍💻

Acceptance Criteria
Successful user registration with the chosen authentication service 👏
Proper submission of user information to the authentication service backend 📨
A success message is displayed to the user upon successful account creation 🥳
Verification of successful customer creation using the browser's DevTools Network tab 🕵️‍♀️
And as the rock band Scorpions would put it, let's "Take me to the magic of the moment, on a glory night" as we successfully integrate this registration form! 🤘🎵

Issue RSS-ECOMM-1_11: Configure Prettier (5 points) 🎨
Description 📝
Configure Prettier to automatically format code, ensuring a consistent and readable code style. 📚

Acceptance Criteria 📚
Prettier is configured and integrated into the project. ✔️
The project has a consistent and readable code style, thanks to Prettier's automatic formatting. 🖊️

Issue RSS-ECOMM-1_20: Add setup instructions to README (4 points) 💻
Description 🗂️
Provide detailed instructions for setting up and running the project locally in the README file. This will help newcomers and contributors get started quickly with setting up the project on their own machines. 🏃‍♀️👨‍💻

Acceptance Criteria 🎯
Step-by-step instructions for setting up and running the project locally are available in the README file. 🚀✅
Instructions are clear and easy to follow. 📖👍

Issue RSS-ECOMM-2_10: Display clear error messages for invalid inputs in the registration form (20 points) ⛔️
Description
Display clear and user-friendly error messages indicating any validation issues, such as an improperly formatted email address, a weak password, or incomplete address information. Make sure that error messages are shown next to the corresponding input fields and have an accessible design for users.

UI suggestions for highlighting errors (not all methods are required; you can choose the most suitable ones for your design):

Use colors to indicate errors: Display error messages in a contrasting color, such as red, to make them easily visible and distinguishable from the input text.
Icon indicators: Show an error or warning icon next to the input field with the validation issue.
Border styling: Change the border color or style of the input field to signify a validation error.
Tooltips or popovers: Show tooltips or popovers on hovering or focusing the input field with validation issues that provide more details on the error.
Acceptance Criteria 🚦
Error messages are displayed for each invalid input in the registration form
Error messages are clear, concise, and visually accessible
Selected UI elements are used effectively to highlight validation errors and improve user experience
And as AC/DC would put it: "I hit the sack, I've been too long I'm glad to be back." Well, we're not glad to see errors come back, so let's stop them in their tracks! 🎸🤘

Issue RSS-ECOMM-2_01: Implement client-side validation for login form (20 points) 🎯
Description
Implement client-side validation for the login form, including email 📧 and password 🔑 fields. Ensure that input validation checks are performed in real-time when the user enters their information.

Email Validation Rules 📏
Email address must be properly formatted (e.g., [email protected]).
Email address must not contain leading or trailing whitespace.
Email address must contain a domain name (e.g., example.com).
Email address must contain an '@' symbol separating local part and domain name.
Password Validation Rules 📏
Password must be at least 8 characters long.
Password must contain at least one uppercase letter (A-Z).
Password must contain at least one lowercase letter (a-z).
Password must contain at least one digit (0-9).
(Optional) Password must contain at least one special character (e.g., !@#$%^&*).
Password must not contain leading or trailing whitespace.
Show/Hide Password Functionality 👁️‍🗨️
Provide a button or a checkbox to allow users to toggle the visibility of their password.
When this option is activated, users should be able to see their password in plaintext.
When this option is deactivated, the password should be replaced with asterisks or bullet points.
Acceptance Criteria ✅
Email field validation checks for a properly formatted email address according to the specified rules.
Password field validation checks for meeting the length and complexity requirements.
Show/hide password functionality allows users to toggle password visibility.
Validation checks are performed as the user types.
Alright team, let's get ready to rock this code! Just remember, in the words of the legendary Queen, "We will, we will, rock you!" So let's get out there and rock this validation form! 🎸🔥

Issue RSS-ECOMM-2_13: Redirect users to the main page upon successful account creation and automatic login (15 points) 🚀
Description
Redirect users to the application's main page, displaying personalized content, upon successful account creation and automatic login. Ensure a smooth transition and handle redirection in a way that accounts for browser history, so users can utilize the back and forward navigation buttons seamlessly. 🔄🔙🔜

To implement the redirection process, consider the following recommendations:

Use the routing or navigation functionality provided by the front-end framework or libraries of your choice. 🧭
If you are not using a front-end framework, refer to these resources for redirection in plain TypeScript:
window.location documentation - MDN Web Docs to understand how to use the window.location API for navigation. 🌐
History API documentation - MDN Web Docs to learn about the history.pushState() and history.replaceState() methods for managing browser history. 📜
Ensure that the user's authentication state is updated and properly maintained throughout the application so that they can access personalized content when redirected to the main page. 🔐
Merely hiding the registration form and showing the main page is not enough; make sure that the user is redirected to a new page or route. 🚦
Utilize client-side routing techniques to minimize loading time and provide a more seamless user experience. ⏱️
Acceptance Criteria
Users are redirected to the main page upon successful account creation and automatic login 🎯
The redirection process takes into account browser history for seamless navigation ⏳
Proper use of the chosen front-end framework or library for handling routing and navigation, or implementation of plain TypeScript solutions when not using a front-end framework 🛠️
And remember, in the immortal words of Imagine Dragons, "I wipe my brow and I sweat my rust, I'm breathing in the chemicals" - let's make this redirect as exhilarating as breathing in new life! 🐉🎸

1. Создать 15 товаров, занести в таблицу все данные.(Тип-Категория-Товар-Атрибуты)

https://www.gamestheshop.com/Demon-s-Souls-for-PS5/5277
Таблица товаров в формате xlsx:
Products_template.xlsx

3. Настроить Import - export в eCommerce.
   https://impex.europe-west1.gcp.commercetools.com/commands/product-import
   Таблица товаров в формате CSV:
   Products_template.csv

Прим: Изображения нужно добавлять через ECommerce, затем экспортировать, чтобы получить внутренние ссылки на картинки.

Issue RSS-ECOMM-1_15: Create Prettier script (5 points) 📜
Description 🗂️
Create a script for running Prettier across the codebase, simplifying code formatting and ensuring uniform code style. 📝🔧

Acceptance Criteria 🎯
A script for running Prettier is created. 📄✅
The script simplifies code formatting and helps maintain a uniform code style across the project. 🔄👌

Issue RSS-ECOMM-2_02: Display clear error messages for validation issues (20 points) 🚨
Description
Display clear error messages on the login form when validation issues are detected, such as an improperly formatted email address 📧 or a weak password 🔑. The error messages should follow specific display rules for a consistent and user-friendly experience.

Display Rules for Validation Error Messages 📚
Error messages should appear next to the corresponding input field (e.g., either to the right, left, top, or bottom of the input field).
Error messages should be styled consistently (e.g., with a specific font, color, and size) across all input fields.
Error messages should not overlap other UI elements or obstruct any important information.
Error messages should disappear once the user corrects the invalid input and meets the validation criteria.
Error messages should be easily readable and visually distinct from other text on the page (e.g., by using a different color or font weight).
Acceptance Criteria ✅
Clear error messages are shown next to the corresponding input field when validation fails.
Error messages are descriptive, explaining the specific validation issue.
Error messages follow the specified display rules for a consistent and user-friendly experience.
Error messages disappear when the user corrects the invalid input.
So team, let's take a leaf from Pink Floyd's book and remember - "All in all, it's just another brick in the wall." And every error message we solve is one less brick in our user's wall! Let's bring the wall down together! 🎸🧱

Issue RSS-ECOMM-2_20: Implement a 404 (Not Found) page for invalid route requests (15 points) 🚫🔍
Description
As a user, I should see a 404 (Not Found) page if I try to access an invalid route or a non-existing page within the application. Create a user-friendly 404 page and redirect users to this page when they request an invalid route. 💡

Visual Implementation Ideas
Design: Design a user-friendly 404 page that aligns with the overall theme and style of your application. Include clear messaging that informs the user that the page they're looking for could not be found. ❌
Return to Main Page: Include a button or link that allows users to navigate back to the main page of the application. 🏠
Search Function (Optional): To enhance the user experience, consider implementing a search bar or a list of links to popular or relevant pages on your site. 🔍
Graphic (Optional): To make the 404 page more engaging, consider adding a simple animation or graphic. 🖼️
Useful Links
How to design a 404 error page that keeps users on your site
Examples of animations
Acceptance Criteria
The 404 page contains clear messaging informing the user that the requested page could not be found. 📝
The 404 page includes a navigation option (e.g., a button or link) for users to return to the main page or another accessible section of the application. 🔄
The application automatically redirects users to the 404 page when they request an invalid route. 🔄
The application should maintain the originally requested URL in the browser's address bar when showing the 404 page, as this helps support user expectations and provides clearer context about the requested route. 🔗
As the lyrics in Coldplay's song "Lost" suggest, "Just because I'm losing, doesn't mean I'm lost". Let's make sure our users never feel truly 'lost' in our application by providing a helpful and friendly 404 page! 🎵💪

Issue RSS-ECOMM-1_09: Configure TypeScript (5 points) 🖥️
Description 📝
Configure TypeScript to enforce strong typing and improve code quality throughout the project. 💪🏼📚

Acceptance Criteria 📚
TypeScript is configured and integrated into the project. ✔️
The project enforces strong typing and benefits from improved code quality. 📈

Issue RSS-ECOMM-2_12: Implement error handling for failed registration attempts (15 points) 🛑
Description
Implement error handling for_failed_registration_attempts, including, but not limited to, the following scenarios:

An email address that already exists in the system: Inform the user that an account with the provided email address already exists, and suggest that they either log in or use another email address. 📧🔒
Server-side issues during registration: Display a user-friendly error message to inform the user that something went wrong during the registration process and that they should try again later. ⚠️🔄
Invalid input that bypasses client-side validation: Ensure any input that somehow bypasses client-side validation is appropriately handled by backend error handling. 🔄🛡️
Display user-friendly error messages that inform users about the issues and how to correct them. You can follow the UI suggestions mentioned in RSS-ECOMM-2_10 for effectively highlighting the errors. Some of the suggested methods include using colors, icon indicators, border styling, and tooltips or popovers to make error messages clear, concise, and visually accessible. 🌈✅

Acceptance Criteria
Proper error handling during the registration process 🛠️
Display user-friendly error messages for_failed_registration_attempts, including the scenarios mentioned above 🗂️👀
Selected UI elements are used effectively to highlight failed registration attempt errors and improve user experience 🖌️🎨
Useful Links and Resources
toastify-js 🍞🔥
And remember, even though we're implementing error handling, "Every rose has its thorn", as the band Poison sings, and these errors are just another way to grow and learn! 🌹🎸

Issue RSS-ECOMM-2_04: Implement error handling for failed authentication attempts using CommerceTools (20 points) 🚫
Description
Implement error handling for failed authentication attempts due to invalid login credentials when using the CommerceTools authentication service. Display user-friendly error messages to inform the user of the issue and guide them on how to proceed.

Failed Authentication Error Handling Tasks 🚧
Determine how CommerceTools responds to authentication errors, such as incorrect email addresses or passwords (e.g., specific error codes or messages in the API response).
Implement a function or module in the application to process and understand the error responses from the CommerceTools authentication service.
Map the error responses from the CommerceTools API to user-friendly error messages that can be displayed in the login form.
Ensure that the error messages are displayed in a consistent and user-friendly manner, as described in Issue RSS-ECOMM-2_02.
Visual Implementation Ideas 💡
Display error messages directly below the respective input field (email, password) that caused the error.
Highlight the input field in red to draw the user's attention.
Use intuitive icons (e.g., a warning triangle) next to the error message to enhance the visibility.
Ensure error messages disappear once the user corrects the input or starts typing in the respective field.
Acceptance Criteria ✅
Clear error messages are shown when authentication fails due to incorrect email or password.
Error messages are user-friendly and provide guidance on how to proceed.
No sensitive information is exposed to the user in the error messages.
The application handles CommerceTools authentication errors properly.
As Bon Jovi said in their song, "It's my life. It's now or never. I ain't gonna live forever. I just want to live while I'm alive." So let's make sure our users feel alive with a smooth and secure login process! 🤘🎸

Fetch and Display Product List using Commercetools API (20 points)
Description
The application should utilize the commercetools API to fetch a list of products with essential details such as the product name, image, and description. The data fetched from the API should be parsed and organized to be displayed on the Catalog Product page, where users can view the list and select individual products for more detailed information.

Implementation Details
API Setup: Set up the commercetools API in your project, following the guidelines provided in the API documentation. Ensure you have the necessary credentials and permissions to fetch product data.
Fetching Data: Use the appropriate commercetools API endpoints to fetch product data. The GET /{projectKey}/products endpoint could be useful for this task. Remember to handle potential errors in data fetching, like network errors or API limitations.
Data Parsing and Display: Parse the fetched data to extract the necessary product details: name, image, and description. Display this data on the Catalog Product page in a user-friendly format.
Visual Implementation Ideas
Product cards: Display each product on the Catalog Product page in a card-like format, with the product image, name, and brief description visible.
Product image: The product image should be clear and accurately represent the product.
Product name and description: The product name should be in a larger, bold font to quickly draw the user's attention. The product description should be brief, informative, and provide necessary details to understand the product at a glance.
Acceptance Criteria
The application successfully fetches a list of products from the commercetools API, including the essential details: name, image, and description.
The fetched products are displayed on the Catalog Product page in an organized, easy-to-browse manner.
Each product card includes the product's image, name, and description, and these elements are easy to identify and understand by users.
Useful Links and Resources
Commercetools API documentation
Commercetools API endpoint for fetching products
Working with data in commercetools

Issue RSS-ECOMM-1_06: Set up CommerceTools project (15 points) 🛠️
Description 📝
Create the project in CommerceTools, setting up the necessary authorization, currencies, languages, and other configurations in the Merchant Center. 🌐

Acceptance Criteria 📚
A new CommerceTools project is created with the correct settings. ✔️
Authorization, currencies, languages, and other configurations are properly set up in the Merchant Center. 🌍

Issue RSS-ECOMM-2_14: Allow users to set a default address during registration (15 points) 📍
Description
When users enter their address information during registration, provide an option to save the address as their default address. This default address can be used for future transactions involving shipping or billing. 📦💼

According to the commercetools CustomerDraft documentation, the properties defaultShippingAddress and defaultBillingAddress can be used to store default addresses. You can either store individual address IDs or store the complete address information in these properties. 🗂️

For example, if a user sets an address as their default shipping address during registration, you can either save the address ID to the defaultShippingAddress property, or save the full address details. 🏠

Business Logic Solution Idea
Include a checkbox or a toggle switch next to the address input fields during the registration process. The checkbox could read 'Set as default address' to make it clear for the user. ☑️
In the backend, ensure the process of setting a default address occurs simultaneously with the creation of the user account. When a user sets an address as the default, use the commercetools API to store this information by making a POST request to the customers endpoint with the defaultShippingAddress and/or defaultBillingAddress properties set in the request body. ⏩
Visual Implementation Ideas
Provide clear labeling next to the checkbox or toggle switch indicating that this will set the address as the default for future transactions. 🏷️
If possible, visually separate the default address selection from other fields to draw the user's attention. 👁️
Acceptance Criteria
Users can set a default address while registering. 🖱️
The setting of a default address happens simultaneously with user account creation. 🔄
The default address is saved in the user profile upon successful registration. 💾
Proper integration with the commercetools API for storing default address information. 🔗
The user interface clearly distinguishes the default address selection during registration. 🔍
In the spirit of rock music, let's keep in mind the words of Scorpions - "Time, it needs time to win back your love again." So let's make it easy for our users to save time by setting their default addresses! 🎸🎶

Implement Robust Filtering Options for Product List Using commercetools API (20 points)
Description
The application should offer a comprehensive set of filters allowing users to refine the product list based on various product attributes, such as price range, brand, color, size, or other relevant characteristics. The filtering functionality should be implemented using the commercetools API.

Implementation Details
Fetching Product Attributes: Using the commercetools API, fetch the necessary product attributes that will serve as the basis for filters. This might include, but is not limited to, attributes like price, brand, color, and size.
Designing the Filter Interface: Design a user-friendly and intuitive interface for applying filters. This could be a sidebar, a dropdown menu, or a modal window.
Applying Filters: Implement functionality that updates the product list based on the selected filters. This will involve making new API requests with filter parameters to the commercetools API.
Visual Implementation Ideas
Filter Options Layout: Display filter options in a clear and organized manner. You might want to group related filters or use visual elements like sliders for price ranges.
Active Filters Indication: Clearly indicate which filters are currently applied. This could be done through highlighting, checkboxes, or some other visual cues.
Resetting Filters: Provide an easy way for users to reset the filters and view the unfiltered product list.
Acceptance Criteria
A robust set of filters is available, allowing users to refine the product list based on various attributes like price range, brand, color, size, etc.
Applying a filter updates the product list to show only products that match the selected filter criteria. This updating should be done using the commercetools API.
It's clear to the user which filters are currently applied.
There is a clear and easy way for users to reset the filters.
Useful Links and Resources
Commercetools API documentation
Commercetools API endpoint for fetching product attributes
Commercetools API filtering capabilities

Issue RSS-ECOMM-1_08: Configure bundler (10 points) 🧩
Description 📝
Set up and configure a bundler (e.g., Webpack, Vite, Parcel, Rollup, or other) for the project, supporting both development and production build modes. 💻🔄

Acceptance Criteria 📚
A bundler (e.g., Webpack, Vite, Parcel, Rollup, or other) is set up and integrated with the project. ✔️
The bundler configuration supports both development and production build modes. 🛠️
Useful links to popular bundlers 🖇️
Webpack ⚙️
Vite ⚡
Parcel 📦

Issue RSS-ECOMM-1_21: Create a pull request template (5 points) 📝
Description 🗂️
Create a pull request template with a clear structure for describing proposed changes and the rationale behind them. This template will help standardize pull request descriptions and make it easier to understand the purpose of each proposed change. 🔄🎯

Acceptance Criteria 🎯
A pull request template file is created and saved to the repository. 💾✅
The template has a clear structure for describing proposed changes. 🗂️👌
The template includes sections for providing the rationale behind the changes. 💭👀

Issue RSS-ECOMM-2_16: Add a button or link on the registration page that allows users to navigate to the login page (5 points) 🔗
Description
On the registration page, add a button or link that redirects users to the login page if they already have an account. This button or link should be easily noticeable and accessible, adhering to the best user interface design practices. 🎯

Visual Implementation Ideas
Position the button or link strategically on the page so that it's easily noticeable. It could be placed below the registration form or near the top of the page for easy access. 🗺️
The button or link could say something like "Already have an account? Login". 💬
Use contrasting colors or fonts to make the button or link stand out. 🌈
Acceptance Criteria
The registration page includes a clear and visible button or link. 📌
Upon clicking the button or link, the user is redirected to the login page. 🔄
In the words of Queen's famous song, "Another One Bites the Dust" - each user redirected correctly is another victory in our quest for an efficient user interface. Let's rock this task! 🎸🔥

Issue RSS-ECOMM-1_13: Install and configure Jest (10 points) 😄
Description 📝
Install and configure Jest as the testing framework for the project, enabling comprehensive testing of code functionality. 🔧👩‍💻🧪

Acceptance Criteria 📚
Jest is installed and configured as the testing framework for the project. ✔️
The project allows for comprehensive testing of code functionality with Jest. ✔️🔬

Issue RSS-ECOMM-1_19: Document scripts in README (5 points) 📝
Description 🗂️
Document all available scripts (e.g., for running ESLint, Prettier, and Jest tests) and their usage in the README file. This will help team members and other contributors to better understand and utilize the available scripts. 🛠️👥

Acceptance Criteria 🎯
All available scripts are documented in the README file. 📚✅
Usage instructions for each script is provided. 📖👍

Issue RSS-ECOMM-1_14: Create ESLint script (5 points) 🎯
Description 📝
Create a script for running ESLint across the codebase, making it possible to quickly and efficiently identify code style issues and potential errors. 💡🔍💻

Acceptance Criteria 📚
A script for running ESLint is created. ✅
The script enables quick and efficient identification of code style issues and errors. ✅👨‍💻🚀

Issue RSS-ECOMM-1_18: Share task board with team and mentor (3 points) 📬
Description 🗂️
Share the task board with the team members and the mentor, ensuring everyone can track progress and update the status of their tasks. This action will help keep everyone in sync and maintain a clear understanding of the project's status. 👥🔄📊

Acceptance Criteria 🎯
The task board is shared with all team members and the mentor. 📌👥
Everyone has access to view and update the task board. 👀📝

Issue RSS-ECOMM-1_07: Set up CommerceTools API client (15 points) 🛠️
Description 📝
Create the API client for CommerceTools, enabling access to the platform's APIs and managing permissions and scopes required for the project. 🔑

Acceptance Criteria 📚
The API client is created for CommerceTools with the required permissions and scopes. ✔️
The API client enables the project to access the platform's APIs for integration. 🔄

Display Prices with and Without Discount for Discounted Products (20 points)
Description
For discounted products, the application should display both the original and the discounted price. The discounted price, which is the current price the customer needs to pay, should be made visually distinct to highlight the discount and value for the customer.

Implementation Details
Fetching Discounted Product Data: Make use of the commercetools API to fetch product data, which should include the original price and any available discounts. It may require fetching price data separately or in combination with product details.
Parsing Product Price Data: Extract the necessary price and discount information from the fetched data. This may include the original price, the discount amount or percentage, and the discounted price.
Calculating Discounted Price: If the API does not provide the discounted price directly, calculate it from the original price and the discount amount or percentage.
Visual Implementation Ideas
Displaying Prices: Display the original price and the discounted price clearly on the product card. Ensure both prices are easily visible and understandable.
Highlighting Discounted Price: Make the discounted price visually distinct, for example, by using a different color, font size, or a badge. The goal is to draw attention to the discounted price and highlight the savings.
Striking out the Original Price: Consider using a strikethrough for the original price to reinforce the idea that the discounted price is currently in effect.
Acceptance Criteria
Both the original price and the discounted price are clearly displayed for discounted products.
The discounted price is visually distinct and clearly indicates that it is the current price the customer needs to pay.
If the original price is displayed, it should be marked in a way that clearly communicates that it is not the current price (e.g., strikethrough).
Useful Links and Resources
Commercetools API documentation
Commercetools API endpoint for fetching product prices
Product Discounts

Issue RSS-ECOMM-1_02: Set up folder structure (10 points) 📁
Description 📝
Set up a clear and organized folder structure within the repository, ensuring a maintainable and scalable codebase. By organizing the codebase properly, it will be easier for team members to navigate and contribute code efficiently. 🧭

Acceptance Criteria 📚
There is a well-defined folder structure for different components, features, and assets. 📂
The folder structure allows for easy navigation and identification of the project's different parts. 📍

Issue RSS-ECOMM-2_03: Integrate login form with CommerceTools authorization service (25 points) 🔒
Description
Integrate the login form with the CommerceTools authorization service to handle user authorization by submitting the email 📧 and password 🔑 provided by the user. Set up and configure the CommerceTools API to work with the application to manage user authorization securely 🔐.

CommerceTools Integration Tasks 🛠️
Set up a CommerceTools project and configure the required API clients, scopes, and permissions for user authentication.
Implement a function or module in your application to communicate with the CommerceTools API to submit user email and password for authorization (authorization documentation).
Handle the authentication response from the CommerceTools API, which includes receiving the access token, refresh token, and user data upon successful login (Sign in response documentation).
Acceptance Criteria ✅
CommerceTools authentication service is set up and configured for the project.
Login form communicates with the CommerceTools authentication service to sign in users by submitting email and password.
Application can successfully receive access token, refresh token, and user data from the CommerceTools API.
In the words of The Rolling Stones, "You can't always get what you want, but if you try sometimes, you might find, you get what you need." So let's get what we need by ensuring this integration is tight and secure! 👊🎶

Issue RSS-ECOMM-1_17: Update README with project description (10 points) 📝
Description 🗂️
Update the README file in the repository, providing a comprehensive description of the project, its purpose, and the technology stack used. 🔄💡🛠️

Acceptance Criteria 🎯
The README file contains a comprehensive description of the project and its purpose. 📄✅
The technology stack used is described in the README. 🧪🗃️

Implement Category and Breadcrumb Navigation (25 points)
Description
Our goal is to make the product exploration process easy and efficient. We need to implement clear and user-friendly navigation that enables users to explore and switch between different product categories or subcategories. In addition, we need to provide breadcrumb navigation to help users understand their current location within the category hierarchy.

Implementation Details
Category Display: The navigation options should be prominently displayed, possibly as a side panel or a drop-down menu. This might vary depending on the chosen design.
API Usage: Make use of the commercetools API, or any other simple API, to fetch the categories/subcategories information. The API call should return a list of all available categories/subcategories.
Navigation Implementation: Each category or subcategory should be clickable, and when clicked, the product list should be updated to reflect the selected category or subcategory.
Breadcrumb Navigation: Breadcrumb navigation should be present on all category pages to give users a clear understanding of the category hierarchy and their current location within it. Each segment of the breadcrumb should be a clickable link that takes the user to the corresponding category or subcategory page.
Category Hierarchy: Ensure that the category hierarchy is accurately reflected in the breadcrumb navigation. This will likely involve fetching category data from the chosen API (commercetools or another simple API) and dynamically generating the breadcrumb links based on this data.
Acceptance Criteria
User-friendly navigation for product categories and subcategories is implemented and clearly visible.
Users can switch between different product categories and subcategories.
Clicking on a category or subcategory updates the product list accordingly.
Breadcrumb navigation or a similar navigational aid is present on all category pages, accurately reflecting the category hierarchy and the user's current location within it.
Clicking on a segment of the breadcrumb navigation takes the user to the corresponding category or subcategory page.
Useful Links and Resources
Commercetools API Documentation
Commercetools Modeling Categories
Product Projection Search
Breadcrumb Navigation
Breadcrumb in HTML and CSS
commercetools Categories API

Issue RSS-ECOMM-1_12: Initialize Husky (8 points) 🐶
Description 📝
Initialize Husky to manage Git hooks, automating tasks such as code formatting and linting checks during the commit process. 📝➡️🔎

Acceptance Criteria 📚
Husky is initialized and integrated into the project. ✔️
Git hooks are managed by Husky, automating code formatting and linting checks. ✔️🔄

Interactive Product Cards (10 points)
Description
Product cards displayed on the product list page should change their appearance when the user hovers over them. This will enhance the browsing experience by providing visual feedback and making the interface more dynamic.

Implementation Details
Product Card Design: The product card should display key details about the product (such as name, image, and price). It should be aesthetically pleasing and match the overall design theme of the website.
Hover Effect: When the user hovers over a product card, its appearance should change in a way that indicates it is being interacted with. This could be accomplished with changes in color, shadow, scale, or other visual properties.
Visual Implementation Ideas
Color Change: Alter the background color of the product card on hover.
Shadow Effect: Add or increase a shadow effect to give the impression that the card is being lifted off the page.
Scale Transformation: Slightly increase the size of the product card to draw attention to it.
Acceptance Criteria
Product cards on the product list page display key product details.
When a user hovers over a product card, its appearance changes to indicate it is being interacted with.
Useful Links and Resources
CSS hover effects
Creating 3D effects with CSS

Issue RSS-ECOMM-1_10: Set up ESLint (5 points) 🖥️
Description 📝
Set up ESLint to enforce consistent coding styles and identify potential issues in the codebase. 🕵️

Acceptance Criteria 📚
ESLint is set up and integrated into the project. ✔️
ESLint enforces consistent coding styles and helps identify potential code issues. 🛠️🧐

Fetch and Display Product Details using Commercetools API (15 points)
Description
The application should utilize the commercetools API to fetch the detailed information such as the product name, description, and images of a selected product. The data fetched from the API should be parsed and organized to be displayed on the Detailed Product page, where users can view all details of the selected product.

Implementation Details
API Setup: Use the already set up commercetools API in your project to fetch detailed product data. Make sure you have the necessary credentials and permissions.
Fetching Data: Use the appropriate commercetools API endpoints to fetch product detail data. The GET /{projectKey}/products/{ID} endpoint could be useful for this task. Remember to handle potential errors in data fetching, like network errors or API limitations.
Data Parsing and Display: Parse the fetched data to extract the necessary product details: name, description, and images. Display this data on the Detailed Product page in a user-friendly format.
Visual Implementation Ideas
Product Details: Display the product name, description, and images on the Detailed Product page in an easy-to-read and comprehensive manner.
Product Images: The product images should be clear and accurately represent the product. Users should have the possibility to see multiple images if available.
Product Name and Description: The product name should be in a larger, bold font to quickly draw the user's attention. The product description should be detailed, informative, and provide all necessary details for the user to understand the product completely.
Acceptance Criteria
The application successfully fetches detailed information of a product from the commercetools API, including the essential details: name, description, images and other attributes.
The fetched product details are displayed on the Detailed Product page in an organized and easy-to-understand manner.
The Detailed Product page includes the product's images, name, and description, and these elements are easy to identify and understand by users.
Useful Links and Resources
Commercetools API endpoint for fetching product by ID

Issue RSS-ECOMM-1_05: Break down tasks and delegate responsibilities (5 points) 🎯
Description 📝
Break down project tasks into smaller, manageable subtasks and assign them to team members, ensuring a clear delegation of responsibilities. This process will help divide the workload evenly among team members and enable focused work on specific aspects of the project. 🧩

Acceptance Criteria 📚
Project tasks are broken down into smaller, manageable subtasks. 🪓
Subtasks are assigned to team members based on their expertise and workload. 📨
Each team member has a clear understanding of their responsibilities. 🧠

Issue RSS-ECOMM-1_01: Set up GitHub repository (10 points) 🏗️
Description 📝
Create a GitHub repository for the project, complete with a README file, .gitignore, and necessary dependencies. This repository will serve as the central codebase for the project, allowing for collaboration and version control.

Acceptance Criteria 📚
A new GitHub repository is created with the project name. 📁
A README file is initialized with a brief description of the project. 📝
A .gitignore file is added to exclude unnecessary files and directories. 🚫
Useful Links 🔗
Create a GitHub repository 🛠️
About README files 📚
Sample .gitignore files 🗂️
.gitignore file 🚫

Implement Sorting Functionality for Product List Using commercetools API (15 points)
Description
The application should offer users the ability to sort the product list by various properties, such as price (ascending, descending) and name (alphabetically). This sorting functionality should be implemented using the commercetools API.

Implementation Details
Designing the Sorting Interface: Design a user-friendly and intuitive interface for sorting. This could be a dropdown menu with different sorting options.
Sorting Functionality: Implement functionality that updates the product list based on the selected sorting option. This will involve making new API requests with sorting parameters to the commercetools API.
Visual Implementation Ideas
Sorting Options Layout: Display sorting options in a clear and easily accessible manner. You could use a dropdown menu with labels clearly describing the sorting method.
Active Sorting Indication: Clearly indicate the currently selected sorting method. This could be done by highlighting the selected sorting option in the dropdown menu.
Acceptance Criteria
Users can sort the product list by price (ascending, descending) and name (alphabetically).
Applying a sorting option updates the product list to reflect the chosen sorting method. This updating should be done using the commercetools API.
The currently active sorting method is clearly indicated to the user.
Useful Links and Resources
Commercetools API documentation
Commercetools API endpoint for sorting product list

Implement Search Functionality for Product List Using commercetools API (15 points)
Description
The application should have an efficient and user-friendly search feature that allows users to quickly find and display relevant products based on their search query. This search functionality should be implemented using the commercetools API.

Implementation Details
Search Input Field: Provide a text input field where users can type their search queries. This field should be visible and easily accessible on the product list page.
Search Functionality: Implement a search function that uses the user's input to find and display matching products from the commercetools API. The function should handle different cases (e.g., uppercase, lowercase) and partial matches.
Visual Implementation Ideas
Input Field Design: The search input field should be visible and accessible. It should be designed in a way that suggests its function (e.g., with a magnifying glass icon).
Search Result Indication: Display search results in a clear and organized manner. You might want to highlight the matching text in the product name or description.
Acceptance Criteria
Users can type search queries into a text input field on the product list page.
Based on the user's input, matching products are fetched from the commercetools API and displayed on the product list page.
The search function is case-insensitive and supports partial matches.
Useful Links and Resources
Commercetools API documentation
Commercetools API endpoint for searching product list

Issue RSS-ECOMM-2_15: Enable users to select different billing and shipping addresses during registration (15 points) 🛒📝
Description
During the registration process, give users the ability to provide different addresses for billing and shipping. Users may also have the option to use the same address for both billing and shipping. Once registration is successful, the chosen addresses should be saved in the user's profile. 🏠💼

Business Logic Solution Idea
In the registration form, include separate input fields for billing and shipping addresses. 📝
Additionally, provide a checkbox that users can tick if they want to use the same address for both billing and shipping. If checked, the application should copy the values from one set of fields to the other. ☑️
When the user submits the form, send a request to the commercetools API to create a new customer. Include the billing and shipping address information in the request body, as described in the commercetools CustomerDraft documentation. 🚀
Visual Implementation Ideas
Clearly label the input fields for billing and shipping addresses. 🏷️
Place the checkbox for using the same address for both purposes in a prominent location on the form. 💡
Acceptance Criteria
Users can enter separate addresses for billing and shipping during the registration process. 🛒
Users can choose to use the same address for both billing and shipping. ✅
The chosen addresses are saved in the user profile upon successful registration. 📥
The user interface clearly distinguishes between input fields for billing and shipping addresses. 📋
Proper integration with the commercetools API for storing billing and shipping address information. 🔗
Remember the words of Journey, "Don't stop believin', hold on to that feelin'", so let's make this registration process a smooth journey for our users! 🎸🎶

Issue RSS-ECOMM-2_09: Implement client-side validation for required fields in the registration form (25 points) 🔒
Description
Implement client-side validation for all required fields in the registration form using JavaScript or a front-end library. The fields include:

Email: A properly formatted email address (e.g., [email protected])
Password: Minimum 8 characters, at least 1 uppercase letter, 1 lowercase letter, and 1 number
First name: Must contain at least one character and no special characters or numbers
Last name: Must contain at least one character and no special characters or numbers
Date of birth: A valid date input ensuring the user is above a certain age (e.g., 13 years old or older)
Address fields:
Street: Must contain at least one character
City: Must contain at least one character and no special characters or numbers
Postal code: Must follow the format for the country (e.g., 12345 or A1B 2C3 for the U.S. and Canada, respectively)
Country: Must be a valid country from a predefined list or autocomplete field
Ensure that the chosen validation approach is compatible with CommerceTools or the chosen platform.

Acceptance Criteria ✔️
Each required field in the registration form has validation rules
Registration form submission is prevented if the input doesn't meet the requirements
As Queen sang, "We are the champions, my friends," and with our robust validation rules, we'll keep on fighting 'til the end of invalid form submissions! 🎶🏆

Redirect to Detailed Product Page (10 points)
Description
When users click on a product card, they should be redirected to a detailed product information page for the selected product.

Implementation Details
Product Link: Each product card should be a clickable entity, ideally implemented as a link that directs to the corresponding product detail page. The clickable area can be the entire card or just a part of it, such as the product's name or an individual "View Details" button.
Acceptance Criteria
Clicking on a product card in the product list page directs the user to the detailed product page for the selected product.
Useful Links and Resources
Creating hyperlinks in HTML

Issue RSS-ECOMM-1_03: Invite team members and mentor (4 points) 🤝
Description 📝
Invite all team members and the mentor as collaborators, ensuring everyone has access to contribute to the repository. Collaboration is crucial for the project's success, and this task aims to make sure everyone can work together efficiently. 💪

Acceptance Criteria 📚
All team members and the mentor are invited as collaborators on the GitHub repository. 💌
Each team member and the mentor can access and contribute to the repository. 💻

Issue RSS-ECOMM-1_16: Create Jest test script (5 points) 📜
Description 🗂️
Create a script for running Jest tests, streamlining the process of executing tests and generating reports on test outcomes. 🧪⚙️

Acceptance Criteria 🎯
A script for running Jest tests is created. 📄✅
The script streamlines the process of executing tests and generating test outcome reports. 🚀📊