sunagatov / iced-latte-frontend

a online Marketplace for coffee retail (Frontend)

Iced-Latte (Frontend)

Table of Contents

• Introduction
• Github-Stars
• Iced-Latte (Frontend)
• Table of Contents
• Tech Stack
• Quick Start
• Features
• API Documentation
• Project structure
• Contributing
• Code of Conduct
• License
• Contact
• Community and Support

Introduction

🟥 Iced-Latte (Frontend) is a non-profit sandbox project where a team of IT enthusiasts are working on creating a modern marketplace (https://iced-latte.uk/) for selling coffee in order to pump up their soft and hard skills and have fun working on an interesting project. Built using Next.js, it's crafted for educational purposes, offering insights into modern application development with Next.js.

🟥 It's crucial to note that we operate without financial support from any party, and we don't compensate anyone financially either. Our efforts are fuelled solely by passion and dedication.

🔥 Github-Stars 🔥

Please support Iced Latte project by Giving Stars 🌟 on Github repositories - your ratings mean a lot to us!🙂

Tech Stack

• Core: Next.js + Typescript.
• State manager: Zustand.
• Css framework: TailwindCSS.
• Testing: Jest, React-Testing-Library.

Quick Start

Follow the setup instructions in START.MD to get the project up and running.

API Documentation

The API is fully documented with Swagger. Access the documentation at http://localhost:8083/api/docs/swagger-ui once the server is running.

Project structure

  - public/  (static files)
  - src/  (sources directory)
    - app/
      - _components/  (components used by current page)
      - someRouteFolder/  (some rote page)
        - _components/  (someRoute page components)
        page.tsx  (someRoute page)
      globals.css  (global styles)
      layout.tsx  (root layout)
      page.tsx  (main page)
    - components  (shared components across application)
      - ui  (shared ui components (buttons, etc.))
    - constants  (temporary hardcoded values)
    - data  (temporary mocked data)
    - hooks  (custom hooks)
    - models  (typescript types)
    - services
    - utils  (utility functions)
    tailwind.config.ts  (tailwind custom classes)

🚢 Deployment

No k8s, no AWS, we ship dockers directly via ssh and it's beautiful!

The entire production configuration is described in the docker-compose.local.yml file.

Then, Github Actions have to take all the dirty work. They build, test and deploy changes to production on every merge to master (only official maintainers can do it).

Explore the whole .github folder for more insights.

We're open for proposals on how to improve our deployments without overcomplicating it with modern devops bullshit.

🛤 Forking and tweaking

Forks are welcome.

Three huge requests for everyone:

• Please share new features you implement with us, so other folks can also benefit from them, and your own codebase minimally diverges from the original one (so you can sync updates and security fixes) .
• Do not use our issues and other official channels as a support desk. Use chats.

🙋‍♂️ How to report a bug?

• 🆕 Open a new issue.
• 🔦 Please, use a search, to check, if there is already existed issue!
• Explain your idea or proposal in all the details:
  • Make sure you clearly describe "observed" and "expected" behaviour. It will dramatically save time for our contributors and maintainers.
  • For minor fixes please just open a PR.

💎 Now to propose a new feature?

• Go to our Discussions
• Check to see if someone else has already come up with the idea before
• Create a new discussion
• 🖼 If it's UI/UX related: attach a screenshot or wireframe

😍 Contributions

Contributions are welcome.

The main point of interaction is the Issues page.

Here's our contribution guidelines — CONTRIBUTING.md.

The official development language at the moment is English, because 100% of our users speak it. We don't want to introduce unnecessary barriers for them. But we are used to writing commits and comments in Russian and we won't mind communicating with you in it.

😎 I want to write some code

• Open our Issues page to see the most important tickets at top.
• Pick one issue you like and leave a comment inside that you're getting it.

For big changes open an issues first or (if it's already opened) leave a comment with brief explanation what and why you're going to change. Many tickets hang open not because they cannot be done, but because they cause many logical contradictions that you may not know. It's better to clarify them in comments before sending a PR.

🚦Pay attention to issue labels!

🟩 Ready to implement

• good first issue — good tickets for first-timers. Usually these are simple and not critical things that allow you to quickly feel the code and start contributing to it.
• bug — if something is not working, it needs to be fixed, obviously.
• high priority — the first priority tickets.
• enhancement — accepted improvements for an existing module. Like adding a sort parameter to the feed. If improvement requires UI, be sure to provide a sketch before you start.

🟨 Discussion is needed

• new feature — completely new features. Usually they're too hard for newbies, leave them for experienced contributors.
• idea — discussion is needed. Those tickets look adequate, but waiting for real proposals how they will be done. Don't implement them right away.

🟥 Questionable

• ¯\_(ツ)_/¯ - special label for questionable issues. (should be closed in 60 days of inactivity)
• [no label] — ticket is new, unclear or still not reviewed. Feel free to comment it but wait for our maintainers' decision before starting to implement it.

👍 Our top contributors

Take some time to press F and give some respects to our best contributors, who spent their own time to make the club better.

😎 Iced Latte project creator / Product owner / Tech Lead

• @Sunagatov

😇 Project manager

• @oonovikova

🕵️‍♀️ QA engineers

• @TetianaPerinha
• @ilsinyakov
• @Diana-Smolnikova

⚙️ Backend developers

• @annstriganova
• @M437A
• @Sunagatov
• @vitaliibredun
• @plakhov
• @shpali4
• @yevr19
• @andrew13pol
• @nnick44

🖥️ Frontend developers

• @iakivpekarskyi
• @anksuunamun
• @DmitriyUshkvarok
• @Wdyffs
• @Gerasko-Vadim
• @FMajesty
• @freecree

🎨 UX/UI designers

• @vilena1me
• @monsoonsiren
• @ilyasgaifullin

📊 Business and system analysts

• @nemeziss
• @anastasiiaerokhina
• @Umk_aa
• @dianarudometova

Let's press F to pay respects to these awesome contributors!

👩‍💼 License

MIT

In other words, you can use the code for private and commercial purposes with an author attribution (by including the original license file or mentioning the Club 🎩).

📞 Contact (Community and Support)

Join our IT community Zufar Explained IT on Telegram.

Feel free to contact us via email: [email protected].

❤️

iced-latte-frontend's Issues

(MAIN PAGE-PRODUCT'S CATALOG) Load list of brands and list of sellers from the backend

Before:
Now List of brands and list of sellers are just hardcoded on the frontend side.

After:
You need to load list of brands and list of sellers from the backend from the appropriate REST API. Check Swagger Docs to find the API.

(PERSONAL ACCOUNT PAGE) Incomplete validation of the email local-part on edit profile page

Pre-conditions:

1. User is logged in
2. The edit profile page is open: https://iced-latte.uk/profile (click "Edit" button)

Step:

1. Enter invalid email on the "Email" field (invalid local-part)
2. Click "Save Changes" button

ER: error message is displayed

AR: system approve invalid email. Invalid email is displayed in user profile

(MAIN PAGE-PRODUCT'S CATALOG) Clickable Product Rating and Product Review Count

Before:
Product Rating and Product Review Count on the product cart are not clickable.

After:
Product Rating and Product Review Count on the product cart are buttons now which enables to redirect to Reviews Section of Product web page.

(PERSONAL ACCOUNT PAGE) Unable to Upload Photo for User Avatar

Priority: Medium

Pre-conditions:
User logged in.

Steps:

1. Open profile page https://iced-latte.uk/profile
2. Click on the "Upload" button
3. Select photo

ER: The selected photo is displayed
AR: Server Error: Unsupported Media Type

(SHOPPING CART PAGE) Total per line price does not change after increase/decrease items

Pre-conditions:

1. At least one product is added to cart
2. Go to shopping cart page

Steps:

1. Click "Plus" button
2. Click "Minus" button

ER:
Total per line price change after increase/decrease items and equal amount * unit price

AR:
Total per line price does not change after increase/decrease items and equal unit price

FR:

Given: I am on a shopping cart with an added product
When: I am decreasing/increasing quantity
Then: Quantity of product changes, summary price change(in line and total in cart)

---

(MAIN PAGE-PRODUCT'S CATALOG) incorrect order of products when sorted by average rating

Before:

1. When sorting with parameters: 'sort_attribute=averageRating&sort_direction=desc' we get a list of products that first contains products with averageRating equal to null.
2. When sorting with parameters: 'sort_attribute=averageRating&sort_direction=asc' we get a list of products that last contains products with averageRating equal to null.

After:

1. Descending order: Products with averageRating equal to null should be the latest.
2. Ascending order: Products with averageRating equal to null should come first.

(PRODUCT PAGE) Incorrect rating and reviews quantity display

Pre-conditions:

1. Product has no reviews
2. Go to product page

ER:
We see the text 'no rating'

AR:
We see an incorrect rating and number of reviews

(AUTH AND REGISTRATION PAGES) Inappropriate Error message when guest is trying to change the password using forgot password

If a guest user (not registered) is trying to reset the password by pressing the “forgot password“ link in gets error message that says “ JWT token is blacklisted“ instead of “"User with email {} doesn't exist"“
in addition there is a front end bug when during the actions described above the user is return to the main page almost instantly.

---

(PRODUCT PAGE) Rating and reviews counter don't refresh after delete review

Pre-conditions:

1. User is logged-in
2. Go to product page that reviewed and rated by user

Steps:

1. Click "Delete my review" button

ER:
Rating and reviews counter on the product card refreshed after delete review

AR:
Rating and reviews counter on the product card don't refresh after delete review

---

---

(MAIN PAGE-PRODUCT'S CATALOG) Weights of the products is not equal on Main Page, Product Page and on Favorites Page

Pre-conditions:
Some products added to Favorites

Steps:

1. Сompare weights on Main Page, Product Page and on Favorites Page

ER: weights is equal

AR: weights is not equal

(PRODUCT PAGE) Product cards on main page become non-clickable after login from product page

Pre-conditions:

1. User is not logged-in
2. Go to main page: https://iced-latte.uk/

Steps:

1. Go to any product page
2. Click header login link
3. Fill email and password fields, click "Login" button
4. Click header main page link
5. Click on any product card

ER:
The corresponding product page opens

AR:
Product card is non-clickable

(SHOPPING CART PAGE) Subtotal in cart does not change after increase/decrease items

Priority: Higth

Pre-conditions:

Steps:
1.Navigate to home page https://iced-latte.uk/ .
2.Chose randomly any product and add to the cart.
3.Navigate to cart and decrease/ increase the product.

ER: Subtotal should change accordingly in moment increasing/decreasing.

AR: Subtotal change only after refresh page.

totalprice_update_only_after_refresh_page.mov

(PERSONAL ACCOUNT PAGE) Incomplete validation of the email domain on edit profile page

Pre-conditions:

1. User is logged in
2. The edit profile page is open: https://iced-latte.uk/profile (click "Edit" button)

Step:

1. Enter invalid email on the "Email" field (invalid domain: all numeric top-level domain name, e.g. [email protected])
2. Click "Save Changes" button

ER: error message is displayed

AR: system approve invalid email. Invalid email is displayed in user profile

---

(SHOPPING CART) Brand and seller names, Product price for the 1 product item.

Before:
Product card has these details:

1. Product photo.
2. Product name.
3. Price for all products in this item.

After:
Product card has these details:

1. Product photo.
2. Product name.
3. Price for all products in this item.
4. Product price for the 1 product item.
5. Product brand name.
6. Product seller name.

(PRODUCT PAGE) The "Delete my review" button does not appear after refreshing the page.

Describe the bug
When the page is refreshed, the "Delete My Review" button disappears.

To Reproduce
Steps to reproduce the behavior:

1. Leave a review for the product
2. Refresh the page

Expected Result
The option to delete your review is available.

Actual Result
After refreshing the page, the delete button disappears.

(MAIN PAGE-HEADER) Add counter to the "favourites" icon and refactor styles.

1. Add counter to the "favourites" icon.

2. Change color and gap between the icon and name of a button.

3. Shift counter on the cart to the right and up.

4. Change the header's container height to 48px.
5. Add shadow to the container and button

(PRODUCT PAGE) The long name of review author overlaps the rating filter block

Pre-conditions:

1. Register user with long first name (e.g. 128 symbols)
2. Go to product page

Steps:

1. Add a review
2. View the name of review author and the ratings filter block

ER:
The first name doesn't overlap the rating filter block

AR:
The first name overlaps the rating filter block

---

(MAIN PAGE-PRODUCT'S CATALOG) New product card

Before:
Product card has these details:

1. Product photo.
2. Product name.
3. Product price.
4. Product rating.
5. Product reviews count.
6. Add to cart button.
   

After:
Product card has these details:

1. Product photo.
2. Product name.
3. Product price.
4. Product rating.
5. Product reviews count.
6. Product brand name.
7. Product seller name.
   

(MAIN PAGE-PRODUCT'S CATALOG) Sidebar Seller Filtering

1. Implement seller filtering in the sidebar on the main page.
2. Add functionality to filter by brand and seller, showing only 5 items by default (if available), with additional options visible upon clicking "Show more" and retractable by "Show less."

(PERSONAL ACCOUNT PAGE) Update User info, Unclear Error Message

Priority: Medium

Pre-condition:
user already register and authenticated.

Steps:

1. Navigate to https://iced-latte.uk/profile.
2. Click the "Edit" button.
3. Refer to the first provided screenshot, enter the data into the respective fields as shown.
4. Click the "Save Changes" button.
5. Refer to the second provided screenshot, adjust the data in the fields as indicated to replicate the second attempt to save changes.
6. Click the "Save Changes" button again.

ER: The application should discard changes that do not meet the specified requirements after each attempt, displaying an appropriate and clear error message that guides the user on how to correct their input.

AR: Application discard changes that do not meet requirements. Error message provided is unclear and does not offer useful information or guidance to the user, as demonstrated in the screenshots.

(PERSONAL ACCOUNT PAGE) Updating user's info. Last name field should accept hyphen and space

Priority: Medium
Pre-condition:
User already register.

Steps:

1. Navigate to https://iced-latte.uk/profile
   2.Click button “Edit“
2. Enter in field 'Last name' name = Bryan Eastin or Bryan - Eastin.
3. Click button “Save Changes“.

ER: update in last name should save.

AR: got input validation error message ‘Invalid Last name format. Use extended Latin letters’ and update was not saved.

FR:

Free text
2-128 symbols
Two types of errors:"Last name is the mandatory attribute"
"Last name should have a length between 2 and 128 characters"

(PRODUCT PAGE) А dot as a decimal separator in the product rating (filter)

Pre-conditions:

1. Go to product page with not empty rating

Steps:

1. View the product rating on the ratings filter block

ER:
А comma as a decimal separator in the product rating

AR:
А dot as a decimal separator in the product rating

(PERSONAL ACCOUNT PAGE) Field First Name accept 1 symbol value on edit profile page

Priority: Medium

Pre-conditions:

User logged in.

Steps:

1. Click “Profile” button

2. Click “Edit” button

3. Enter 1 symbol value in the First Name field

4. Click “Save Changes” button

ER: Error message

AR: 1 symbol value saved in the profile

FR:

2-128 symbols
Two types of errors:
"First name can only contain Latin letters, spaces, and hyphens"
"First name is the mandatory attribute"

Personal Account. Password Change Code Sent to Client by mistake

Description. When the user changes the password in https://iced-latte.uk/profile code is sent to user's email by mistake.

Priority: Medium

Pre-conditions:
User logged in.

Steps:

1. Click "Profile" button
2. Click "Change password" button
3. Enter old password
4. Enter new password
5. Click "Change password" button
6. Click "Return to main page" button

ER: Password change confirmation email
“Dear !
Your password has been successfully changed.”

AR: Received a Confirmation code via email.

(MAIN PAGE-PRODUCT'S CATALOG) Filters labels (as the buttons)

Before:

1. You can see that on the main page (product's catalog) there are filters labels which are just static and not working as buttons.

After:
These Filters labels must work as the buttons. Check our docs. There are our requirements.

Text inconsistency. Should be "confirm registration" instead of "confirm password"

Priority: Low

Pre-conditions:
User is not registered

Steps:

1. Navigate to the registration page. https://iced-latte.uk/auth/registration
2. Fill out the registration form
3. Click the "Register" button.

ER: The user is presented with a message that accurately reflects the current step in the registration process.

AR: The user observe “Confirm Password,” which is misleading and does not align with the expected sequence of registration steps. This text suggests a different action than what should logically follow the initial registration submission, potentially causing confusion.

Different product image in Favorites compared to product page when user is logged in

Priority: Medium

Pre-Conditions:

1. User logged in
2. Product added to the favorites list

Steps:

1. Go to Favorites list

ER: Product information in favorites should match the information on the product page

AR: If the user is logged in, the photo in the favorites does not match the photo in the product card

(AUTH AND REGISTRATION PAGES) Error message contains [{ }]

When registering with a non-unique email, the error format is as follows.

I don't think the user should see brackets and ErrorMessage.

(MAIN PAGE-PRODUCT'S CATALOG) Display Issue: Misaligned "Add to Cart" Button on the Main Page

Description: On the main page, the "Add to Cart" button is displayed incorrectly due to misalignment.

Environment: Chrome, FF, Safari
Steps:

1. Open main page https://iced-latte.uk/
2. Scroll to the end (photo 1)

Environment: Mobile, safari
Steps:

1. Open main page https://iced-latte.uk/
2. Scroll to the "Сhai Latte" (photo 2)
3. Scroll to the end (photo 3)

(FAVOURITES PAGE) The "Favorites" button color in the header does not update when transitioning to the favorites page

Steps:

1. Open main page https://iced-latte.uk/
2. Click on the "Favorites" button in the header

ER: The button color changes
AR: The button color does not change (photo 2)

(MAIN PAGE-PRODUCT'S CATALOG) Filter by Rating and Price

Implement product filtering by rating and price on the main page of the website.

(MAIN PAGE-PRODUCT'S CATALOG) Product Card (Average Rating + Reviews Count)

Before:
Now all the values you see in the product card on the website are hardcoded.

After:
In the product card we need to show the rating and the number of reviews that come from the backend REST API as json as follows:

1. If backend returns product with the average rating of the product as 4,8 and 13 as the number of reviews then on the product card is should look like that 🌟4,8 (13).
   

2. If backend returns product with the average rating of the product as null or 0 and the number of reviews as null or 0 then on the product card is should look like that No rating.
   

(MAIN PAGE-PRODUCT'S CATALOG) Filter Reset and Badge Display

1. Implement a reset of all filters via a "Reset" button.
2. Set up the display of badges for selected filters according to what is chosen in the sidebar.

(PERSONAL ACCOUNT PAGE) Implement new design for user profile

https://www.figma.com/design/8BD1H4T6LjsTP7EVBeEJ24/Coffee-shop?node-id=3996-11079&t=RolawadikXlnshst-0

(PERSONAL ACCOUNT PAGE) Updating user's email is not work

When the user changes the email in the profile, it is not saved. This may be because it needs to be confirmed (BA: required).

Screencast:
https://github.com/Sunagatov/Iced-Latte-Frontend/assets/140279745/95386eda-3f0c-47d9-b65a-53fc88afb4d5

(FAVOURITES PAGE) Button "Log in" is presented on empty favourites page when user is logged-in

Pre-conditions:

1. User is logged-in
2. Favourites list is empty

Steps:

1. Go to favourites page: https://iced-latte.uk/favourites

ER:
Button "Log in" is not presented on the page

AR:
Button "Log in" is presented on the page

---

(MAIN PAGE-PRODUCT'S CATALOG) Some Filters are pinned, some filter have separate scroll

Before:
When you scroll the main page down, there is no web page sections pinned.

After:

1. Red square should be pinned when you scroll the main page down.
2. Blue square should have separate new scroll.

Button of dropdown list "Sort by" is displayed on the Login & Registration Pages

Pre-condition:
User is not logged in

Step:

1. Open Login Page: https://iced-latte.uk/auth/login
2. Go to Registration Page: https://iced-latte.uk/auth/registration

ER: Button of dropdown list "Sort by" is not displayed on the Login & Registration Pages

FR: Button of dropdown list "Sort by" is displayed on the Login & Registration Pages

Non-clickable item in the cart

Priority: Medium

Pre-conditions:

1. User logged in.
2. Product add to cart

Steps:

1. Click on the product item

ER: Opening product page
FR: Item non-clickable

(PRODUCT PAGE) The "See more" button does not work for reviews with 301 or more characters.

To Reproduce
Steps to reproduce the behavior:

1. Set a rating on the rating scale
2. Rewrite reviews with 301 or more characters
3. Click on 'Add a review' button

Expected behavior
After clicking the button "see more", the full review text expands

Actual Result
The button "see more" is inactive

(PRODUCT PAGE) Sorting reviews by rating does not work

Describe the bug
If user write a review and do not refresh the page, the sorting does not work

To Reproduce
Steps to reproduce:

1. Leave a review for a product that already has reviews.
2. Click on any sorting option.

Expected behavior
Reviews are sorted according to the selected sorting criterion

Actual Result
The sorting function is not working

2024-05-25.16.17.44.mov

(PERSONAL ACCOUNT PAGE) Discard changes button not present on page

Priority: Medium

Pre-conditions:

Accordingly to requirements:
button discard change should be on a page  if any changes were done.

Steps:

1. Navigate to https://iced-latte.uk/profile
2. Make any change on personal account and click button Save Changes

ER: should be button Discard Changes.

AR: button Discard Changes is not on a page

1. https://iced-latte.uk/profile

New login and registration page for desktop and mobile

Before:
You can see old login and registration pages.

After:
You need to create new login and registration pages for desktop and mobile.

Steps:

1. Contact our UX/UI designer Kate. Ask her which pages are ready to implement.
2. Implement new login and registration pages for desktop and mobile.
3. Test new login and registration pages for desktop and mobile locally. Be sure that everything works correctly!
4. Create a PR with these changes.
5. Notify your frontend collegues to review your PR.

(PRODUCT PAGE) Statistics with ratings disappears

Pre-conditions:

1. Product has at least 1 review
2. Go to product page

Steps:

1. Select a filter by rating that is not present among the reviews

ER:
Empty review list and statistics with ratings doesn't disappear

AR:
Empty review list but statistics with ratings disappears

(PRODUCT PAGE) А dot as a decimal separator in the product rating

Pre-conditions:

1. Go to product page with not empty rating

Steps:

1. View the product rating

ER:
А comma as a decimal separator in the product rating

AR:
А dot as a decimal separator in the product rating

Layout:

---

Actually:

Two buttons "Add a review" on Product Page.

Describe the bug
Two buttons "Add a review" on the Product Page.

Precondition:
Do not clean the cache and cookies!!!! The user registered and logged in.

Environment:
Google Chrome - Version 124.0.6367.203 (Official Build) (arm64)
HW - Apple M1 Pro

To Reproduce

1. Select a random product on https://iced-latte.uk/
2. Click on the product image - you should see the product page
3. Observe the result

Expected result:
The button "Add a review" should be 1.

Actual result:
Two buttons "Add a review" on the Product Page.

Comment:
You may not be able to reproduce this bug in your environment.
After I clean the browser's cache and cookies I can not reproduce this bug.

Hover effect on add to cart button

Statec og button

Need to remove hover effect from add to cart button in state when at least 1 item was previously added to cart.

(MAIN PAGE-PRODUCT'S CATALOG) Need to fix layout when no products and when one row of products

Bug description
Layout is broken in some cases:

1. When there are only one row of products in list. To reproduce you can set filter by price from 5.9 to 6.1. The part of product card where price and "+" are placed is moving on the bottom of page:
   
2. When there are no products in list sidebar is moving in the center of page, but it should be on its place in the left part of website. To reproduce you can set filter by price from 6 to 6.1.
   

(SHOPPING CART PAGE) Cart Page. Buttons "Plus" and "Minus" are not wrapped in tags <button>

Pre-conditions:
Shopping cart is not empty

Step:

1. Go to Cart Page: https://iced-latte.uk/cart
2. Look at the page code (buttons "Plus" and "Minus")

ER: Buttons "Plus" and "Minus" are wrapped in tags <button>

AR: Buttons "Plus" and "Minus" aren't wrapped in tags <button>

Note: Selenium Webdriver don't work with buttons that don't have tags <button>