https://github.com/moovweb/react-perf-exercise
https://github.com/moovweb/react-perf-exercise
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/moovweb/react-perf-exercise
- Owner: moovweb
- Created: 2019-09-04T10:11:36.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-07-11T04:05:36.000Z (almost 3 years ago)
- Last Synced: 2025-04-14T13:17:14.698Z (about 1 year ago)
- Language: JavaScript
- Size: 664 KB
- Stars: 0
- Watchers: 5
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Performance Exercise
This overly simple clothing store app based on next.js consists of two pages:
- `/` - A list of products
- `/product/[productId]` - View a single product
## Getting Up and Running
First, download (don't clone) the repo and run:
```
cd react-perf-exercise
yarn
```
To run the app locally:
```
yarn dev
```
## Exercise Overview
There are numerous performance problems in this app that could be fixed:
- How can you improve the lighthouse performance score for the [product listing page](http://localhost:3000)?
- Changing colors on the [product listing page](http://localhost:3000) could be faster. You can see a noticeable delay if you apply 6x slowdown to your CPU using chrome developer tools. How can you improve this?
- [Product pages](http://localhost:3000/product/1) load quite slowly. This is due to an artifical delay in `pages/api/product.js` meant to simulate a slow API. Assume you can't improve the speed of the API. How can you make the transition from the listing page to the product page feel faster?
## Submitting your Solution
- Upload your solution to a new GitHub repository.
- We will review your solution over Zoom at the end of the two hours.