If you're looking for inspiration to build your own side project, this blog post is for you! I'll share the learning and experiences that I gained throughout the process of building FrontendPro, a website where we provide a variety of web development challenges that will help you improve your coding skills and become better at web development.
Before moving forward, I would like to give you my introduction.
Hi 👋, my name is Rishi Purwar, a developer from India 🇮🇳. I'm an enthusiastic web developer who has been building side projects for quite some time now. Apart from this, I also got selected as a Google Summer Of Code Student at Postman. I'm also a 4th-year B.Tech student pursuing Chemical Engineering at MNIT Jaipur, India.
🚀 What is FrontendPro?
FrontendPro is an Open Source platform where we aim to provide lots of different real-world UI challenges. These challenges are designed to help you improve your web development skills and to build a great portfolio of projects. You can choose a challenge from a variety of challenges that we've on FrontendPro. And once you've completed a challenge, you can share it with other talented developers, who would help you with their valuable feedback.
👷♂️ Why did I build FrontendPro?
You may be wondering why I built FrontendPro. What are its benefits? Let's see those points -
There are many ways to learn web development. Most people start with a tutorial, but that's not enough. You need to build your own projects in order to gain confidence in your skills but you can't do that if you don't have an idea for a project. This is why I built FrontendPro — so you could get better at web development by doing it and build a great portfolio of projects.
The world of tech is changing, and the way companies assess candidates is changing right along with it. Nowadays, companies are increasingly giving candidates take-home projects to solve for an assessment. This is a great way to assess how a candidate will perform on the job, but it can be difficult for candidates to get a feel for what's expected and build the right strategy to complete their next real job take-home challenge. We're providing a platform where candidates can get a feel of take-home challenges by solving FrontendPro challenges and build the right strategy to complete their next real job take-home challenge.
I also realized that although many people were sharing nice project ideas via blogs and tweets that we could build to improve our web development skills, but they aren't always sharing the UI designs, so it's hard for the newbies to code without having a proper UI design. So I put together a list of challenges(will add more soon) on FrontendPro that I thought would be beneficial for the developer community.
I want to make FrontendPro a full-fledged platform where developers can polish their web development skills and build some cool projects and get a job by showcasing on their portfolio.
👨💻 The Tech Stack
Here are the primary technologies that I used in this project:
Frontend: I used ReactJs for the frontend of the website.
CSS Framework: I chose to use TailwindCSS, which is a utility-first CSS framework.
Backend: I used Firebase for the backend. It's easy, reliable, fast and costs me $0 because I went with the free plan!
Images & Files Hoisting: I used Cloudinary to host images and files for my website, it's a cloud-based image management solution that allows me to host, manage, and serve the images and files for my website. It costs me $0 because I decided to go with their free tier which is more than enough for my project as of now.
Domain Name: I bought a domain name from name.com. But fortunately, I got it for free thanks to Github Student Developer Pack. If you are also a student like me, then go to https://education.github.com/pack and sign up for it as well.
Website Hoisting: I hosted my website on Vercel, which is a static website hosting service. It's really easy to use and costs me $0 per month.
Icons/Illustrations: I chose to use Font Awesome & Pixeltrue. It costs me $0 because both provide free Icons and Illustrations.
Why did I choose ReactJs?
You may be wondering why I used ReactJs. What are its benefits? Let's see those points -
React was so popular(still, it's trendy) when I started building this project which means there is a strong community of developers using React, so we can easily find good documentation, tutorials, lots of open source components and lots of NPM packages. If something goes wrong while building, we can find help or a solution relatively quickly and most importantly, StackOverflow has tons of React questions and answers😂.
React has a smooth learning curve. It's much easier to learn compared to other Frontend Framework or Library. If you have a basic understanding of HTML, CSS and JS, you can quickly start working with ReactJs.
When I started building this project, I didn't have a profound knowledge of ReactJs, but I just had a basic understanding of it. So, I really wanted to gain deep knowledge of React by building a side project. I learned many things about React while building this project, i.e. managing the application's state using Context API and Reducers, Code Splitting, Lazy Loading, Suspense and so many other things.
Why did I choose Firebase?
Firebase has a number of good reasons to use it as a Backend. Let's see some of them:
It's easy to set up, not just for me, but also for you. You can get started with Firebase in just a few minutes and there are no servers to maintain or deploy. I also don't have to worry about scaling my project for thousand of users.
It also provides authentication out of the box, so we don't need to write complex authentication code from scratch(This saves a lot of our time).
I wanted to use a real-time database so that whenever a change happens in a database, it immediately shows up on the UI without refreshing the page. This would help me build a comment and emoji system for the solution details page that is more dynamic.
That's why I chose Firebase, as it allows me to focus more on developing the website instead of writing a whole server code from scratch.
Why did I choose TailwindCSS?
TailwindCSS has a number of good reasons to use it as a CSS framework. Let's see some of them:
It makes the styling process much faster since we don't have to leave our markup; we can write CSS and HTML for the website simultaneously.
TailwindCSS v3.0 uses a Just In Time engine under the hood that really helps us to get better browser performance, reduced CSS file size and lightning-fast build time.
TailwindCSS has a lot of pre-built classes for sizing and colours that will altogether remove the need to implement a design system from scratch.
We can quickly implement media queries using TailwindCSS to make our websites responsive.
💡My Learnings and Experiences
I loved building this website, and I learned a lot of things while building FrontendPro, and still learning lots of things. The experience was truly enriching. Here's a list of things that I learned from this experience:
The first thing I learned while building FrontendPro is that I have a lot to improve on. That's okay, though, because the number of things to learn about coding is infinite. So if you don't know something, and not knowing has your brain fizzing - just ask!
I also got to know about lots of ways to improve the performance of a React App. Code Splitting and Lazy Loading are two of them. Using these techniques helps me to reduce the bundle size by splitting a large bundle of code into multiple small bundles that can be loaded dynamically, which improves the user experience. This technique helps us avoid performance issues associated with large bundles without actually reducing the amount of code in our React app.
Upgrading third-party dependencies or modules can be challenging. Upgrading is a process that sometimes involves rewriting some existing code to work with newer versions as per their latest syntax in order to avoid errors or improve readability. Recently, I upgraded Firebase from v7 to v9 and React Router DOM from v5 to v6 in production. You'll find more information about that in the next section
Whether you're shipping a single page app or building a multi-page site, cross-browser testing is an essential thing to do before shipping the app to production. I used BrowserStack to test my React App on different devices and browsers. I got this tool for free from Github Student Developer Program.
SEO can't be avoided. SEO plays an important role in getting traffic through search engine results. This also helps our website become more discoverable.
I never registered a new domain before FrontendPro. I always deployed all my projects either on Vercel or Netlify for free. This was the first time I registered a domain, and fortunately, I got this domain for free(again, thanks to Github Student Developer Pack). After registering this domain, I hosted my project on Vercel to leverage its Vercel Edge Network compression, which results in better performance.
In addition to this, I learned more about the tools used to maintain code quality and consistency. I learned to set up Eslint and Prettier to find potential bugs, bad practices and to maintain the coding style in our project.
This is just a small collection of things I learned while building FrontendPro and hoping to learn lots more in the future.
🛠 Recent Improvement
I have recently worked on improving the User Experience and making it faster. I have worked on a number of different things including fixing bugs and adding new features. Here's a list of things that I worked on:
To encourage collaboration and make it more engaging for developers, I have started working on a comment section for the solution details page. This way, fellow developers can give constructive feedback on the solutions submitted by other developers. This feature is almost complete, will ship it to production soon. Here is a Sneak Peak👀 of this new feature!
%[https://twitter.com/thefierycoder/status/1523629805325135873]
To make our app more fun and exciting, I added a confetti animation that plays when the user submits a solution for a challenge. It looks great and makes the learning experience as fun as possible.
Here is a Sneak Peak👀 of this feature!
-
I have recently worked on upgrading Firebase from v7 to v9 and React Router DOM from v5 to v6. The reason behind upgrading from Firebase v7 to v9 is version 9 enables a dramatically reduced app size. It adopts the modern JavaScript Module format, allowing for "tree shaking" practices in which you import only the artifacts your app needs. Depending on the app, tree-shaking with version 9 can result in 80% less kilobytes than a comparable app built using version 8.
I also improved the AuthContext code and made it more readable, modular, and reusable. I also wrote a couple of new custom hooks for fetching data from a Firebase to make the app's state management more accessible, and these hooks also helped me reduce Firebase reads. These custom hooks are completely reusable, so I can reuse them on my other projects without making many changes.
🤔 Future Plans
There are a lot of new things on our roadmap. Some of them I'm mentioning here:
We plan to add a Hashnode-style Emoji system to our comments section of the solution details page. The emoji system is great because it provides a fun and creative way for you to interact with fellow developers.
We love fun front-end challenges as much as you do, but we also want to add full-stack challenges on FrontendPro so that developers can put their full-stack knowledge to practical use.
Aside from adding front-end and full-stack challenges to the platform, I'm also planning to add Web 3 challenges on FrontendPro, so that Web 3 developers can build amazing Web3 projects for their portfolio.
We are always looking for feedback from users, so please if you have any suggestions or new feature ideas, you can open an issue on Github or you can share your ideas on our Discord server. You can also share new challenges Ideas or even a UI design of the challenge.
😀 Takeaways
The key takeaway from this blog are:
Start with something simple. You don't need to be a professional developer or an advanced programmer in order to create something amazing. Take what you already know and use it to make something new!
If you're looking to build something new, just get started! Don't wait until it's perfect, launch something simple and iterate on that. Perfection is a myth, we all have to start somewhere.
Don't be afraid to ask for help. There are so many resources available online, so if you ever get stuck on something just Google it! The internet is your friend and will never let you down!
🎁 Want to support this project
If you've liked what you've seen so far and want to support this Open Source project, there are a few ways to do that:
Give this project a star ⭐️ on Github.
If you are a social person, share it with your friends on your favourite social media platform.
And of course, if you're a UI designer and have time on your hands, you can contribute a UI design for the challenge—I'd be super grateful if you did.
At last, if you want to buy me a coffee for my hard work, please click here Hashnode Sponsors.
🙏 Thank You for reading this blog
Thanks for reading! I hope these insights have been helpful. If you have any questions or comments, please get in touch via Twitter or LinkedIn!
If you enjoyed this post, I would greatly appreciate it if you shared it on your favourite social media platform.
Please take a look around my Youtube channel and subscribe if you like it!
Cheers, and see you in the next one! 🙏
Thank You
