https://github.com/tabrezmz/rick-morty-explore
A modern, responsive Rick & Morty character explorer built with React, Redux Toolkit, and Vite — complete with filtering, pagination, dark mode, and more!
https://github.com/tabrezmz/rick-morty-explore
css javascript live reactjs responsive-design testing web
Last synced: about 2 months ago
JSON representation
A modern, responsive Rick & Morty character explorer built with React, Redux Toolkit, and Vite — complete with filtering, pagination, dark mode, and more!
- Host: GitHub
- URL: https://github.com/tabrezmz/rick-morty-explore
- Owner: TabrezMZ
- Created: 2025-07-11T05:03:21.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-07-11T16:29:18.000Z (12 months ago)
- Last Synced: 2025-07-11T17:36:39.979Z (12 months ago)
- Topics: css, javascript, live, reactjs, responsive-design, testing, web
- Language: JavaScript
- Homepage: https://rnmexplore.netlify.app/
- Size: 107 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌀 Rick & Morty Wiki — React App
A modern, responsive Rick & Morty character explorer built with **React**, **Redux Toolkit**, and **Vite** — complete with filtering, pagination, dark mode, and more!
> 🔍 Search, filter, explore characters by name, gender, status, species, location, and episodes — all in real-time.
---
## 🌐 Live Demo
🚀 [Click here to open the live site](https://rnmexplore.netlify.app)
---
## 📸 Screenshots
### 🖥️ Desktop View
### 📱 Mobile View
---
## ✨ Features
- ✅ Full character listing
- ✅ Filter by name, gender, species, status, type
- ✅ Filter by location and episode (cross-page filtering)
- ✅ Character details page
- ✅ Location & episode pages
- ✅ Responsive grid layout
- ✅ Pagination (`1, 2, 3 ... 42`)
- ✅ Theme toggle (light/dark)
- ✅ Hamburger menu for mobile nav
- ✅ Debounced search input
- ✅ Attractive card animations
- ✅ Magical animated background (CSS-only)
- ✅ Reusable UI components
- ✅ Clean folder structure and modular state management
---
## 🔧 Tech Stack
| Technology | Use |
|------------------|----------------------------------|
| React + Vite | Fast front-end framework |
| Redux Toolkit | State management & RTK Query |
| React Router | Client-side routing |
| Vanilla CSS | Custom responsive styling |
---
## 🛠️ Local Setup
### 1. Clone the Repo
```bash
git clone https://github.com/TabrezMZ/rick-morty-explore.git
cd rick-and-morty-wiki
npm install
npm run dev
```
Open: http://localhost:5173
## 📁 Folder Structure
- `src/`
- `components/` – Reusable UI components
- `features/` – Redux slices and RTK Query API endpoints
- `pages/` – Route-based screens (Characters, Episodes, Locations, Detail)
- `styles/` – All custom CSS files
- `assets/` – Static assets like icons and images
- `App.jsx` – Main App wrapper
- `main.jsx` – App entry point
---
## 💡 Design Highlights
- 🌈 **Magical animated background** using pure CSS (no libraries)
- 🧊 **Glassmorphic card design** with soft shadows and hover animation
- 📱 **Responsive layout** for desktop and mobile
- 🎨 **Color palette:**
- 🌓 **Theme toggle** — dark/light mode switching
---
## 🤝 Acknowledgments
- Thanks to the [Rick & Morty API](https://rickandmortyapi.com/) for providing such an awesome and free API.
- Designed with accessibility and responsiveness in mind.
---
## 📬 Contact
> Developed with ❤️ by **Tabrez Mansuri**
- 🐙 GitHub: [@tabrezMZ](https://github.com/TabrezMZ)
https://github.com/user-attachments/assets/7db12ef0-9bcf-457a-954e-63453e0b19bc