Is a project that brings you rick and morty characters information includes location, episodes.

See demo here [https://rick-and-morty-wiki-ebon.vercel.app/).

All web services provided by http:https://rickandmortyapi.com/ and the base url configured in .env file at root directory

First, install the dependencies:

npm run install
# or
yarn install

Second, run the development server:

npm run dev
# or
yarn dev

For building the project and start it on your local machine use:

npm run build
npm run start
# or
yarn build
yarn start

Use Dockerfile at the root directory

• ✅ Programming Language: JavaScript
• ✅ Typecheck: Typescripy
• ✅ Dom Manipulation: React
• ✅ SSR: Next.js
• ✅ Network Layer: React Query, Axios
• ✅ UI Library: UI Kit
• ✅ Styling: SCSS
• ✅ Code Quality: ESLint, Prettier, Husky

Each page wrapped in MainLayout container component.

List of characters with summary information renderd with CharacterCard components wrapped by grid layout. The list also fetch more data by scrolling to the end (Infinite scroll list)

The character information in detail shows LocationCard component for rendering location and origin of the character in the left side of the page. Episode list that chracter palyed role rendered with EpisodeCard compoenent with accordion behaviour. After clicking on More Info button in home page you can reach this route /character?id={chracterId}

• Global Types are located in global.d.ts at the root directory

Specific interfaces related to fetched data located at src/lib/interfaces includes:

• ICharacter
• IEpisodes
• ILocation

You can access the list of characters by using the /character endpoint.

  GET https://rickandmortyapi.com/api/character

You 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"
  }

• Event listener hook for imlementing event and managing the mount/unmount outside the components. This helps for detecting when the scroll ends. Located in src/hooks directory

• React-query queries for fetch API. Located in src/services/index.ts directory

If it was a real task and project, I could create CI/CD and some more tests like cypress for that.