Use this issue to collect the mocks of various screens.

It's a good idea to collect the mocks within the context of a user stories. For example,

• How many number of distinct pages do you have?
• What are the user actions?
• In how many steps does he / she achieve it? What action items have to clicked?
• What screens they have to go through?

You can use tools like Figma (recommended) or other wire-framing tools like Balsamiq.

Ensure that you also know at least these things (you can always list more things)

• Application Layout Structure
• CSS / React Layout Library
• Icon Sets
• Color Scheme
• Theme

Feel free to consult older projects listed in the Little Tags Notion page.

If you have questions, comment on this issue.

Your front-end (and later, the backend part as well) part of the project will be given a Pesto badge upon completion and during the final presentation. The final presentation date is (tentatively) 15th March 2021 8:00pm IST. The badge can be Gold, Silver, or Bronze.

The projects with Gold badge have been found to get substantially more interview requests than other badges.

Please refer to this Notion page for more information. Keep referring to this document to ensure that you comply with all the hard and soft requirements.

Comment on this thread below if there is any confusion with regard to this issue.

Instructions

In this issue, you are going to benchmark your website for performance using a couple of tools. The metrics generated by the tools can be used to focus your efforts towards the most affected areas. The metrics and whether they measure real-world user-based performance are subject to some debate. However, we are going to assume for now that the metrics generated by these tools are reliable.

The idea is to optimize metrics that are low.

Requirements

• Benchmark your website using the Chrome's Lighthouse developer tool. Screenshot the results and comment below.
  • Score of 95-100 in all categories is considered good.
• Benchmark your website using PageSpeed Insights Screenshot the results and comment below.
  • What's the difference between PageSpeed and Lighthouse?
• What's the web vitals? Report your times as comments below.
• Benchmark your website using WebPageTest. Screenshot the relevant results and comment below.
  • The device config to select is the default one and Moto G4 - Chrome

Resources

• How To Use WebPageTest and its API
• Google PageSpeed Insights: The Truth About Scoring 100/100
• Recipes for Performance Testing Single Page Applications in WebPageTest
• React Performance Improvements
• Google Lighthouse Performance Audits

Fix the colour and padding issue in Search bar placeholder text:

Instructions

As per your mocks, implement the landing page and deploy it. The products / cart / wishlist buttons do not have to work as of now. Just the landing page (+ some other things) are required. Here's a list of concrete requirements.

Requirements

• Landing Page (as per the mocks)
  • Desktop version
  • Mobile version
• Login / Signup Modal or individual page.
• Internationalization Support. There should be a way to change the language and see (at the very least) different texts for the words "login" and "signup".
  (If both you and your partner do not speak a second language, you can use Spanish as a second language. You can verify the translations with me.)

Once you are done with the implementations, paste screenshots of your actual running websites with your mocks side by side (like this) in a comment. The left side is will be your mock, and the right side will be your actual implementation. Ensure that the resolutions of both the parts are same (or similar) to help with faster comparison.

Resources

• For creating custom flex layouts: Link
• Book Responsive Web Design by Ethan Marcotte. You can find this book somewhere on the internet. You can search for it. Ethan coined the term and create "responsive design" patterns. This book (under 200 pages) is a great read for understanding what responsiveness means. You can buy it as well if you like it. Link
• React Internationalization. Slightly old but still a comprehensive starter resource: Link
• React Internationalization using a different library (react-i18next). Link
• Try to use the Intl Web API for rendering the prices, plurals, etc.

Pro tip: You can create multiple PRs that closes the same issue. There doesn't have to be one-to-one relationship between an issue and a PR. So feel free to open multiple PRs against this issue.

Comment on this issue if you need help with anything.

Instructions

As per your mocks, you have to implement the following. As mentioned in the one of the previous issues, feel free to mock any data that you need. You can use Faker.js or you can just copy a few product's info from Amazon / Myntra / Flipkart.

Cart System

The user should be able to do at least the following operations. (apart from anything of your own features)

• Add items to the cart
• Change quantities of an item
• Remove an item from the cart
• See total price (with or without discounts)
• Clicking on "Buy" or any other action button should take your to the "Product Ordering Flow"

Product Ordering Flow

The user should be able to do at least the following operations. (apart from anything of your own features)

• The user should be able to select a previously saved address. (You can hard-code a few addresses for now)
• The user should be able to new addresses.
• The user should see a payment method.
• The user should see a small summary of the cart.
• Upon clicking the required action button (for e.g Continue Payment), the user should see a ordered successfully.

Orders history page

The user should be able to do at least the following operations. (apart from anything of your own features)

• The user should be able to see previous orders. (You can hard-code a few addresses for now)
• The Orders should have a button / link for invoice. Clicking that should generate a PDF invoice of the order.
• Try to paginate the order history. That is, don't show more than 3 items in one page.

Wishlist

The user should be able to do at least the following operations. (apart from anything of your own features)

• Add a product to the wishlist
• See all the products in Wishlist
• From the wishlist, add the product to the cart

More E2E tests.

• Write an E2E tests for each of the flow the user can make.

Resources

• HTML to PDF

Comment on this thread if there is any confusion with the requirements.

Initialize the application with Create React App or any other tool of your choice.

Once you've initialized, you should deploy your application to Netlify to ensure that it's deployed.

For now, you can just say, "Hello, world!" and deploy.

After deployment, ensure that you've added the deployed link in the "About section" of the repo.

Go to Deep Dive and checkout all the previous project.

Start commenting all the features that your application should have. Please be descriptive about what exactly you want your app to have and what purpose it will serve.

Feel free to discuss your ideas with your partner in this issue itself.

The final comment should list out the final features.

At the minimum, you should have features listed in Little Tags project.

This and the next issue (the one that will be asking for the mocks) will have to thought in tandem.

If you have questions, comment on this issue.

Instructions

As per your mocks, start implementing the product search feature, categories page, and the single product page itself. More info is provided below.

Where will I get data to render?

If the fakestoreapi is not helpful, feel free to mock the data by creating a JSON file with any relevant data yourself. The only thing you need to be careful is that you should fix the shape of the data and assume that this data was coming from the server itself. This way, once you have the server ready, you can just change the source. I agree that there will be front-end changes when the app is paired with the server, but hopefully they should be minimal if the shape is consistent.

Also, remember that any API can and will fail. So take the error cases into account as well.

Requirements

Product Search Feature

When the user starts typing a product, you should show an autocomplete results box (or page if that's what your mock has) with the results. User should be able to tab through the results. Other natural keyboard buttons should also work.

Categories Page

The product display should have price, product name and rating at the very least. There should also be a "Add to cart" button (this doesn't have to work). The user should be able to filter the product set with a few things of your choosing. Also, the user should be able to sort the set based on some criteria (such as price, rating etc.)

Single Product Page

The page should show the price, description (if any), rating, images, quantity, add to cart, add to wishlist etc.

Feel free to add more things on these pages if they are present in your mocks.

Checklist of requirement

• Autocomplete Product Search Feature
  • Render correct outputs
  • Has Autocomplete
  • Tab Accessible
  • Mobile Responsive
• Categories Page
  • Mobile Responsive
  • Left side bar with filters
  • Sort the product set (for e.g. on the basis of price)
  • Tab Accessible
• Product Page
  • Mobile Responsive
  • All relevant details are visible
  • Tab Accessible
• Routes should change upon going to different screens
• At least 2 End to End test (see resources)
• i18n should continue to work
• Should not have regression bugs

Resources

• List of Autocomplete libs
• Accessibility in React
• Read this before proceeding with E2E testing. Use puppeteer.js or Cypress (make a choice and comment it below) to make at least two E2E tests for your application. Try to do this at the end of the making the search, product, and product feature. Here's a tutorial for using Cypress with React. Here are two articles for puppeteer: 1 and 2

Need help?

Comment on this thread if there is any confusion with the requirements. Try to follow your mocks. Don't drastically change things until needed. Minor modifications are allowed.

The width of the Login drawer is getting varied while accessing it for the first time and after switching to new user tab.

Login drawer view:

New User modal view:

The above screens are at a different width.