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. 💻

Sprint 4: Basket Page, Catalog Page Enhancements, and About Us Page Implementation 🚀

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. 🧪🗃️

• Replace Jest with Vitest
• Update configs relevantly

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! 🤘🎸

• Update GitHub Actions to be consistent with the new default branch for the sprint ✍️
• Update CD on Netlify to be consistent with the new default branch for the sprint 🌊

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. 📍

• Implement continuous integration pipeline to check formatting on opening PR 🎨
• Implement automatic review request from the rest of the team on opening Pull Requests 📂

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. 🔄

Description

Obtain the authentication token securely after a successful login attempt by sending a request to the token endpoint (e.g., https://auth.europe-west1.gcp.commercetools.com/oauth/project_key/customers/token), allowing for seamless user authentication across the application, but do not save it.

Acceptance Criteria ✔️

• The authentication token is obtained from the token endpoint after a successful login attempt.
• The token is used for subsequent requests that require authentication.

Remember the wisdom of the classic Queen track, "I want to break free!" When it comes to our authentication token, we break free from the norm. We don't save it - we're rebels with a cause! 🎵🤘

1. Task Board Setup (Trello, Jira, etc.) (14 points) 📋

• (6 points) 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). RSS-ECOMM-1_04 ✔️
  #9

• (5 points) Break down project tasks into smaller, manageable subtasks and assign them to team members, ensuring a clear delegation of responsibilities. RSS-ECOMM-1_05 🧩
  #10

• (3 points) Share the task board with the team members and the mentor, ensuring everyone can track progress and update the status of their tasks. RSS-ECOMM-1_18 🤝
  #11

1. Repository Setup (29 points) 🧐

• (10 points) Create a GitHub repository for the project, complete with a README file, .gitignore, and necessary dependencies. RSS-ECOMM-1_01 📚
  #4
  #35

• (10 points) Set up a clear and organized folder structure within the repository, ensuring a maintainable and scalable codebase. RSS-ECOMM-1_02 🏗️
  #5
  #51

• (4 points) Invite all team members and the mentor as collaborators, ensuring everyone has access to contribute to the repository. RSS-ECOMM-1_03 👥
  #6

• (5 points) Create a pull request template with a clear structure for describing proposed changes and the rationale behind them. RSS-ECOMM-1_21 📝
  #7
  #50

🎯 Sprint 2: Login, Registration, and Main Pages Implementation

• Set up a continuous deployment process using Netlify ⚡

1. Development Environment Configuration (43 points) ⚙️

• (10 points) Set up and configure a bundler (e.g., Webpack, Vite, Parcel, or other) for the project, supporting both development and production build modes. RSS-ECOMM-1_08 📦
  #16
  #36

• (5 points) Configure TypeScript to enforce strong typing and improve code quality throughout the project. RSS-ECOMM-1_09 🧮
  #17
  #36

• (5 points) Set up ESLint to enforce consistent coding styles and identify potential issues in the codebase. RSS-ECOMM-1_10 📏
  #18
  #37

• (5 points) Configure Prettier to automatically format code, ensuring a consistent and readable code style. RSS-ECOMM-1_11 ✨
  #19
  #38

• (8 points) Initialize Husky to manage Git hooks, automating tasks such as code formatting and linting checks during the commit process. RSS-ECOMM-1_12 🐕
  #20
  #40

• (10 points) Install and configure Jest as the testing framework for the project, enabling comprehensive testing of code functionality. RSS-ECOMM-1_13 🧪
  #21
  #47
  #66

Description

Redirect users who are already logged into the application to the main page if they attempt to access the login page. Ensure a smooth and seamless user experience by properly checking the user's authentication state, updating the URL in the address bar, and handling navigation during the redirection process.

Redirection and Authentication State Checking Tasks 🧐

• Implement a function, service, or route guard in your application that checks whether a user is already authenticated when they attempt to visit the login page.
• If the user is authenticated, redirect them to the main page, preventing access to the login page while they are logged in.
• Update the URL in the address bar to reflect the correct URL for the main page (e.g., "/main") for authenticated users redirected from the login page.
• Ensure that the browser's navigation (history) is updated correctly when redirecting authenticated users to the main page.

Acceptance Criteria ✔️

• Authenticated users who attempt to visit the login page are automatically redirected to the main page.
• The URL in the address bar is changed to the main page's URL for authenticated users redirected from the login page.
• Redirection maintains the user's authentication state during the process.
• Proper handling of navigation and user experience during redirection, including updating browser history.

In the words of AC/DC, "For those about to rock, we salute you!" Let's ensure that our authenticated users are always on the rockin' main page and not back in the login page crowd! 🤘🎸

• Add branch names examples to validate branch script for everyone to see 🌿

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. ✔️
• Currencies, languages, and other configurations are properly set up in the Merchant Center. 🌍

• Add project structure 📁
• Update path aliases for updated structure 🥸

• After finishing the sprint, create a new PR from develop to main for Mentor’s submit 💯

Sprint Criteria

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_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. 📈

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-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. 🖊️

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_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. 🛠️🧐

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. 🚀📊

🌱 Create an initial database of at least 10-20 items to be able to start working with the API. Including but not limited to:

• 1-4 pictures for each item 🖼️
• price 💵
• SKU 🪇
• title 🌸
• short description ✏️
• full description 🗒️
• rating ⭐
• reviews (rating, text, date, username/anonymous - plant lover) 🖖
• size (small, medium, large, extra large) 😀
• category (House Plants, Potted Plants, Small Plants, Big Plants, Seeds, Florarium, Succulent, Accessories, Pots) 🪴
• tags (Home, Garden, Plants, Seeds, on Sale, New, Sold Out) 🏡
• plant care tab 🐛
• sale (percentage - optional) 💯

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. 👀📝

🌱 Create an initial database of at least 10-20 items to be able to start working with the API. Including but not limited to:

• 1-4 pictures for each item 🖼️
• price 💵
• SKU 🪇
• title 🌸
• short description ✏️
• full description 🗒️
• rating ⭐
• reviews (rating, text, date, username/anonymous - plant lover) 🖖
• size (small, medium, large, extra large) 😀
• category (House Plants, Potted Plants, Small Plants, Big Plants, Seeds, Florarium, Succulent, Accessories, Pots) 🪴
• tags (Home, Garden, Plants, Seeds, on Sale, New, Sold Out) 🏡
• plant care tab 🐛
• sale (percentage - optional) 💯

• Add a pipeline for Jest testing 💻
• Add labeling pipeline 📚
• Update node version 🍏

• Check and update the project's README to make sure it’s consistent with the current used tech stack 💻 , key features 🔑 , and overall architecture 🏛️

1. Development Scripts (15 points) 🖊️

• (5 points) Create a script for running ESLint across the codebase, enabling quick and efficient identification of coding style issues and potential errors. RSS-ECOMM-1_14 🐞
  #23
  #39

• (5 points) Create a script for running Prettier across the codebase, simplifying code formatting and ensuring uniform code style. RSS-ECOMM-1_15 🎨
  #24
  #39

• (5 points) Create a script for running Jest tests, streamlining the process of executing tests and generating reports on test outcomes. RSS-ECOMM-1_16 🧾
  #25
  #47

Sprint 1: Repository Setup, Project Management, CommerceTools Integration, and Development Environment Configuration (150 points) 😊

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 🚫

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. 📖👍

1. Comprehensive README (19 points) 📝

• (10 points) Add a thorough README file in the repository, describing the project, its purpose, and the technology stack used. RSS-ECOMM-1_17 📘
  #27
  #55

• (5 points) Clearly document all available scripts (e.g., for running ESLint, Prettier, and Jest tests) and their usage in the README file. RSS-ECOMM-1_19 📜
  #28
  #55

• (4 points) Provide detailed instructions for setting up and running the project locally, ensuring newcomers and contributors can quickly get started. RSS-ECOMM-1_20 🚀
  #29
  #55

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. ✔️🔄

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. 💭👀

1. CommerceTools Project and API Client Setup (30 points) 💻

• (15 points) Create the project in CommerceTools, setting up the currencies, languages, and other configurations in the Merchant Center. RSS-ECOMM-1_06 💼
  #13

• (15 points) Create the API client for CommerceTools, enabling access to the platform's APIs and managing permissions and scopes required for the project. RSS-ECOMM-1_07 🔐
  #14
  #102

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_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_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. 🔄👌

🖥️ Login Page Implementation (130 points - Total)

Requirements

📝 1. Input Validation (40 points)

• ☑️ (20 points) Implement client-side validation for the login form, including email and password fields. RSS-ECOMM-2_01
  #75
  #112

• ❌ (20 points) Display clear error messages indicating any validation issues, such as an improperly formatted email. RSS-ECOMM-2_02
  #76
  #113

🔗 2. Integration with Authentication Service (45 points)

• ☑️ (25 points) Integrate the login form with a chosen authentication service (CommerceTools) to handle user authentication. RSS-ECOMM-2_03
  #77
  #117

• ❌ (20 points) Implement error handling for failed authentication attempts, such as incorrect email or password, and display user-friendly error messages. RSS-ECOMM-2_04
  #78
  #119

🔄 3. Redirection (30 points)

• 🚀 (15 points) Redirect users to the application's main page upon successful login. RSS-ECOMM-2_05
  #79
  #119

• 🚀 (15 points) Redirect users who are already logged in to the main page if they try to access the login page. RSS-ECOMM-2_06
  #80
  #120

🔑 4. Handle Authentication Token (10 points)

• ☑️ (10 points) Obtain the authentication token securely after a successful login attempt by sending a request to the token endpoint (e.g., https://auth.europe-west1.gcp.commercetools.com/oauth/project_key/customers/token), allowing for seamless user authentication across the application. RSS-ECOMM-2_07
  #81
  #117

➡️ 5. Navigation to Registration Page (5 points)

• ☑️ (5 points) Add a button or link on the login page that allows users to navigate to the registration page. RSS-ECOMM-2_08
  #82
  #115

Sprint 3: Catalog Product Page, Detailed Product Page & User Profile Page Implementation 📚🔍👥

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., http://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-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. ✅👨‍💻🚀

Description

Redirect users to the application's main page upon successful login, allowing them to access the main features and content of the application. The main page can contain simple text (e.g., "Main") or any other content to demonstrate that the user is successfully logged in. Ensure that the URL in the address bar is changed to the main page's URL, properly handling navigation and user experience during redirection.

URL Change and Redirection Tasks 🔀

• Implement a function or module in your application that handles successful authentication by redirecting users from the login page to the main page.
• Update the URL in the address bar to reflect the correct URL for the main page (e.g., "/main") upon successful login and redirection.
• Ensure that the browser's navigation (history) is updated correctly when redirecting users to the main page, allowing them to use the back button to navigate to the previous page if necessary.
• Make sure that the user's authentication state is preserved during the redirection process, allowing them to stay logged in when accessing the main page.

Acceptance Criteria ✅

• After successful authentication, users are redirected to the main page of the application, which contains simple text ("Main") or any other content.
• The URL in the address bar is changed to the main page's URL upon redirection.
• Proper handling of navigation and user experience during redirection, including browser history updates and preserving authentication state.

As the band Journey would say, "Don't stop believin'!" Let's guide our users to their main page destination like the faithful city boy on a midnight train going anywhere! 🌃🚂

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-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. ➕