A showcase application built with React and it's ecosystem. Powered by a simple RSS iTunes API.
pnpm install
pnpm devpnpm testI 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.
Following libraries and technologies were used in this project:
- React - UI Library
- React Router - Routing
- Recoil - State Management + Data Fetching
- UnoCSS - CSS Framework
- Ky - HTTP Client
- Fuse.js - Fuzzy search
- Localforage - Offline storage
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.
Icons have been taken from an open-source project called Lucide. Integrated easily with the brilliant UnoCSS icons preset.
The codebase architecture is inspired by a few resources found in the web:
- Feature-Sliced Design
- Khalil Stemmler - Client-Side Architecture
- Juan Otálora - Folder structure in a React hexagonal architecture
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.
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:
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.
I wanted to create end-to-end tests using Cypress but didn't have enough time.
To be honest, when time got short I started to spam div's wherever I could. There are certainly some places for improvement.
There are a few problems and places which could be improved:
- accessibility
- keyboard navigation
- layout shifts (mostly when on scroll show/hide)
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.
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).