DEV Community

loading...
Cover image for 5 mini-projects to sharpen your frontend development skills!

5 mini-projects to sharpen your frontend development skills!

ms_yogii profile image Yogini Bende ใƒป4 min read

Hi folks,

Frontend development is continuously evolving with new technologies and frameworks. It is always said that the best way to master a new framework is by building something in it while learning. Though we all know this, the question which remains constant is, what to build?

Most tutorials start with either a to-do app or a counter. These are the best examples to cover the basics while learning, but they are also very repetitive. So letโ€™s see some fun and real life relevant projects to practice any frontend framework. In this article, I have shared 5 fun projects which are inspired by real life use-cases to solidify your frontend skills.

Most of these projects require different components to build. But they are tricky enough to make you understand different features and their implementation patterns of the framework.

You can build these projects in any framework. I have also created a github repository to store all these project ideas. If you like these challenges, would appreciate getting a star to this repository ๐ŸŒŸ. You can also contribute to these challenge lists or share your solutions. We can create a solutions section too for those links!

Here is the list of all challenges -

  1. Smart Textarea: Twitter like textarea with character count
  2. Dropdown Component with select/multiselect feature - Similar to React Select
  3. Autosuggest Input
  4. Manage cookies pop-up
  5. Progress Bar

Smart Textarea

Twitter like textarea with character count

If you have ever used twitter, you must know your tweet will have a character count limit of 280 characters and once you cross that character limit twitter starts marking your characters with red background and you will see a character count going in a negative value! That's it, that is the task. You can build the same textarea with a customised character count limit.

Features to include in it -

  1. Create a simple textarea and add necessary styling.
  2. There should be a customisable character count limit to your textarea.
  3. Show this limit below the textarea. Improvement - You can add progress circle showing the count.
  4. If characters goes beyond the limit, highlight them, decrease the count to negative value and disable the submit button.
  5. You can also add warnings when only the 10% character limit is remaining.
  6. If a user is adding symbols such as @ or # made them as a link with relevant href.
  7. After a submit button, display that paragraph.

Dropdown Component

A component with select/multi select feature, similar to React Select

Dropdowns are part of most applications and they are smart to implement components. React Select is one of those libraries which I heavily trust on for any type of dropdown I need. But while learning if we can create a simple dropdown component, it will have so many benefits over going for the library.

Features to include in it -

  1. Dropdown component, where list will be open on click of dropdown.
  2. This list should get closed on clicking the dropdown again, on pressing esc key, on clicking outside and after selecting any element.
  3. Enable multi select option as well.
  4. Search function on type will be a bonus.

Autosuggest Input

We all have tried Google search input. It's pretty cool how it shows you some suggestions based on your typing. We need to create exactly the same. Consider a search location feature, where you are adding names to your city and country. Implement a search feature with a list of cities and countries and show user options based on what the user is typing.

This is one of the most frequently asked questions in the interviews. So that is a bonus point.

Features to include in it -

  1. A search input with auto suggest option.
  2. Enable debouncing feature to save excess api calls.
  3. Use any api or json list to show suggestions

Manage cookies pop-up

Ever opened a website and saw an annoying pop-up asking to accept cookies or manage your preferences? We need to build that! A custom pop-up component for creating and managing cookies in an application.

Features to include in it -

  1. After loading a page, a pop-up asking to accept cookies should show up.
  2. Users should have preferences on accepting all/some or no cookies.
  3. Same preference should work in your app.
  4. After 10-15 seconds the pop-up should become hidden with a default state.

Progress Bar

Progress bars showing progress of something are commonly seen. Here you can develop 3 types of progress bar

  1. Progress bar showing page scroll progress, at the top most position of your page.
  2. Progress bar showing progress as per value passed in percentage.
  3. Circular variant of same progress bar.

Thatโ€™s it for now. Do not forget to check the github repo for the same, as I will be adding more challenges to this list. If you have more such ideas, please create a pull request for the same or if you have created any solution for this, I will link that too, below the challenge.

Thank you so much for reading this article. Let me know your thoughts on this and you can follow me on twitter for more daily updates ๐Ÿ˜‡

Happy coding and keep learning ๐Ÿ™Œ

Discussion (16)

Collapse
swastikyadav profile image
Swastik Yadav

Todo Apps, are mostly used because they teach you the CRUD operation. But these 5 projects are really great to increase your knowledge further.

Thanks for sharing! Yogini.

Collapse
horaceshmorace profile image
Horace Nelson

I think you guys are missing the point of "MINI-projects to sharpen your FRONTEND development skills."

Collapse
madza profile image
Madza

common in tech interviews, too ๐Ÿ˜‰

Collapse
ms_yogii profile image
Yogini Bende Author

Yes, they are really good to cover basics!

Collapse
davidwparker profile image
David Parker

For sure, I'd suggest doing a TO-DO app first. These are all fine for frontend (which is what this article's about), but being able to do basic CRUD is needed in nearly every app / job ever.

Collapse
hieptl profile image
Hiep Le

Hi @ms_yogii , thank you for taking the time to write about this topic. I really appreciate that. I really like learning by doing instead of talking too much about theories.

For this reason, I am building different repositories and posts to share about different topics such as Javascript, React by building real projects.

I hope that you will create more greate articles and share to the community โค๏ธ

Best Regards,
Hiep

Collapse
ms_yogii profile image
Yogini Bende Author

Thank you!
I checked your github and you are doing a great job ๐Ÿ‘๐Ÿผ
Keep it up buddy ๐Ÿ™Œ๐Ÿผ

Collapse
qucchia profile image
qucchia

Thanks for the ideas! I think I'll try the smart textarea one soon.

Collapse
ms_yogii profile image
Yogini Bende Author

Do share the link once done!

Collapse
samba_chinta profile image
samba siva reddy

Thanks Yogini for sharing, I will try textarea one.

Collapse
thexdev profile image
M. Akbar Nugroho

Great article, Yogini!

I think a custom file uploader like dropzone.js is also great. This practice will teach us more about managing file with JavaScript.

Collapse
cswalker21 profile image
cswalker21

Excellent, thanks Yogini! Challenge accepted: I will incorporate all of these features to my todo app. ๐Ÿ˜

Collapse
orlundo profile image
orlundo

Thanks for this article Yogini! This is the type of article I've been looking for for a while!

Collapse
yodalightsabr profile image
YodaLightsabr

If anyone has a working version for the textarea one a link would be nice

Collapse
karthiknayak98 profile image
KarthikNayak

Nice ideas.. thanks

Some comments have been hidden by the post's author - find out more

Forem Open with the Forem app