Rick and Morty Fun Page

This is a vibrant and interactive Rick and Morty-themed web page built with Next.js 14. The site features a unique design with search functionality across characters, locations, and episodes, as well as filtering options for characters by status, species, and gender. This project showcases fun animations, dynamic filtering, and interactive elements to enhance user experience.

Features

• Original Design: Enjoy a custom design that brings the world of Rick and Morty to life.

• Drag-and-Drop on Home Page: Character images on the main page can be dragged across the screen for a playful interaction.

• Search and Filtering: Filter characters by status, species, and gender, or search across characters, locations, and episodes for a specific query.

• Burger Menu for Mobile: Animated burger menu for smooth navigation on mobile devices.

• Animated WebM Video: A WebM video animation on the Locations page that plays during page load and repeats every minute.

• Pagination: Pagination for Characters, Episodes, and Locations pages.

• Detailed Character, Episode, and Location Pages: Each item has a dedicated page with detailed attributes and characteristics.

• Button and Image Effects: Home page arrow buttons and character images on individual pages use clip-path for creative effects.

Technical info

• App Routing: Uses Next.js 14's app routing for organized and efficient navigation

• API Data Fetching on Server: All data is fetched server-side, providing enhanced SEO and performance by reducing client-side load times.

• Local Storage: Persistent state management for retaining user data.

• Responsive Design: Fully adaptive and responsive layout that adjusts to all screen types.

• Custom Hooks: Reusable custom hooks encapsulate main logic, simplifying components and enhancing code readability.

• Grouped Category Pages: Organized layout for category pages, sharing a unified layout for consistency and simplicity.

Stack:

• Next.js 14
• TypeScript
• Redux Toolkit
• Framer Motion
• Tailwind CSS

Installation and Setup

To run the project locally, follow these steps:

1. Clone the repository:

git clone https://github.com/iyehorova/nextjs_rick_and_morty.git
cd nextjs_rick_and_morty

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Build for production:

npm run build

5. Start production server:

npm run start

License

This project is open-source and available under the MIT License.