The Rick and Morty Website

I made a Rick and Morty website using the Rick and Morty API.

This website was made for my course "WD-JS-ext" as the final project.

• Visit it here!

To get started

1. Git Clone repo, git clone https://github.com/WeeWee/rick-and-morty-api.git
2. Install node modules, run npm install or yarn
3. Start the server, run npm run dev or yarn dev
4. Visit the website on Localhost.

File structure

• App

  Includes all the boilerplate code including Components, Css, Sass and our Routes

  Routes

  Consists of Character folder, index.tsx and results.tsx.

  Character folder

  Consists of $characterId.tsx file which is a dynamic file in Remix.JS and is used to display the more in depth Character data.

  Index

  This file is the landing page of the website which display the Navbar, 6 Rick and Morty Characters and the Footer.

  Results

  This file display what Character the user has searched in the search bar and is paginated meaning if you get more than 20 results you can change page. It also has a Filter button making it easy for the user to narrow the search down by filtering through Status (Alive, Dead, Unkown), Gender (Male, Female, Genderless, Unknown) and Species (Human, Humanoid, Animal, Robot, Unknown). The Filter Menu also provides the user with an Apply Filters button and a Clear filters button.

Components

This folder consists of an Character Component, Filter Component, Footer Component and a Navbar Component.

API

The Base URL

URLs

• Fetch the 6 first Characters

• Fetch the Location Data with Location Id

• Fetch the Character Data with Character Id

• Fetch the Character Array and next/previous fetch url from Search Query

• Fetch the Characters with a specific filter

Framework and Technologies

RemixJS

Framework built on top of React, great for building a website both frontend and backend.

More Info!

TypeScript, Sass, Ajax

Developer

Thanks for reading this far!

Add me on LinkedIn!

Follow me on Github!