Practice Project Ideas for Frontend Developers [2024]

I have been developing front-end applications for over a decade, and some challenges are common everywhere.

If you can learn to solve them, it will be great to cover the basics and help you gain confidence in your knowledge and capabilities.

Frontend Concepts

Some challenges that occur in the Frontend again and again are:

• Bundling
• Library publishing
• Typescript
• Tree Shaking
• Code splitting
• Performance
• Font loading
• Images
• Cache
• Service Workers
• CSS → moving away from SCSS and adopting PostCSS and CSS-in-JS
• Making a CLI tool
• Deployment of frontend applications
• Environment specific execution
• Documentation
• Automation
• Dependency Updates
• API Communication & Persistence
• Design System
• Monorepos
• Micro frontends
• Configuration Management
• State Management

And no matter what framework or library you choose, there will be similar challenges.

And to get around these challenges, you need to practice to make solutions for them. Each problem is different, so the same solution won't fit everywhere but practicing will allow you to embrace the dynamicity of the situation.

Let's discuss some projects you can build to practice your skills on the above topics.

Projects

Let's look at what projects you can build to develop your ideas on some of the above topics.

Books/Library Manager

Books management or something very similar will help you learn about the basics of the CRUD application.

You can use one of the dummy APIs to practice building the application with CRUD capabilities, or you can use your imagination to build something that fits your needs.

Social Dashboard

You can build a Social Dashboard to collect the latest posts from various sources and show them in one place.

This will allow you to learn how to connect and use third-party APIs.

Component Library

Learning to build a component library to reuse the code among other projects. This will force you to think and learn about separating the concern between logical and representational components.

Component Libraries are standard among companies and their widespread use calls for a hands-on experience with them.

Along with creating a component library, you will also learn to maintain and document it so you can rely on it. And if you choose to open source it, you will also learn how to work with others on the same project.

WYSIWYG Editor

WYSIWYG Editors are common, and this problem has been solved several times. However, building one by yourself can help you understand how to work with DOM and how such tools work.

You can take a look at some of the exciting libraries in this space and see how to move forward (but only when you find yourself in a tough spot while moving forward)

CLI Utility to generate files

You can create a utility to generate files you must manually create every time you work on something. For example, when working with Components, every time you create a new component, you will create a JS File with a designated name, an SCSS/CSS file, a test file, etc.

And everything would need to be with the same name as the component. Wouldn’t having a CLI utility that generates the files would be cool? You would save brought 30–90 seconds per component.

Creating such a utility will help you understand what goes around working with Files, CLI tools, node js runtime, its difference from browser runtime, and some unexpected things 😅 (I will let you discover those)

Automation

You can add automation to test the project on each commit. This is an additional step you can implement on any project. Even if you don’t have testing, you can start small, add some tests for simple functions, and let automation take care of it.

Another automation you can try to ensure the project is building normally and you don’t accidentally ship the broken build.

Landing Pages

Landing pages are basic things but the first thing a customer will see as an online presence of the business.

Creating landing pages, and managing content via direct or indirect methods will be a common theme of challenges in many companies.

Learning to build a landing page that can do one more of the following things can be a good experience:

• Hero section
• Launch date/time counter
• Email waiting lint form
• Pricing tiers
• Features
• Image Gallery
• Social media interactions
• Testimonials
• etc.

Your portfolio is also a kind of Landing page

Going beyond

The whole idea is to keep pushing the limits of your knowledge.

If there is no visible path, try to see existing or similar products in the same field and increase your understanding of the domain and use case.

Even after that, there are ways to combine use cases from one field to use cases of another.

Three decades ago, nobody thought of hiring taxis over the Internet, but today, it is an overutilized domain, and governments are trying to regulate it.

And all these advancements in this domain are combined results of rapid development in smartphones, radio, the internet, etc.

Similarly, you can find things from other domains/use cases and apply them to your domain. Keep striving

Conclusion

The list of projects you can build is limitless, but you must pick what you want to build.

You can keep reading about things, but the learning will only be reinforced when you use the learning or learn while building things.

Let me know through comments. or on Twitter at @heypankaj_ and/or @time2hack

If you find this article helpful, please share it with others.

Subscribe to the blog to receive new posts right to your inbox.