What is this?
In the homepage we face a list of tv shows from TVMaze.
The best API I found for this is /shows
which sadly doesn't give us total count or total pages. Because of that I set it to 10.
Each show has it's dedicated page located under /show/:id
.
This a the detail page and contains additional info about the show.
You can visit the search page via clicking the search icon (of course :))).
Key Features
- I tried to use modern syntax, features and tools:
- CSS Nesting pollyfilled with postcss.
- Vue SFC's
script setup
- Vue experimental
Suspense
and top levelawait
- Modern front-end tooling: Vite, Vitest, TailwindCSS, TypeScript, Testing Library
- Search query is synced with query and it will be debounced.
- Pages other than index will be lazy loaded on demand.
- Leverages semantic markup and accessibility hints
- Dark Mode Support
- Mobile Friendly
- Minimal UI Design
I gathered a couple of svg icons to improve the terrible ui a little bit.
Testing
In this project I've used vitest, testing library and jest-dom for testing.
Sadly i didn't have time to add more test suits.
Project Setup
You can use npm or yarn for following commands.
pnpm install
Compile and Hot-Reload for Development
pnpm dev
Type-Check, Compile and Minify for Production
pnpm build
Vitest
Run Unit Tests withpnpm test:unit
ESLint
Lint withpnpm lint