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

📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
    • 🚀 Live Demo
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
  • Usage
  • Run tests
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• 📝 License

📖 RICK & MORTY

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.

🛠 Built With

Tech Stack

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.

Key Features

• Set up the project using (CRA) create-react-app👍.
• Remove the boilerplate from the project after setting up💯.
• Install Redux-toolkit and configure
• Install bootstrap package and configure

(back to top)

🚀 Live Demo

• a link to the online version

• [a link to a presentation about this project] ()

(back to top)

💻 Getting Started

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)

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:

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

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.

  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.

import PropTypes from 'prop-types';

const Layout = ({ children }) => (
  <>
    <main>{children}</main>
  </>
);

Layout.propTypes = {
  children: PropTypes.node.isRequired,
};

export default Layout;

Run tests

To run tests for the linter, run the following command:

 npx hint .
npx eslint --fix
npx stylelint "**/*.{css,scss}" --fix

(back to top)

👥 Authors

👤 Lawrence Muema Kioko

• GitHub: @githubhandle
• Twitter: @twitterhandle
• LinkedIn: LinkedIn

(back to top)

🔭 Future Features

• I will test this app using the library from React or maybe use Jest to test it👌💯.
• I will add more wireframes
• I will add other features

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

• If you like this project you can give me a star 😊 just to prove my app that it is useful for everyone 💯.

(back to top)

🙏 Acknowledgments

• Thanks to Shamiri Institute for providing the API used in this project.
• Inspiration for this project came from the amazing world of Rick and Morty.

(back to top)

## ❓ FAQ

• Can I copy this project?

  Your are welcome, copy this project and let me know if you need something.

📝 License

This project is MIT licensed.

(back to top)