Rick and Morty Api's and Web App

Rick and Morty web is a web application that allows users to browse and search for information about characters, locations, and episodes from the popular animated television series "Rick and Morty".

preview-desktop.mp4

Tech Stack

Backend

• TypeScript
• Express
• MongoDB
  • mongoose for object modeling and connecting to mongo
  • connect-mongo for saving user session in mongoDB

Features

• User

  • Sign up new user
  • Login
  • Logout from current session
  • Get current user information
  • Get user information with userId

• Characters

  • create new character
  • update character
  • delete character
  • get all characters with paging
  • get character with id
  • populate database with RickAndMortyApi.com charcters

Frontend

• TypeScript
• React.js
• React-Router
• Immer
• React hook form - Form Validation
• Zustand
• Tailwind - CSS Utility classes
• Material Tailwind - Component library
• React Buddy - Preview components in IDE

Features

• Screens

  • Sign Up
  • Login
  • Main (Navigation rail + Current Session + Logout + nested routes)
    • Home (Shows first page of characters + Shimmer Loading)
    • Characters (Shows all characters with infinite scroll + Shimmer Loading)
    • Locations (TODO)
    • Episodes (TODO)

• Custom Components

  • NavBar (Responsive Side Navigation)

• Loaders

  • React Router Utils - utility functions to deffer type to useLoaderData hook
  • CharactersLoader - hold charactersLoader type
  • UserLoader - hold userLoader type

• RemoteSource

  • Sources - hold the singleton instance of remote sources
  • CharactersRemoteSource - An interface and implementation of it for CRUD operations on characters with api
  • UserRemoteSource - An interface and implementation of it for user operations with api

Models

A pure typescript module that holds domain models of backend and frontend packages

Build Project

Create a .env file in backend directory with this format:

PORT=BACKEND_APIS_PORT
DATABASE_URL=URL_TO_MONGO_DB
SESSION_SECRET=SECRET_KEY_FOR_SESSION

you can use https://cloud.mongodb.com for create a mongoDB in cloud or just create a local mongoDB it's up to you.

then create another .env inside frontend with this format:

BASE_URL=BACKEND_HOST_NAME:PORT

finally you can use docker compose:

docker compose up -d

or if you don't want to use docker. run backend app:

cd backend
npm install
npm run start

run frontend app:

cd frontend
npm install 
npm install -g serve
serve -s build