By Hajr, Nasir, Rachel, Shirhan and Suraya.
- Project Description
- Local Setup Instructions
- Features
- Future Improvements
- What we learnt
- Contributors
This is a full-stack project which utilises the PokéAPI to attempt to build a Pokémon game based off the formerly known fan game - Pokémon Crater.
This project was the full-stack group project as part of the Bright Network Technology Academy - Full Stack Bootcamp (Cohort 4).
The front-end was built using HTML, CSS and JS (ReactJS), whilst the back-end was developed using Java (Spring Boot) and a PostgreSQL database.
If you would like to deploy the application locally please follow the instructions below.
- Clone the Repo:
git clone [email protected]:Nasir-6/pokemon_full_stack_project.git - Follow the commands in the sql_queries.md file to create the database.
- Run the back-end by opening the "pokemon-back-end" folder using the IntelliJ IDE and running it - the server port should configure to 8080 by default (if not please kill any other processes to free up this port).
- Open the "front-end" folder using VSCode and run
npm installto install the required node modules. - Run the front-end application using
npm start- this should run the application on localhost:3000 - Double check you are not running the production build by checking the console log in your browser telling you to make sure the server is running on port 8080.
- Enjoy! ;)
- Website designed with the official Pokémon color scheme in mind
- Utilises the PokéAPI to grab official sprites of Pokémon
- Users can signup for a new account using a username, email and password
- They can then login using their email and password and begin catching Pokémon to fill in their Pokédex
- Inputs are validated and popups are used to warn users of invalid inputs
- Keeps users logged in until they log out
- A 2D map system allowing users to move around and catch various Pokémon
- Boundary detection to prevent user leaving the map
- Randomised Pokémon, level and HP for each new encounter
- All caught Pokémon are saved in the Pokédex and can be viewed/released by the user
- How to plan and develop a full-stack application which also utilises an external API
- How to use GitHub for collaboration (using branches and dealing with merge conflicts)
- Connecting an external API as well as a Java (Spring Boot) back-end to a React front-end
- How to structure a React application to ensure states are at a suitable level within the app with the aim of minimising prop-drilling whilst still allowing access to states where needed
- The use of conditional rendering to show certain buttons or pages in different scenarios
- The use of React Hooks (UseEffect, UseState)
- Better understanding of the React Lifecycle and Virtual DOM through the development of the map mechanics
- The use of SessionStorage to keep track of logged-in user
- The use of ReactRouter to create a multi-page React App
- The access to the various input types within HTML forms (email, password etc.) - allowing basic validation/formatting of inputs
- Write tests for JS/ReactJS features
- Use an encryption process for user details in the database - perhaps using Spring Security
- Use Redux to manage states throughout the application (Useful for keeping track of logged-in user across the app, rather than using SessionStorage)
- Email confirmation during signup
- Integrate a Pokémon Battle system - was a stretch goal but deemed very time-consuming due to the nature of the game mechanics
- Improved map mechanics - prevent user from jumping/climbing buildings and trees