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.
Some challenges that occur in the Frontend again and again are:
- Library publishing
- Tree Shaking
- Code splitting
- Font loading
- 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
- Dependency Updates
- API Communication & Persistence
- Design System
- 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.
Let's look at what projects you can build to develop your ideas on some of the above topics.
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.
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.
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 Editors are common, and this problem has been solved several times. But building one by yourself can help you understand how to work with DOM and how such tools work.
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)
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.
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
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.
If you find this article helpful, please share it with others.
Subscribe to the blog to receive new posts right to your inbox.