A professional frontend showcase project built to demonstrate mastery in modern web development.
This application leverages the Rick and Morty API to provide a rich and interactive experience for exploring characters, locations, and episodes from the multiverse.
This project was developed as a comprehensive practice ground for frontend engineering, focusing on:
- UI Architecture: Crafting a scalable and reusable component system.
- Advanced State Management: Handling complex search, filtering, and pagination logic.
- API Orchestration: Building robust services for data fetching and error handling.
- Modern Tech Stack: Implementing the latest features of Next.js 15.
- SEO-Friendly Routing: Managing filters and pagination through URL-based state.
-
🔍 Dynamic Multiverse Search
Real-time search functionality across characters, locations, and episodes. -
🎭 Advanced Filtering
Multi-criteria filters such as status, gender, and species to narrow down character results. -
📱 Responsive Design
A mobile-first approach that ensures a seamless experience across desktop, tablet, and mobile devices. -
⚡ Server-Side Excellence
Optimized performance using Next.js 15 App Router and Server Components. -
🎨 Interactive UI
Smooth transitions and polished components powered by Material UI (MUI) v7. -
🎲 Random Character Portal
A “surprise me” feature that allows users to discover random characters from the series.
| Category | Technology |
|---|---|
| Framework | Next.js 15 App Router |
| Library | React 19 |
| UI Framework | Material UI (MUI) v7 |
| Language | TypeScript |
| Data Fetching | Native Fetch API |
| API | Rick and Morty REST API |
| Styling | Emotion & CSS Modules |
| State Management | URL-based state for filters and pagination |
src/
├── app/ # Routing layer using Next.js App Router
└── lib/
├── components/ # Reusable UI atoms and molecules
├── pages/ # Page-specific business logic and layout
├── services/ # API integration and data fetching
├── styles/ # Theme configuration and global styles
└── utils/ # Helper functions