Rick and Morty API React.JS

This application is your gateway to the Rick and Morty universe! It's like having a digital encyclopedia of all the characters from the show. You can search for your favorite characters by name, browse through different pages to discover new ones, and view detailed information about each character including their species, status, and origin. Whether you're a casual fan or a die-hard Rick and Morty enthusiast, this app makes it fun and easy to explore the vast cast of characters from the series.

Architecture & Technology Stack

This Rick and Morty Character Explorer showcases modern React development patterns and best practices:

• Framework: React 18+ with functional components and hooks
• State Management: Centralized state pattern using useState and useEffect hooks
• API Integration: REST API consumption from the official Rick and Morty API
• Styling: Bootstrap 5 for responsive design with custom SCSS for enhanced styling
• Build System: Create React App for streamlined development and production builds
• Component Architecture: Modular component design with clear separation of concerns

Key Features

• Centralized State Management: All application state managed in App.js with props drilling pattern
• Real-time Search: Dynamic character filtering with API integration
• Smart Pagination: Circular navigation with intelligent page display
• Responsive Design: Mobile-first approach using Bootstrap's grid system
• Component-Based Architecture: Six distinct components each with specific responsibilities
• Error Handling: Robust error management for API calls

Component Architecture

1. App.js - Main container managing state (list, page, totalPage, search) and API integration
2. Header.js - Static title component with custom SCSS styling
3. Hero.js - Search input component handling search functionality
4. Nav.js - Pagination component with Previous/Next and numbered page buttons
5. List.js - Grid container for character cards using Bootstrap layout
6. Card.js - Individual character display with character details

API Integration Pattern

• Endpoint: Rick and Morty API (https://rickandmortyapi.com/api/character/)
• Parameters: Supports pagination (?page=${page}) and search (?name=${search})
• Response Structure: { results: [], info: { pages: number } }
• State Dependencies: useEffect with [page, search] dependency array