Skip to content

Discover the best music albums on iTunes around the globe.

Notifications You must be signed in to change notification settings

jsardev/topmusic

Repository files navigation

topmusic

A showcase application built with React and it's ecosystem. Powered by a simple RSS iTunes API.

Live demo

How to use

Run in development mode

pnpm install
pnpm dev

Run tests

pnpm test

Design

I took some time to create a full design and mockup of the application. I found that starting with Figma results in better end products as you spend more time thinking about and focusing on good design and user experience. It's also a lot easier later on to work on the actual implementation having mockups and design tokens ready to use.

Figma

Technology

Following libraries and technologies were used in this project:

Rationale

UnoCSS

I love TailwindCSS and the Utility CSS approach in general. Although I know Tailwind already and could be probably pretty fast with it, I did recently stumble upon UnoCSS which seemed like a very interesting alternative that provides a lot of improvements to the table. Because it's fully compatible with the Tailwind API, I decided to give it a try and learn something new.

Assets

Icons have been taken from an open-source project called Lucide. Integrated easily with the brilliant UnoCSS icons preset.

Architecture

The codebase architecture is inspired by a few resources found in the web:

It does not stricly follow any of those suggestions, but is mostly inspired by the FSD folder structures and tries to follow SOLID, implements a bit of the hexagonal architecture from DDD and generally focuses on Low Coupling, High Cohesion rule.

Note: Due to small amount of time to finish up the project properly, there are some shortcomings which I'd like to fix when it will be possible.

Shortcomings / Todo List

As this project was supposed to be a production-ready solution, I wanted to point out what's missing and what I have in my head as a todo list to potentially make it happen:

Unit tests

There are a lot of places where unit tests are lacking - mostly in some of the container-like React components that have some kind of logic in it. I tried to handle all the domain-related logic, but as time became very short to me, I decided to ship features instead of learning how to properly test Recoil atoms/selectors/effects which is not so trivial.

End-to-end tests

I wanted to create end-to-end tests using Cypress but didn't have enough time.

SEO / Semantic HTML

To be honest, when time got short I started to spam div's wherever I could. There are certainly some places for improvement.

UI / UX

There are a few problems and places which could be improved:

  • accessibility
  • keyboard navigation
  • layout shifts (mostly when on scroll show/hide)

Continuous integration / Continuous deployment

I wanted to create some basic build/test/lint/typecheck GitHub Actions that could check stuff every commit without the need to do it locally.

Developer tooling

There's only some simple linting and an autoformatter. It would be great to add some precommit hooks to automate things out and some additional eslint rules e.g. for cleaning up imports (and creating module boundaries).