Case Study: React, GraphQL

Goal

This is a case study, experimental code which will use React, TypeScript, GraphQL, Vite, NPM, Tailwind, and a free Rick & Morty API.

Key features

• List entries from a GraphQL endpoint
• Display details for a character entry from Rick & Morty
• Pagination

Requirements

• Node.JS 18+
• NPM 6+
• ~200mb free space

Install

npm install

Usage

npm run dev

Available commands

Command	Description
npm run dev	Runs the project with Vite
npm run build	Builds TypeScript & resources with Vite
npm run lint	Runs eslint
npm run preview	Vite preview mode

Features

• React
• React Icons
• Tailwind
• Vite
• NPM
• Typescript
• GraphQL (apollo client)
• eslint

Note

What this repo does not provide

• Custom Logo (uses Vite's default)
• Classic CRUD (it is just list, detail, pagination)
• Advanced security (there is no checks for GraphQL nor for an user)

Project screenshots

• List view
• Detail view

References

• Rick & Morty Graphql API
• Tailwind