loading...

5 Javascript Projects You Should Build as Junior Frontend Developer

slawomirkolodziej profile image Sławek Kołodziej Originally published at slawkolodziej.com ・4 min read

When looking for a first job as a Junior Front-end developer it's very hard to show your experience as a programmer. Your projects used as a playground for learning new skills will rarely also offer good code quality. It's impossible to write perfect code if you write something for the first time! In the end, our public code repository will consists of a bunch of unfinished projects. You wouldn't want your future employer to see all of it.

This is why I encourage you to reuse your skills in practice once again. This time also taking into consideration code quality. Here is a list of project examples you could build to show off your skills.

1. Build a Blog Template with HTML and CSS

https://symu.co/freebies/templates-4/blog-psd-template/

When you just start learning front-end development it's important to consolidate your knowledge about HTML and CSS. Building a Blog Template is a good idea for your first bigger project. Do not worry about design, there are many resources available online.

Requirements:

  • build a homepage, single post page, and contact page
  • try using CSS Grid
  • your page should be responsive (RWD)

Nice to haves:

  • add a slider
  • use real content instead of Lorem Ipsum

2. Build a Tic-tac-toe game with Pure JavaScript

https://www.google.com/search?q=tic+tac+toe

Building a game in a browser can be a great exercise to test your JavaScript skills. You will have to react to user events, interact with DOM, and store game data. It's also a great project to show to your colleagues and family!

Requirements:

  • welcome screen with name and symbol input for each player
  • rendering a symbol when a user clicks on the empty cell
  • win verification

Nice to haves:

  • creating a scoreboard and saving it to local storage
  • playing with the computer, using ex. minmax algorithm or your own solution

3. Location sharing with Pure JavaScript and Maps Service

A simple app where you can share location with your friend can be both a demanding project and a very useful tool you can use. In this project, you will use JavaScript to interact with external services for maps (ex. Google Maps or OpenStreetMap).

Requirements:

  • displaying your current location on a map
  • "Share" button which creates a link with your current location
  • a page which displays a location embedded in URL

Nice to haves:

  • sharing your realtime location, you will have to save it and read it every few seconds from an external database (ex. Firebase)
  • displaying the realtime location of your friend when he accesses the page

4. Build TV Series Tracker with JS Framework (React, Vue, Angular or other)

This project will help every TV Series fan, track premieres of new episodes. It will be a great opportunity to use a JavaScript framework you are comfortable with.

Requirements:

  • searching for TV Series using external API (ex. TVMaze API)
  • adding TV Series to the tracking list
  • displaying tracked TV Series list along with newest episode premiere date
  • single page view with more details about TV Series
  • saving tracking list to local storage

Nice to haves:

  • sending emails or push notifications when a premiere is coming

5. Home Budget App with JS Framework (React, Vue, Angular or other)

https://www.spendee.com//

Creating a home budget App will be an ultimate check for your skills as a Junior Front-end Developer. It will check your ability to create forms and store information, but it can also help you save money!

Requirements:

  • adding a category
  • adding expense with name, amount and category
  • sum up of monthly spendings split into categories
  • saving data to an external database (ex. Firebase)

Nice to haves:

  • sign up, log in, and handling multiple users

Summary

Side projects are a great way to show your skills to land first job as Junior Front-end Developer. Let your potential employer know what did you build so far. They will not only look at the webpage but also analyze your code, so make sure it's clean.

Before you start building something new create a list of requirements for MVP (Minimum Valuable Product). During development, you will discover more interesting functionalities your application can have, just add it as a nice to have to the list. It will help you finish the project on schedule.

Remember, you don't have to mimic those examples 1-to-1. Feel free to change, add or remove any detail you like. If you have older projects you used for learning new skills you can always refactor it and put it in a portfolio.


This article was originally published on slawkolodziej.com. Visit my blog for more content on web development.

Discussion

pic
Editor guide
Collapse
nopito profile image
Elizabeth Manrique

Nice! Adding my two cents here, I found that github.com/florinpop17/app-ideas is also a good source of ideas for projects in case someone is looking for it. It has different levels of ideas based on the complexity, along as clear expectations about the features to build.

Collapse
blaquebeardcoder profile image
blaquebeardcoder

These are some awesome gems!! Thanks for sharing this resource!

Collapse
andrewbaisden profile image
Andrew Baisden

Cool some nice projects here.

Collapse
usamaidrsk profile image
Usama Idriss Kakumba

Thanks these are quite interesting projects to try out

Collapse
blaquebeardcoder profile image
blaquebeardcoder

This is super helpful! Thank you for sharing!

Collapse
bobiology profile image
Sakawa Elijah Bob

Great insight! Definitely I’ll jump and run with one. Thanks

Collapse
devhalimah profile image
Halimah

So helpful

Thanks for sharing

Collapse
eman_sasu7 profile image
Emmanuel Sasu

Thank you so much. I'll definitely try one of these!

Collapse
nelsonb1130 profile image
Nelson Prabu J

Thats good info.. Thanks for sharing...

Collapse
nyirendasosten profile image
sosten nyirenda

Awesome. I have been developing multiple pages website but never developed a game. Think its about time. Thanks for sharing

Collapse
theketan2 profile image
Ketan Ramteke

Very Noice 😄

Collapse
sarangpratham profile image
Collapse
shruti270199 profile image
Shruti

This is exactly what I was searching for <3