Go to demo

How to run

yarn install
yarn dev

Then go to http://localhost:3000 in the browser

Objective

Create a website that displays Top 100 albums chart in a modern and sleek manner.

Design references

• Color theme reference
• Main colors: white(#fefcfe), gray(#beb9bc), mint(#739c8f)

To-dos

• Analyse JSON api structure
• Draw out simple layout mockups (in paper)
• Decide on a design concept/color theme
• List out to-dos

---

• Create next app
• Enable TypeScript
• Add tailwindcss for styling
• Create basic page/component structure
• Implement <AlbumThumbnail>
• Add swr for caching/data-depulication of fetched data
• Add axios
• Create useTop100Chart swr hook and use it
• Implement /albums/[rank] page
• Create useAlbum(rank) swr hook and use it
• Implement several sort options
• Implement searching
• Implement navbar

---

• Make container responsive
• Add custom colors
• Apply style to <Top100Chart>
• Apply style to <AlbumThumbnail>
• Apply style to <SortOption>
• Apply style to <SearchBar>
• Apply style to /albums/[rank] page

---

• Add hover to <AlbumThumbnail> style

Used libraries

• tailwindcss
• swr
• axios
• moment