In all sincerity, I never connected with the idea of communities congregating to share their love and criticism of a specific multimedia work, no matter how passionate I am about certain artistic artifacts. This passion always existed deep within, as a silent one, and just as the "daughter of my generation" that I am, the scope of this passion was remarkably reduced to (and highly influenced by) the decade of the 90s and its most relevant media, films, games and pop culture.
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.
As seen above, 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:
- The already mentioned Star Wars
APIs. - User management, implemented thanks to
localStorageusage. - A
Sign Up,LoginandSign Outsystem keeping track ofnew users,unregistered, and alreadyregisteredones, which allows the user tosign up,log in,finish their sessionand stillkeep their information stored. As you can see in the previous image, the site greets the registered users bydisplaying their nameson the screen. Private routesgranting users free access toHome(a so-called "welcome page" with asliderintegrated) and theAboutsection, but showing an alert and preventing them from accessing theStarshipsone without previous registration.- An
infinite scrollsystem followed by different"Loading..."or"All starships successfully loaded!"messages, making it more accessible for the user to navigate the list.
The influence of the official Star Wars website (https://www.starwars.com/) when it comes to assembling this application is undeniable, independently of the more-than-evident differences between a professional product and an amateur one like this little application. However, and although there's a lot to work on during these first steps of my personal reskilling process, I still managed to divide the project into my already-traditional three main pages:
- A
Homepage, with asliderdisplaying different Star Wars images. - The
Starshipssection ormain site, with the previously discussed content. - An
Aboutpage which I couldn't resist to incorporate. Why? Let me tell you the story of my people...
Most of the IT Academy students share similar profiles and backgrounds: a previous formation, the urge to change our lives, and the decision to build them from scratch. During this process of self-discovery, deconstruction and transformation, my best friend, Kernelkun, has always been there. Maybe because of that, or simply because he's a huge Star Wars nerd, I couldn't deny myself the pleasure of thanking him (as well as everyone visiting this little space, too) again.
As for the ones getting started with React just like I am, I know, guys: the learning process is indeed a bumpy ride with many obstacles to overcome, but remember our motto: Don't give up, skeleton!
If I could do it (and believe me when I say that I'm terrible at this), you can do it, too! https://juditisnojedi.vercel.app/
Oh, wait, wait... are you telling me you're crazy enough to give React a try? If that's the case, you little Padawan...
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can't go back!
If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify