Overview

This project is a website about the popular TV Show Rick & Morty. Its source of information is the official API which it's used for gathering information about Episodes, Characters and Locations in order to display it in different interfaces. The project is written in HTML, CSS and Typescript.

The main objective was create a entertaining and informative website to explore more all the information about Rick & Morty series and put on practice all we have learned on the last two month in Assembler Institute of Techonology.

Objectives

• Gathering information from third-party API’s.
• Improving knowledge of HTML, CSS and Typescript.
• Structuring a website project in a proffesional way.

Skills acquired

• HTML - Use of correct semantic tags for a clean structure.
• CSS - Use of Bootstrap with own created classes.
• TypeScript - Strict typing of coding.
• ThunderClient - Used for testing interactions with the API.
• GIT - Use of GIT for versions' control.

Features

The information obtained via API:

1. Episodes:

Website's first screen is a list of episodes that, when clicked, show this details:

• Name of the episode.
• Air date.
• Episode code (“S01E01”).
• Cards of characters that appear in the episode.

2. Characters:

When a character's card is clicked the next information is provided:

• A snapshot of the character.
• Name.
• Status (Alive, Dead or Uknown)
• Species
• Gender 
• List of episode's appearance.

3. Locations:

While inside the character's card if the Location link is clicked the next information is displayed:

• Name.
• Type.
• Dimension.
• A list of residents.

Challenges

I kept a rigorous daily log during the development of the project, both technical and personal, and I thought it would be useful to highlight the most important events:

• Structuring a simple HTML and CSS style prove to be easy as I thought the most important features of the project were the logical ones, most of all learning how to interact with an API. Being said that, it took little time to develop those first steps.

• During the weekend I spent quite some time sketching a flowchart that was very useful in the end. I counted how many 'clicks' the user must do in order to navigate through the different information.

• When the Typescript part of the project started it was easy as my teacher demonstrated the same day the steps for creating the first API petition and the creation of the interfaces.

• The manipulation of the data obtained was a headache. I spent several hours trying to figure it out via tutorials, documents etc. As always, the best way of learning was through my peers. We gathered in a Discord room and started discusing the best logic to manipulate the data. From this discussion each one decided which way to go: My way developed in long functions as I discovered that I could performed a second fetch of the data that the first fetch delivered. So I ended up with a few functions that nested a few ones. Not the best way to go.

• At the final stages, I improved my knowledge of Bootstrap and CSS in general and spent a few hours trying to clean the code, but I know it's not perfect yet, I know I can do better.

• I struggled during morning hours to develope the code but in my evening stretches I prove to be more fruitful. I hope to improve that as this means that I spent mostly every daylight hour sitting in front of the computer.

Conclusion

I've enjoyed writing this individual project a lot, even though I've encountered myself in very stressful situations in which I thought it was impossible for me to finish it. That's why I'm very proud of myself as I implemented everything that was recquired, even the extra steps.

Willing to expand my knowledge in software development!!!