Find all your
favorite
Pokemon
You can know the type of Pokemon, its strengths, disadvantages and abilities.
Already a trainer? Sign in here
Beware of Team Rocket — they're always watching.
Built with
Next.js 14
App Router · Server & Client Components
Drupal
Headless CMS · REST API & JSON:API
TypeScript
End-to-end type safety
Tailwind CSS
Utility-first responsive styling
NextAuth.js
OAuth 2.0 client credentials flow
Vercel
Analytics & Speed Insights
What this project demonstrates
Drupal as a Headless CMS
Consumes Drupal JSON:API for detail pages with relationship includes, keeping the frontend fully decoupled.
OAuth 2.0 Client Credentials
The Next.js backend exchanges client credentials with Drupal's Simple OAuth server and forwards the bearer token on every API call — secrets never reach the browser.
Hybrid Rendering
The Pokédex list is server-rendered on first load for instant content, then switches to client-side fetch for pagination and filtering without a full page reload.
REST API Integration
Typed API client fetches and normalises Drupal JSON:API responses into clean TypeScript models.
Responsive Design
Mobile-first Tailwind CSS layout with Pokémon-themed colour palette.
Token Refresh Flow
Access tokens are transparently refreshed via NextAuth callbacks so sessions stay alive without user interruption.