How I built a Recipe app using React.js
So I recently started learning React.js and as a project, I built a recipe app(not exactly functional though) which I used to test my skills in using some major react features and learning new ones. In this article, I'll briefly walk you through what it can do, how I achieved some functionalities, what I learned, and the challenges I faced. This isn't a tutorial, though, so I won't go all that in-depth to provide explanations and share code snippets. But I implore you to relax, get a bowl of popcorn and incline on your favorite chair because you're about to begin watching a POV, a very interesting one at that.
Setting up the Project and routing
The first step, as usual, was to run the npm command for creating react apps in my terminal. After the app was created, the next thing was to set up routes, for navigation. To do this, I imported BrowserRouter from the react-router-dom in my index.js file and wrapped my <App /> tag with <BrowserRouter> opening and closing tags. Then, in my app.js file, I created my components as functions and Routed them into the app component. I added a nested route(a route enclosed by another) to implement that react method. I also created a 404 page so the app doesn't crash when a user visits a broken link. I also added an error boundary to handle potential server-side errors during the utilization of the app. I wrapped all the routes with <Routes> opening and closing tags and enclosed them in the <ErrorBoundary> tags.
Implementing SEO and a Navigation menu
To add SEO to my app, I didn't do much, since I don't know much about how to implement SEO. The first thing I did was to open the lighthouse menu in the Chrome Developer Tools, generated a lighthouse report, and discovered I was low on SEO and performance, so I took some simple steps I saw in a video on youtube. Some of the things I added are listed below:
A title tag in the index.html tag
Heading tags on pages
Description
Alt text on images
In the process of doing research and working on the project, I discovered a couple of things, one of which includes the fact that Javascript frameworks are very bad at SEO, like on their own, because the language they rely on, Javascript, is very bad on SEO. Hence, it's our responsibility to improve the SEO, Accessibility and Performance of our website. That is one of our most important duties as Web Developers.
Adding Authentication to the app
This part was literally the most tasking, time-consuming and challenging part of this project. At this point, I needed to use the Context API to implement Fake Authentication in the app. I chose to use firebase, though, since it already has an authentication product designed for developers to use. After adding the project to the firebase console, I chose two authentication methods:
Email/Password
Google
Hence, I went on to create the SIgnUp, log in and CreateUser functions in a separate file called UserAuthContext.js. I used the CreateContext method to create a function that will create a user with the auth instance, email and password. Then, I added the function as the onSubmit action for the signup form so the function can be called and a new user created whenever the form is filled and submitted, following the appropriate signup conditions.
What I learned
Among the numerous things I learned in the course of building this project are:
The context API
The Use effect Hook
The Use state hook
Challenges I faced
As you and I know, no developer is above potential issues and bugs, no matter how much you know or how much experience you have. The ones I encountered were bent on driving me haywire. At one point, I was chewing clothes out of anger when I couldn't figure out the problem and no one was responding to my desperate beckons for help.
The greatest and most time-consuming one was the fact that the auth wasn't even working. I had done everything needed, but I still wasn't getting the problem. I wasn't getting the desired results in that, for example, when I clicked on the signup button without filling out the form, it was supposed to throw an auth error of invalid email and send a post error to firebase. And if I typed in a password of fewer than 6 characters I was supposed to also get an error of weak password. But it did none. It was as though all my hard work amounted to nothing. I sent messages to several good react devs asking for help, but no, no response. You know that point when you just feel like the entire universe decided to turn against you? That's exactly what I was feeling.
My last resort was to ask on Stack Overflow. I know it sounds ridiculous to have stack overflow as a final bus stop but it's as though I have some sort of bad energy surrounding me, so whenever I have problems for which I don't get straight google answers, when I ask on stack Overflow, I'm always told to improve my question. Yeah, yeah, it's constructive criticism alright, but how exactly to improve the question, I'm not told. And the same thing happened this time when I finally decided to ask 'em on stack overflow. I was told to improve the question. How exactly to do that, I didn't know. Thankfully though, I got a nice person who was able to help me improve the question and get an answer for the first time in my Tech History. I found out that the problem was just a keyword I missed, all that headache for just one word. With that,I resolved the issue and was able to scale through.
The biggest lesson I learned in the course of building this project is that you learn by building, and never quit asking for help, even when you're on the brink of madness because trust me, coding can do that to you. Just keep asking, keep searching and you will find. Something is bound to turn up, somewhere, somehow.
In the words of Grady Booch, "Good people with a good process will outperform good people with no process every time" I hope you enjoyed reading my article and following me on this stressful yet exciting journey and I implore you to keep working magic with your fingers and keypad