judit lázaro moyano

developer, philologist & tightrope walker

Star Wars Application

Star Wars was never a solid reference according to my relationship to the collective imaginary, though; however, its influence is as undeniable as it has been well-established and consolidated through the years, and that's probably why IT Academy asked us to work on a project related to this specific universe.

The final result should fetch each starship's data (including films and pilots) from the SWAPI Star Wars API (https://swapi.dev/) while combining it with the visual assets provided by https://starwars-visualguide.com/. After accessing an entire list located in the Starships section, the user can check all the information fetched with Axios, which is the HTTP client-based package I decided to use in order to communicate and send requests to the REST endpoints.

Although the simplicity of the application is what seems to be an undeniable reality, there was, of course, a little extra: it was necessary to incorporate a registration system and protected routes just so only registered users could access the exclusive content. In order to achieve it, I had to work on the following utilities:

  1. The already mentioned Star Wars APIs.
  2. User management, implemented thanks to localStorage usage.
  3. A Sign Up, Login and Sign Out system keeping track of new users, unregistered, and already registered ones, which allows the user to sign up, log in, finish their session and still keep their information stored. As you can see in the previous image, the site greets the registered users by displaying their names on the screen.
  4. Private routes granting users free access to Home (a so-called "welcome page" with a slider integrated) and the About section, but showing an alert and preventing them from accessing the Starships one without previous registration.
  5. An infinite scroll system followed by different "Loading..." or "All starships successfully loaded!" messages, making it more accessible for the user to navigate the list.
Showcase image no. 1 for Star Wars Application
Showcase image no. 2 for Star Wars Application
Showcase image no. 3 for Star Wars Application

Tools & Technologies The tech stack I was involved with.

  • HTML
  • JavaScript
  • React
  • Styled-components
  • SWAPI Star Wars