8 Beginner Design Projects for Aspiring Front-end Developers

These are 8 projects with requirements and designs that you can do to add to your portfolio as a Front-end Developer. The order of these projects is from easy to intermediate level.

1. Reusable Button

One best way to start learning React or Vue is to make small components. By making a reusable button, you will learn about basic states and the most basics syntax.

2. Reusable Input

Making a reusable is not that simple, especially the Input component. You have to be wary of different states: Error, Focus, Accessibility, sizes, etc. But you will learn a lot from making them and it will be a big help in the journey of learning a library like React.

3. Windbnb - Airbnb small version

You will be making a small version of Airbnb.

Given a simple JSON file, your task is to create a listing with filter functions. You will learn managing state in Front-end library in React or Vue.

4. Todo App

Everyone knows Todo App, but did you ever try to make one?

You will practices skills like Array methods and managing states. I think it's one of the best tasks to start learning a library, as it is not too difficult or too easy.

5. Quote Generator

A Front-end developer needs to know how to use an API. You will practice basic skills working with a simple API in this project.

6. Country Quiz

Now a bit more challenging project, not only will you have to use an API but also manage more complex states in your app. This project will definitely improve your skill as a Front-end developer.

7. Weather App

Surprise, Surprise :) another weather app project. In this one, you have to understand an API, display different data, and check user location. There are a lot of things to do and practice and is a perfect challenge for a junior to practice a library.

8. Job Search

In this one, you have to deal with different routes, different states, and an interesting API from Github. A good project to put into your portfolio.

Conclusion

These projects are perfect for people who are starting to learn Front-end libraries and want to practice. Not only will you have 8 projects to add to your portfolio but also, you will get a certificate after completion.

In the end, best of luck to everyone who is studying and feel free to leave me a comment below.

Previously published at: https://dev.to/nghiemthu/8-projects-with-designs-you-can-do-to-become-front-end-developer-4pf8