Rick and Morty CRM

React SPA that searches, filters and displays characters from the Rick and Morty API as contacts.

🌲 Project structure

├── public
└── src
    ├── components
    │   ├── Toast
    │   └── Typography
    ├── hooks
    ├── routes
    │   └── Contact
    │       ├── Details
    │       │   └── Episodes
    │       ├── List
    │       └── __mocks__
    └── utils

/routes

Container components connected to react-router are placed in /routes folder.

/hooks

Reusable hooks and hooks that consume the rickmortyapi are placed in /hooks folder.

/components

UI components are placed in /components folder. Some are generated from shadcn/ui.

Unit tests

Unit tests are written to cover each route, they are collocated within the same directory, with file names ending with .test.tsx.

👩🏻‍💻 Local development

Node 18+ and yarn v1 is recommended. Install dependencies:

yarn

Serve locally:

yarn dev

✅ Linting

yarn lint

📝 Testing

Powered by Vitest. To run unit tests on updated files in watch mode:

yarn test

Run all tests and calculate coverage:

yarn coverage