Skip to content

👽E-morty is a wiki app to show the infos provided by the Rick And Morty API(https://rickandmortyapi.com/)

Notifications You must be signed in to change notification settings

fichimura/e-morty

Repository files navigation

EMorty

About the project

E-Morty is a Rick and Morty wiki based in three main subjects that you can search for more informations. The first main subject is the Characters, in which the user has the possibility to search for a specific character. With that you can know the name, species, if the searched person is alive, which species it belongs, gender and many other features about it.

The second it is based in Location. This category provides the name, type, dimension and residents of the searched place.

And the last one is the Episode category, that will provide for you infos like name, air data, the characters in it. Wubba Lubba Dub Dub! And have a good time with this catalog.

How to use the project

By accessing the hosted app

you can access it in the link: https://e-morty.web.app/

By installing it locally

To install it locally you will have to follow the next steps:

  • Go to your terminal and then clone the repository:

    git clone https://github.com/fichimura/e-morty.git
  • Then, in the project install the dependencies:

    npm i
  • This project uses firebase for authentication purposes, so you must configure it

    1. Navigate to https://firebase.google.com and create an account. Once you create an account, in the top of your page click in Go to console.

    2. You will be redirected to a page with your projects. In that page choose Add project. Enter a name and create it.

    3. In the main page, go to Cloud Firestore. Then, click on Create database. Set a location for your database, preferably next to your location. And the choose between production mode and test mode.

    4. In the main page, go to Cloud Firestore. Then, click on Create database. Set a location for your database, preferably next to your location. And the choose between production mode and test mode.

    5. When the process to create the database finishes, you can go to your Firebase Database and see the database created. In that context, click on Start collection and create a collection by providing the name 'users' to it, because the app is configured to get a collection with this name. The name of the document can be filled with anything, just to create the collection successfully.

    6. After this, in the side menu navigate to Project Overview, and to next to the Authentication section. Inside the authentication, go to the Users tab and then to Set up sign in method. On the Native Providers select the option Email/Passsword, enable this option and save.

    7. Once you finish the last step, access the Project Overview. You will see oprtions to get your app started in the top of your page. Choose the web option. Give it a nickname and click on Register App.

      You will be provided with something like this:

      const firebaseConfig = { apiKey: "YOUR_API_KEY", authDomain: "YOUR_AUTH_DOMAIN", projectId: "YOUR_PROJECT_IF", storageBucket: "YOUR_STORAGE_BUCKET", messagingSenderId: "YOUR_MESSAGING_SENDER_ID", appId: "YOUR_APP_ID" };
    8. Keep this object in some place, because it will be important for the next step.

  • Finished the configuration of firebase, go to your e-morty cloned project and on the environment folder create a file named environment.ts. And create an object inside this file with the structure below, and replace it with the corresponding values in the firebaseConfig (object that you got in the firebase set up).

    export const environment = { firebaseConfig: { apiKey: "YOUR_API_KEY", authDomain: "YOUR_AUTH_DOMAIN", projectId: "YOUR_PROJECT_ID", storageBucket: "YOUR_STORAGE_BUCKET", messagingSenderId: "YOUR_MESSAGING_SENDER_ID", appId: "YOUR_APP_ID" } };
  • After all that, in your terminal run:

    npm start
  • It will show a message that the app is running at localhost:4200