For this final project, I decided to expand on my phase 2 project, which was a Pokemon team creator, by making it more robust and aesthetically pleasing. Aside from a couple bumps in the road that slowed down my progress, this project felt like it was the easiest of all, thanks to my solid foundation of Ruby/Rails, as well as how easy and intuitive React is to work with.
Basically my application allows for users to signup/login and create teams of 6 Pokemon which are saved to the app's database. Users are allowed to pick from any of the 898 Pokemon pulled from PokeAPI. Users can view the teams they themselves have created, or look at all teams in the database, regardless of the user that created them. Users can also look at a "Pokedex" in case they just want to look through all the Pokemon. The Pokedex also renders below the 'new team' form so that users can match the form selection with the correct Pokemon ID number.
At first, I had some trouble setting up the User authentication feature in the backend since I had not done that for a while, but I found a YouTube channel called edutechional that has an excellent playlist on setting up a Rails API with User authentication. The videos were only helpful in setting up the backend though since they were made for an app that does not use Redux, so I was on my own for that part.
This leads to the most frustrating part of this project - getting the Redux store to actually update and keep the data being dispatched to it. I spent 4 days of work trying to figure out why my action was being dispatched with the proper payload to the reducer, but my Redux store still was not updating. I used Redux DevTools and confirmed that the dispatch was going through properly, and I tried every solution ranging from syntax changes, to installing older versions of dependencies, and even starting my whole project over at one point. Then one day when I was looking through StackOverflow, I saw an answer to my question that fixed everything and relieved a week long headache - I accidentally had my navbar setup so that redirects were refreshing the entire window, causing the Redux store to reset on every click.
After that major minor problem was solved, the rest of the project was a breeze since React is pretty straightforward to work with, and the labs I had worked on throughout phase 5 properly prepared me for what was required.
Surprisingly, just like the phase 4 project, my favorite part of the phase 5 project ended up being the CSS styling portion. Exploring the different methods that can be used to manipulate text and divs was fun to mess around with, and I utilized the use of image url backgrounds to make the app look a lot more visually appealing compared to my previous projects.
Overall, this project is the one I am most proud of even though it was arguably the easiest since a year ago, I never could have imagined that I would be able to create something like this from almost nothing. This project was a great first-step towards making a strong portfolio that will hopefully land me a job as soon as possible.
Top comments (0)