This app shows all of the Rick and Morty charachters.
You can see the demo here:
https://rick-and-morty-two-wheat.vercel.app/
npm:
npm installyarn:
yarnTo Start this project run
npm:
npm run startyarn:
yarn startTo build the project run:
npm:
npm run buildyarn:
yarn buildnpm:
npm run testyarn:
yarn testFor the api, I used (rickandmortyapi)[https://rickandmortyapi.com/].
You can access the list of characters by using the /character endpoint.
GET https://rickandmortyapi.com/api/characterYou should get the response like this.
{
"info": {
"count": 671,
"pages": 34,
"next": "https://rickandmortyapi.com/api/character/?page=2",
"prev": null
},
"results": [
{
"id": 1,
"name": "Rick Sanchez",
"status": "Alive",
"species": "Human",
"type": "",
"gender": "Male",
"origin": {
"name": "Earth",
"url": "https://rickandmortyapi.com/api/location/1"
},
"location": {
"name": "Earth",
"url": "https://rickandmortyapi.com/api/location/20"
},
"image": "https://rickandmortyapi.com/api/character/avatar/1.jpeg",
"episode": [
"https://rickandmortyapi.com/api/episode/1",
"https://rickandmortyapi.com/api/episode/2",
// ...
],
"url": "https://rickandmortyapi.com/api/character/1",
"created": "2017-11-04T18:48:46.250Z"
},
// ...
]
}You can get a single character by adding the id as a parameter: /character/2
You should get the response like this.
{
"id": 2,
"name": "Morty Smith",
"status": "Alive",
"species": "Human",
"type": "",
"gender": "Male",
"origin": {
"name": "Earth",
"url": "https://rickandmortyapi.com/api/location/1"
},
"location": {
"name": "Earth",
"url": "https://rickandmortyapi.com/api/location/20"
},
"image": "https://rickandmortyapi.com/api/character/avatar/2.jpeg",
"episode": [
"https://rickandmortyapi.com/api/episode/1",
"https://rickandmortyapi.com/api/episode/2",
// ...
],
"url": "https://rickandmortyapi.com/api/character/2",
"created": "2017-11-04T18:50:21.651Z"
}Client: React, Typescript, React Router, TailwindCSS, React icons, React-loader-spinner
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent