Sławek Kołodziej

Posted on Oct 28, 2020 • Edited on Jan 17, 2021 • Originally published at slawkolodziej.com

5 Javascript Projects You Should Build as Junior Frontend Developer

#javascript #webdev #beginners

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

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

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)

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:

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.

I'm regularly publishing my insights on web development.
Consider subscribing to my newsletter.
Visit my blog at slawkolodziej.com to find out more interesting content.
Follow me on Twitter.

Top comments (14)

Elizabeth Manrique • Oct 29 '20

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.