Skip to content

Page to consult Pokémons with their information and manage users.

Notifications You must be signed in to change notification settings

felipevcc/pokemon-page

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Pokemon Page

Page to consult pokemons with their information and manage users.

Tech Stack

Database

  • Engine: MySQL Community 8.0
  • Command line tool: MySQL Workbench 8.0 CE

Backend

  • Java - JDK 17
  • Spring Boot 3.2.3
  • Gradle 8.6
  • IDE: IntelliJ IDEA Community Edition 2023.2.2

Frontend

  • Node ^18.10.0
  • Angular 15.2.10

App images

Home view to see Pokémons (Unauthenticated user)

Home view - Unauth user

Login view

Login view

Sign up view

Sign up view

Home view (User logged in)

Home view - Auth user

User options in navbar

User options in navbar

Detail view of Pokémon

Detail view of Pokémon

User data update view

User data update view

Password change view

Password change view


Installation

Database

Open MySQL Workbench and create or select an instance. Then, Open a tab to run queries from the top bar, first option (Create a new SQL tab). And finally, paste the code found in the file database.sql and run it.

Backend

First, from the editor (IntelliJ IDEA) open the service pokemon-api/. The editor will start configuring and installing the project. Once configured, run the service from the editor.

Frontend

Locate yourself in the directory pokemon-front/

Once inside, run the following command to install the dependencies:

npm install

Once the dependencies are installed, run the following command to start the application:

ng serve --open

Note

As a resource to make requests from Postman, this is the collection file.


Demo

To see a summary of the app watch this video.


Author

  • Felipe Villamizar github

Pokémon API consumed: PokéAPI