8 Projects with Designs you can do to Become FRONT-END developer
Thu Nghiem

Thu Nghiem @nghiemthu

About: Creator of devchallenges.io, Software developer at Telia Finland

Location:
Helsinki Finland
Joined:
Apr 15, 2020

8 Projects with Designs you can do to Become FRONT-END developer

Publish Date: Jul 2 '20
1341 34

Introduction

These are 8 projects with requirements and designs that you can do to become a Front-end developer. The order is from easy to intermediate

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 make sure about different states: Error, Focus..., Accessibility, sizes,... 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 you have to use an API but also managing 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 checking user location. A lot of things to do and practice and 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 to your portfolio.

Conclusion

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

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

Comments 34 total

  • Shuaib Oseni
    Shuaib OseniJul 3, 2020

    Hi, looks like Links are not working

    • Thu Nghiem
      Thu NghiemJul 3, 2020

      which links, it works for me. you can try to copy and paste it

      • Shuaib Oseni
        Shuaib OseniJul 3, 2020

        The Challenges link...also tried copying and pasting, still the same

        • Thu Nghiem
          Thu NghiemJul 3, 2020

          try visit here: devchallenges.io/

          • Shuaib Oseni
            Shuaib OseniJul 3, 2020

            Unfortunately still the same

            • Thu Nghiem
              Thu NghiemJul 3, 2020

              oh wow the first time. it does not support IE. So can you try different browser?

              • Shuaib Oseni
                Shuaib OseniJul 3, 2020

                I'm actually using Chrome, tried other browsers too...still the same

                • Thu Nghiem
                  Thu NghiemJul 3, 2020

                  I asked people to check out the links and it worked for them. Unfortunately I don't know your issues :( Sorry man

  • Rattanak Chea
    Rattanak CheaJul 3, 2020

    Awesome. Will check them out .

  • Jane Tracy 👩🏽‍💻
    Jane Tracy 👩🏽‍💻Jul 3, 2020

    The designs are amazing. I will definitely do the challenges 💯.

    • Thu Nghiem
      Thu NghiemJul 3, 2020

      Thank you so much. Looking forward to see your solutions :)

  • Alen Varazdinac
    Alen VarazdinacJul 4, 2020

    That is an amazing site, exactly what I needed for improving my VueJS skills. Thank you!

    • Thu Nghiem
      Thu NghiemJul 4, 2020

      You are very welcomed. Hopefully you will have fun time there

  • Pankaj Sharma
    Pankaj SharmaJul 4, 2020

    🤯 Look's Interesting
    I will definitely go to try this.

    Thank You
    😉😊

    • Thu Nghiem
      Thu NghiemJul 4, 2020

      haha did I blow your mind? hopefully you will enjoy it :)

  • stuartambient
    stuartambientJul 4, 2020

    Why are they called 'user stories' ? They are not really stories, unless there is a story why they have that requirement ? 😆
    Anyway, appreciate your useful and cool site !

  • Nadiia Kvitchasta
    Nadiia KvitchastaJul 5, 2020

    It looks awesome, thanks for ideas :)
    By the way, I'm too living in Finland

  • ¡ ؛ǝɹɐɥ !
    ¡ ؛ǝɹɐɥ !Jul 6, 2020

    I really need this, thanks!

  • Michal Repec
    Michal RepecJul 6, 2020

    This is really awesome - great idea and awesome site!

    Finally, the perfect resource to send friends when they ask for tips on how to become a web dev. :)

    • Thu Nghiem
      Thu NghiemJul 6, 2020

      Somehow your comment make me so happy that you think this is perfect to share with your friends.

      Thank you for your comments

  • Thu Nghiem
    Thu NghiemJul 8, 2020

    thank you

  • Okoli Eucharia Chidiebere
    Okoli Eucharia ChidiebereJul 25, 2020

    Thanks for this

  • Ibtasam Hassan
    Ibtasam HassanSep 6, 2020

    Everyone is building some start-up apps. But your designs are so cool. I can't wait to jump on one of these projects

    • Thu Nghiem
      Thu NghiemSep 6, 2020

      Haha cannot wait to have you around :)

  • Ataur rahman
    Ataur rahmanJan 12, 2021

    Nice advice

  • Dwayne Crooks
    Dwayne CrooksApr 11, 2024

    The links don't work anymore.

Add comment