Rick & Morty Character Wiki

This Rick & Morty Character Wiki is a React JS application built using React, JavaScript, Node.js, Bootstrap, Sass and an Open API.

The app allows users to search for their favourite Rick & Morty characters via a search bar and data filtering (including filter by status, species or gender) section. The users can click on a specific character card to get full available infomation for each character (their name, status, gender, species, type, location and origin).

Users can also check which character/s have appeared in specific episodes and locations using a drop down menu created in the corresponding Episodes or Location sections of the app. In total there are 800+ characters, each page will display up to 20 characters, so I've added a pagination system at the bottom of each page to allow the user to view all the results available if needed.

Main Learning Points:

• Using fetch() to get data from an API and map() results.
• Reading API docs and understanding how to use them.
• Practice creating an app which included asynchronous programming, async, await, fetch(), React Hooks (useState, useEffect).
• Bootstrap and Sass - for styling.
• Implementing Pagination.
• Creating a Search bar.
• Data Filtering.
• Dynamic Routing.
• How to easily and efficiently use React JS and Bootstrap to handle projects.
• Making the app fully responsive for small, medium and large devices.

Built with:

• React.js
• JavaScript
• Node.js
• Bootstrap
• Sass
• Rick & Morty Open API

Deployed with:

• Deployed using Netlify

Project Setup & Running:

• Prerequisites

  • None

• Clone Repo https://github.com/MiguelLamas/rick-and-morty-character-wiki.git

• Before starting the project, follow these steps to get it set up:

  • Open the project folder in VS code
  • Open your terminal and run these commands below by one:
  • npx create-react-app .
  • npm install bootstrap
  • npm install @popperjs/core --save
  • npm install sass
  • npm install react-router-dom
  • npm install react-paginate --save
  • npm start

• To make your dev experience easier, download these VS code extensions:

  • ES7 React/Redux/GraphQL/React-Native snippets
  • ESLint

Developer:

• Miguel Lamas - GitHub

License:

Copyright (c) 2023 Miguel Lamas - https://github.com/MiguelLamas