The marvel-api from christianoller8

Christian Oller Vilchez - 09/05/2023

About Project 🚀

This project corresponds to the second review of the Vueling University. It focuses on showing the learning during the course of the training time. It is a project about Marvel in which you have to login and enter an api key and a private key, it generates a hash in the localstorage and you can enter the application.Once inside you can access a welcome page, another one with a list of series and finally, by clicking on the image of one of them, you can see its details.

In the project I have implemented:

Multimodule project
Login with authentication
Logout
Hash in the localStorage
Interceptor - Personal Spinner
Guard
Information in Reactive Form
Keys in environments
Pipes
Lazy Loading
Unit tests
Angular Material
Responsive Design
Pagination
Searchbar ( You can use it with letters or complete names of the series)

I hope you enjoy seeing it as much as I enjoyed creating it, thank you very much, best regards!

IMPORTANT!

The api Key and the private Key to enter the application are located in the environments folder in the environment.ts file.

Prerequisites 📋

This project was generated with Angular CLI version 15.2.3. This project was generated with Node version 18.15.0 This project was generated with NPM version 9.5.0

Build with 🛠️

Visual Studio Code

Instalation 🔧

# Clone this repository
$ git clone + https://[email protected]/ch-exam2/exam2/_git/exam2

# Go into the repository
$ cd exam2

# Install dependencies
$ npm install

# Run the app
$ ng serve -o

Scafolding 📁

For the organization at folder level I have followed an architecture as organized and scalable as possible within the standard construction, where all files are completely ordered in their respective place and named in the most understandable way possible. Here I show an example of such an organization:

ESLint and Prettier 📄

This project has both ESLint and Prettier correctly installed and configured using the following commands:

# Install ESLint

npm install @typescript-eslint/eslint-plugin@latest --save-dev

# Configure ESLint

npm init @eslint/config

# Install Prettier

npm install --save-dev --save-exact prettier

# Configuration

npm install eslint-config-prettier

And configuring both on the .prettierrc file, the package.json for the scripts and the local configurations in Visual Studio Code.

A hook is also configured in the .git folder of the project that prevents you from committing to the master branch to avoid possible problems and encourage you to work on other branches and use pull requests as the correct way to work. Here is an example of what would happen if you try to commit to the master branch:

Scripts ⚡

The configured scripts that may be useful to you are the following:

"scripts": {
  "ng": "ng",
  "start": "ng serve --o",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "prettier": "prettier \"**/*.ts\" --write --ignore-path .gitignore",
  "lint": "eslint \"**/*.ts\" --ignore-path .gitignore",
  "lint.fix": "eslint \"**/*.ts\" --fix --ignore-path .gitignore"
}

Method of work ✏️

For this project I have implemented the branch work methodology, which consists of not committing or pushing directly to the master branch. The idea of this methodology is to work with a feature branch, creating and closing issues in the github project through pull requests, which in this case are accepted by me, but it is useful for the verification of the work and the possible combination of others by being able to make parallel branches and make pull requests. I used SourceTree as a tool to manage the branches and the commits, which I find very useful and easy to use.

Notion 📖

As an organizational tool to store my tutorials, my examples, my documentation and in general everything related to this and all my projects I have used Notion. Personally I find it convenient and necessary when making any project both personal and professional as it guarantees a saved in the cloud, a clear and simple organization, both with pages, tables, code ... which undoubtedly makes life much easier when programming.

https://www.notion.so/product