This project is about the launch of the new game from Mihoyo: Honkai Star Rail, and it was made to improve my skills in clean architecture, clean code, unitary tests, design pattern, storybook and accessibility.
The application is quite simple, showing some data of my favorite characters of the game until now. It is responsive and have a modern design, with some cool effects made with TailwindCSS and HeadlessUI.
All rules of clean architecture was respected and tested, as you see in the image and table below:
| Statements | Branches | Functions | Lines |
|---|---|---|---|
 |
 |
 |
 |
- React
- TypeScript
- Vite
- TailwindCSS
- Jest
- Testing Library
- Eslint
- Prettier
- Commit Lint
- Husky
- Axios
- React Query
- Storybook
- HeadlessUI
- Vite Plugin PWA
- Vercel
- Alias
- PWA
- Coverage Badges
- Pre-commit
- Documenting Components w/ Storybook
- Deploy Platform
- Deploy Storybook
This project was very concerned with accessibility, taking care of issues such as: color contrast, screen readers, semantic html, gesture navigation, etc... And as you can see in the images below, everything is in accordance with the rules WCAG 2.1:
Access Monitor:
Wave:
Google Lighthouse:
Everything was made with TailwindCSS, Headless UI and documented with Storybook. It is simple, but modern and responsive. Take a closer look:
The project is finished! Click here and test it!
Made with ❤️ by me