Rick and Morty info app 🔍

See demo

Tools 🔧

Environment 👩‍💻

For this project i'm using create-react-app

Technologies 🐾

React (Typescript)
React router (history API)
React testing library
GraphQL (Apollo client 3)
Styled Components
Storybook

How to run 🏃‍♀️

After you cloned project install dependencies running npm i

npm start

Runs the app in the development mode. 🛠
Open http://localhost:3000 to view it in the browser.

npm test

Launches the test runner in the interactive watch mode. 🧪
I'm using react-testing-library, see docs

npm build

Builds the app for production to the build folder. 🏗
It correctly bundles React in production mode and optimizes the build for the best performance.

npm run storybook

Runs storybook 🎨 on http://localhost:6006/.

npm build-storybook

Builds static storybook docs 📚 for production to the storybook-static folder.

Components guide 🧩

All components docs you can see on the Storybook.

Custom styles 🎨

You can add custom styles for components using className prop.

Example:

import React, { useState } from "react";
import Subtitle from "../Components/Subtitle";
import Title from "../Components/Title";

const HomePage: React.FC<HomePageTypes> = () => (
    <div className="home-page">
      <Title
        text="Search for characters"
        className="home-page__title"
        big={true}
      />
      <Subtitle
        text='Search for all the characters from "Rick and Morty" and get information about them'
        className="home-page__subtitle"
      />
    </div>
);

export default HomePage;

css:

.home-page .home-page__title {
  margin-bottom: 16px;
}

.home-page .home-page__subtitle {
  margin-bottom: 64px;
}

GraphQL API interaction 🚀

I'm using Apollo Client React for GraphQL interaction (see docs). There is the public API on GitHub and playground.

Requests

getCharacters.ts

Using for searching character on the home page.

Arguments:

Name	type	description
name	string	character name

getCharacterInfo.ts

Using on the info page. Returns info about selected character.

Arguments:

Name	type	description
id	number or string	character id
image	boolean	load image
episode	boolean	load episodes

Deployment

On this project is configured CI with deployment to Firebase hosting for main app, and deployment to GitHub Pages for storybook docs.