Self-paced

Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.

Bootcamp

Learn live

Join us for our free workshops, webinars, and other events to learn more about our programs and get started on your journey to becoming a developer.

Upcoming live events

Learning library

For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.

It makes sense to start learning by reading and watching videos about fundamentals and how things work.

Search from all Lessons


LoginGet Started

Register to 4Geeks

← Back to Projects

Create a Blog with the Rick and Morty´s Api

Difficulty

  • easy

Average duration

2 hrs

Technologies

  • node

Difficulty

  • easy

Average duration

2 hrs

Technologies

  • node

Science is important in this exercise....

We are going to build a minimalist version of Rick & Morty Database with a favorites list.

Here is a demo similar to what you are looking for!

Starwars Demo

🌱 How to start this project

Do not clone this repository. The first step to start coding is to set up express from scratch or use express-generator.

b) If you work locally, set up your project first and then link to your remote git repository.

📝 Instrucctions

  1. Start a new project using using express or express-generator.
  2. Use bootstrap components (Card, Buttons, etc.), you will hardly need your own CSS.
  3. Take some time to understand The Rick And Morty API, this will be the API that we will use to obtain the information.
  4. Use the Fetch function to consume rickandmortyapi.com and get the Characters, Locations, Episodes, and display them on your website.
  5. You must have a centralized store with your information (planets, characters).
  6. To work around the "favorites" functionality we recommend declaring a global favorites array within the application and creating the necessary paths to modify the favorites array.

Building the network of characters and locations.

Note: please, to be able to use fetch inside node it is necessary to install node-fetch.

Building a details view for the character or planet

  • Each entity should have a short description (Bootstrap Card) and a details view (Bootstrap Components):

Important: The API provides the images. The focus of this exercise is to practice fetch; you can focus on a theme of color and simple design to make it look good.

Use all the information that the API delivers (check the docs and/or json responses).

Read later or favorites functionality

It implements a read-after functionality, ie a button that allows the user to "save" the item (character, location or episode) in a special list. This list will be displayed at the bottom of the home page, it is similar to the main list, but it only shows the "saved" items.

😎 do you feel capable?

The following functions are not required for the final solution, but you can develop them if you feel confident enough:

  • + 1 Prevent the website from fetching the Rick and Morty API again if it updates (you can use local storage to save the store in the local browser).

  • + 3 Implement an autocomplete search bar for Characters and Locations. When you click autocomplete, it should take you to the Character or Location page.

Signup and get access to similar projects

We will use it to give you access to your account.
Already have an account? Login here.

Difficulty

  • easy

Average duration

2 hrs

Technologies

  • node

Difficulty

  • easy

Average duration

2 hrs

Technologies

  • node

Difficulty

  • easy

Average duration

2 hrs

Technologies

  • node

Difficulty

  • easy

Average duration

2 hrs

Technologies

  • node

Signup and get access to similar projects

We will use it to give you access to your account.
Already have an account? Login here.

Difficulty

  • easy

Average duration

2 hrs

Technologies

  • node

Difficulty

  • easy

Average duration

2 hrs

Technologies

  • node