Lessons Learnt Building a Frontend Mentor Project (Part 2)

If you would like to check out the part 1 of this article, you can read it here, this article is a continuation with another project. In this one, I am sharing what I learnt while building the Easybank landing page.

The best way to grow as a developer, even in this age of AI, is to build projects. Thanks to frontend mentor, they have provided a platform for experienced and newbie developers to build projects that will help them grow and expand their skillsets and knowledge.

To be honest, when I started building this project, I didn't have much expectations for it as taught I won't learn much because building a landing page is not a hard thing for me to do with my current skill level, but it was not until I had a mindset shift that you don't just build projects because you want to build them, you should aim to learn something from it so as to improve your knowledge on how things work as a developer.

Taking this approach to build projects has profound benefits as you would see that even building a simple to-do app or social profile card can teach you a lot when you build it to learn a specific thing. For me, building this project was to help me improve my knowledge of how to use React, and also incorporate TypeScript to write better JavaScript code that is less prone to errors.

Here are the lessons I learnt building this project:

1. Estimating how long it takes to build something

One thing I learnt when it comes to estimation is that life happens and things will definitely not go as planned, so it's important you learn how to adapt and still show up, no matter what. Also, for your estimates to stand a chance of working, you need to gather all the necessary information required to build the project, I am talking about colors, fonts, spacing dimensions etc, don't just rush and open your code editor, I have learnt this the hard way, take out time to plan the project first, understanding what is required to make the project easier to build.

The last thing I will say here is anytime you fixed a deadline you couldn't meet up to, instead of giving up, try and understand why things didn't go as planned (Maybe your estimate was not realistic enough, guilty person here 😅), and make improvements, that's how to keep getting better.

2. Importing images in a React application

Since I learnt React, I have always struggled with understanding how images are used in a React application, it just seemed like a big deal to me, but while making some research, I learnt 2 things:

• When an image doesn't change frequently e.g a logo, it's best to put that image in the public folder
• When an image is likely to change from time to time e.g an image for a blog article, it makes sense to put that image in the src folder, so it compiles with the code at build time. (let me know if you have a different idea about this).

These 2 lessons helped me understand where to put images, and import them in my code. I put my logo in the public folder and put the images for the blog articles in the src folder because the image for a blog article can always change

3. Showing the active state of a link using a linear gradient

I needed to show a gradient line on links whenever it's hovered on, it was a nice challenge to test my CSS knowledge. Initially, I taught it was going to be a big deal as I am not that much of a CSS fan, but it was not so difficult as my knowledge of CSS helped me get the result I was looking for. Here was what I did

4. Typescript by default doesn't support non-code files

One of the reasons I like building things from scratch is because it helps you understand what's going on under the hood. In React, I didn't realize that TypeScript cannot handle files that are not code related like images, you have to create a TypeScript Declaration file (e.g images.d.ts) before it knows what to do when it encounters those kind of assets. In my application, red lines kept showing where I imported images and css files

It was until I made research on the problem and learnt about TypeScript declaration files, thanks to ChatGPT, that I was able to come up with a solution. A TypeScript declaration file tells TypeScript how to handle certain type of files so that it doesn't throw errors, so I created 2 TypeScript declaration files to tell TypeScript how to handle images and css files

Note: If you use Vite to create a React project, it comes with a TypeScript declaration file by default called vite-env.d.ts which has all the declaration needed for most file types, but I deleted mine by mistake, don't ask 😂, I thought it wasn't necessary, but it was good I did that as I wouldn't have learnt this lesson.

Conclusion

Learning these concepts have helped me improve my knowledge about React and how to use TypeScript in a React application, and has given me more confidence to build complex web applications. Here is a live preview of the project.

As a beginner or even expert React developer, what lessons have you learnt that gave you that aha moment while learning and building projects with React?