Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mahdi-q/movie-character-app-project
A web application for searching about Rick and Morty movie characters, developed using the React.js library
https://github.com/mahdi-q/movie-character-app-project
movie-character rick-and-morty rick-and-morty-api web-app web-application
Last synced: 1 day ago
JSON representation
A web application for searching about Rick and Morty movie characters, developed using the React.js library
- Host: GitHub
- URL: https://github.com/mahdi-q/movie-character-app-project
- Owner: mahdi-q
- Created: 2024-07-21T07:30:43.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2024-07-31T15:32:10.000Z (4 months ago)
- Last Synced: 2024-08-01T19:57:06.207Z (4 months ago)
- Topics: movie-character, rick-and-morty, rick-and-morty-api, web-app, web-application
- Language: JavaScript
- Homepage:
- Size: 57.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Movie Character App Project
A web application for searching about Rick and Morty movie characters, developed using the React.js library.
## Table of Contents
- [Installation](#installation)
- [Features](#features)
- [Key Concepts](#key-concepts)
- [Packages](#packages)
- [Acknowledgements](#acknowledgements)
- [Contact Information](#contact-information)
## Installation
### Prerequisites
- Node.js and npm should be installed on your machine.
### Steps
1. Clone the repository:
```bash
git clone https://github.com/mahdi-q/Movie-Character-App-Project.git
```
2. Navigate to the project directory:
```bash
cd Movie-Character-App-Project
```
3. Install the dependencies:
```bash
npm install
```
4. Run the app:
```bash
npm run dev
```
5. Click on the link provided in the terminal to open the app in your browser.
## Features
- **Search Characters**
- **Add Characters to Favourite List**
- **Delete Characters from Favourite List**
- **Sort Character Episodes based on Date**
## Key Concepts
This project explores several important concepts from the React library and JS:
- **Fetching API with Axios**: Retrieve data from an external API using the Axios library.
- **Event Handler Function**: Handle user interactions and events in React.
- **useEffect Hook**: Manage side effects in functional components using the useEffect hook.
- **Clean Up Data Fetching**: Properly cancel API requests and clean up resources.
- **Local Storage**: Store and retrieve data in the browser's local storage.
- **Custom Hook**: Reusable function that encapsulates logic using hooks.
## Packages
Packages used in this project:
- **heroicons**: A set of free, MIT-licensed high-quality SVG icons.
- **axios**: A promise-based HTTP client for making API requests.
- **react-dom**: Manages the DOM rendering for React applications.
- **react-hot-toast**: Provides easy and customizable toast notifications in React.
## Acknowledgements
Special thanks to the [Rick and Morty API](https://rickandmortyapi.com/) for providing the data used in this project. This free and open API made it possible to integrate and explore the fascinating universe of Rick and Morty.
## Contact Information
For any questions or feedback, please contact me at [[email protected]](mailto:[email protected]).
---
Thank you for using the Movie Character App!