AniWiki is a sleek and responsive anime & manga wiki built with React and powered by the AniList GraphQL API.
Tech Stack:
- Frontend: Vite, React, TailwindCSS, Typescript, React Router
- Backend: Apollo Client
- Data Source: AniList GraphQL API
The Challenge:
This project served as an opportunity to demonstrate my ability to work with GraphQL APIs, even if they have their initial learning curve.
Overcoming Obstacles:
- Routing: React Router became the hero, preventing unnecessary re-renders and promoting seamless navigation. Hyperlinks were out!
- Design & Layout: Dribbble and Youtube provided inspiration to turn initial spaghetti code into a visually appealing layout.
- Color Scheme: While drawn to a black & white aesthetic, the abundance of images demanded a compromise. A dynamic, dimmed wallpaper brought balance.
Conquering Quirks:
- Deployment: HashRouter replaced BrowserRouter to appease Github Pages, along with a base URL adjustment in the Vite config.
- Browser Compatibility: Chrome's occasional CSS hiccups (remember, I'm a Firefox user!) were patiently addressed.
Gallery
-
Media Page
-
Browsing
-
Searching
-
Also made it responsive
The Takeaway:
This project, while initially dry for portfolio purposes, showcases my problem-solving skills and ability to build engaging user experiences.