Yokatta is a sleek and modern web app for discovering, tracking, and exploring manga. Built with the latest front‑end stack, it delivers a seamless user experience for browsing a vast manga library — powered by the public Jikan API
A portfolio project demonstrating practical skills in building a feature‑rich, data‑driven application using a modern web stack. Designed to offer manga enthusiasts a clean, intuitive, and responsive interface for discovering and managing manga.
- 🔍 Dynamic Discovery — Browse paginated lists of top-ranked and popular manga.
- 🎯 Advanced Genre Filtering — Multi-select genres with search; sensitive genres hidden by default.
- 🔎 Site-Wide Search — Quick manga lookup across the entire database.
- 📌 Persistent Bookmarking — Save favorites using
localStoragefor session persistence. - 📚 Manga Detail View — View cover art, synopsis, genres, and dynamic chapter list.
- 📱 Responsive Design — Optimized for mobile, tablet, and desktop.
- Framework: Next.js (v15, App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- API: Jikan API
- State Management: React Hooks (
useState,useEffect,useCallback) - Client Storage:
localStorage - Deployment: Vercel
- Node.js 18.x or later
- npm
git clone https://github.com/your-username/yokatta.git
cd yokatta
npm install
npm run devOpen http://localhost:3000 in your browser to view the app.
- Many thanks to the Jikan API team for powering this application with comprehensive manga data.