SWAPI an app that focuses heavily on fetching data from an API, spcefically utilizing nested fetching to gather all the info needed for the app. This is also the first project that handles multiple URLs with React Router. Upon opening the app, a user is brought to the landing page, where they enter their name, favorite Star Wars quote (or any quote for that matter) and their level of Star Wars knowledge (the options are effectively beginner, intermediate, and expert). Once logged in, the user is directed to the movies page, which contains 'cards' for each of the first seven Star Wars movies along with some information for each movie. The user can select an option to view characters for each specific movie, at which point they're routed to the characters page, listing 10 characters from the movie and some information for each character. The user can also click the logout button to be redirected back to the landing page.
SWAPI was a paired project working with a single partner. At the time of submission of this project, it was my favorite project I had done. It was challenging in many news ways, but also very fun. This project presented new concepts, mainly nested fetching and React Router. My partner and I complemented each other very well, and it made the work flow very smooth and incredibly enjoyabe. I put more time into this project than any project before, and that was a direct relfection of my level of enjoyment.
As mentioned above, SWAPI presented new challenges and concepts that were difficult to grasp and implement. This project required nested fetching to retrieve data, clean the data for the desired information, and store it in the app to be rendered when and where needed. At the outset of the project, my partner and I decided that we wanted to fetch all the data we needed upon loading the app so that all the data would be locally accessible to the app for the user. This approach definitely has pros and cons. The biggest pro is that the data be locally accessible throughout the app once fully fetched, thus making interactions beyond that point quicker and more seamless. One of the biggest drawbacks to this approach is accurately tracking when all the data is ready to be used in the structure we expected. We ran into bugs that if the app is navigated quickly after loading, some of the data may not be fully fetched, thus crashing the app when attempting to render the info. For me personally, my biggest takeaway from this project and somehting I'm proud of is having dynamic, user-friendly error handling on the landing page using React state. In previous projects, I targeted form inputs using document.querySelector or something very similar. With React, avoiding using querySelector is big, so figuring out a way to incorporate state to handle errors dynamically was a big win for me.
Overall, I loved this project, and loved my partner. We worked very well together, maintained a very productive partnership, and compromised when necessary. We both gained a deeper understanding of the Fetch process, using state to manipulate the app, and incorporating conditional rendering based of user interaction. I am most proud of this project and look forward to presenting it to employers.