Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kidd254/rick-morty
Rick & Morty app is an app that is meant to display a list of characters, their residents and other details relevant to them. The app makes use of Rick & Morty API to retrieve relevant data for the app
https://github.com/kidd254/rick-morty
axios bootstrap5 browser-router-dom client-side-rendering components css3 javascript react-redux-toolkit reactjs state-management
Last synced: 22 days ago
JSON representation
Rick & Morty app is an app that is meant to display a list of characters, their residents and other details relevant to them. The app makes use of Rick & Morty API to retrieve relevant data for the app
- Host: GitHub
- URL: https://github.com/kidd254/rick-morty
- Owner: Kidd254
- License: mit
- Created: 2024-02-25T09:17:42.000Z (10 months ago)
- Default Branch: dev
- Last Pushed: 2024-03-04T09:01:29.000Z (10 months ago)
- Last Synced: 2024-10-23T13:15:50.188Z (2 months ago)
- Topics: axios, bootstrap5, browser-router-dom, client-side-rendering, components, css3, javascript, react-redux-toolkit, reactjs, state-management
- Language: JavaScript
- Homepage: https://rick-and-morty-7d94.onrender.com/
- Size: 2.58 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 📗 Table of Contents
- [📖 About the Project](#about-project)
- [🛠 Built With](#built-with)
- [Tech Stack](#tech-stack)
- [Key Features](#key-features)
- [🚀 Live Demo](#live-demo)
- [💻 Getting Started](#getting-started)
- [Setup](#setup)
- [Prerequisites](#prerequisites)
- [Install](#install)
- [Usage](#usage)
- [Run tests](#run-tests)
- [👥 Authors](#authors)
- [🔭 Future Features](#future-features)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [📝 License](#license)
> This React app retrieves information about locations and their residents from the Rick and Morty API. It provides search/filter functionality, displays location details, and allows users to view resident information, along with the ability to add notes about a character.
Client
- HTML
- CSS
-
Bootstrap Utilized for basic styling and responsive layout. -
React.js Used for building the user interface with a component-based architecture. -
React/Redux Implemented for state management, especially for handling asynchronous data fetching.
- [x] Set up the project using (CRA) create-react-app👍.
- [x] Remove the boilerplate from the project after setting up💯.
- [x] Install Redux-toolkit and configure
- [x] Install bootstrap package and configure
- [a link to the online version](https://rick-and-morty-7d94.onrender.com/)
- [a link to a presentation about this project] ()
To create the up, follow these steps.
### Prerequisites
In order to run this project you need to have the following installed;
- Node.js
- npm
You also need to have a basic understanding of React JS, Redux and bootstrap.
### Setup
Set up the project using (CRA) create-react-app to your desired folder👍 (rick_morty folder)
```sh
npx create-react-app rick_morty
cd rick_morty
npm start
```
This will start the application in development mode. You can now open the application in your browser by navigating to `http://localhost:3000`.
### Install
Install the neccesary packages:
```sh
npm install @reduxjs/toolkit bootstrap axios react-router-dom
```
### Setting up Redux
- Create listSlice to retrieve location data and add the reducers to store.js.
- Create residentsSlice to fetch resident data and add the reducers to store.js.
= Create detailsSlice to get resident details and add to store.js
```sh
```
### Setting up Components
- Create the main component (List.jsx) to display resident details and locations.
- Develop a details component (ResidentDetails.jsx) to display details for a specific resident.
- Implement a note component (NoteForm.jsx) to enable users to add notes.
```sh
npm start
```
### Setting up Assets
- add relevant assets (fonts, custom styles, and images)
### Setting up Layout
-Create a layout file to define the structure of the main wireframe.
```sh
import PropTypes from 'prop-types';
const Layout = ({ children }) => (
<>
{children}
>
);
Layout.propTypes = {
children: PropTypes.node.isRequired,
};
export default Layout;
```
### Run tests
To run tests for the linter, run the following command:
```sh
npx hint .
npx eslint --fix
npx stylelint "**/*.{css,scss}" --fix
```
👤 **Lawrence Muema Kioko**
- GitHub: [@githubhandle](https://github.com/Kidd254)
- Twitter: [@twitterhandle](https://twitter.com/lawrenc98789206)
- LinkedIn: [LinkedIn](https://www.linkedin.com/in/lawrence-muema-kioko-972035240/)
- [x] I will test this app using the library from React or maybe use Jest to test it👌💯.
- [x] I will add more wireframes
- [x] I will add other features
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](https://github.com/Kidd254/Rick-Morty/issues).
- If you like this project you can give me a star 😊 just to prove my app that it is useful for everyone 💯.
## 🙏 Acknowledgments
- Thanks to [Shamiri Institute](https://www.shamiri.institute/) for providing the API used in this project.
- Inspiration for this project came from the amazing world of Rick and Morty.
## ❓ FAQ
- Can I copy this project?
Your are welcome, copy this project and let me know if you need something.
This project is [MIT](https://github.com/Kidd254/Rick-Morty/blob/set-up/LICENSE) licensed.