5 Projects Every Frontend Developer Should Create

5 Projects Every Frontend Developer Should Create

So, you are a beginner front-end developer or a programmer interested in web development and aiming for a full stack. There is some knowledge, there are courses taken, but there is no distinct portfolio and not enough imagination to do something tolerable for this very portfolio.

The guide below is something in the spirit of a simple cheat sheet. She will give you hints on what to do, what projects to complete, so that later you can show off to the employer, and what technologies to learn in order to become a universal soldier, capable of creating a simple calculator and a full-fledged analogue of YouTube.

Calculator

Since we are talking about him, we will start with a calculator. This is perhaps one of the most common projects developed by novice programmers after mastering "Hello, World".

It's easy to make a program that adds two and two, but it can be more difficult.

Firstly, there are many templates with beautiful calculator designs on the web. Repeat one of them. This will improve your layout skills. You can also make several themes and the function of switching between them.

  • Upgrading the qualifications of a layout designer and CSS specialist.
  • We add points to the feeling of beauty.
  • Explore the useful Pixel Perfect extension for checking app design against layout.

Secondly, calculators come in different formats. Some work in the natural language parsing mode, that is, they process natural expressions like 10+2/2 in the form of text and perform correct calculations. Thirdly, you can add a converter to the calculator, not only stable units, but also constantly changing ones, such as currencies of different countries.

  • We work with regular expressions.
  • At the basic level, we learn how to run Node.js applications.
  • Learning to work with the cheerio library for data scraping.

You can make a calculator both in pure JavaScript and in frameworks. Since the application is not particularly complex, you can try your hand at developing with vue or React.

Weather app

Weather services are very easy to develop. Until you start adding functionality to them a little more complex than the basic one.

First you need to connect to the free API and add a forecast to the application. With a search by city, preferably.

  • Mastering the API for searching countries and cities.
  • Setting up an API to retrieve weather information.
  • Gaining skills in working with REST API.

Also, weather forecast programs require a nice visual design. Here you can roam. For example, change the image on the background depending on the weather or the selected city.

  • We make an understandable and not too confusing switch structure.
  • We find a collection of images or videos on stocks. We will use them as a background for weather data.

If you delve into the wilds, then you should also fasten notifications with automatic geolocation detection so as not to force a person to look for their city every time they enter the application.

Task Manager

A relatively simple project when it comes to a simple to-do list. But things get radically more complicated when you add reminders, the ability to view your schedule as a calendar, the ability to attach files, the ability to create different task lists, and the option to tag items with tags.

Add a grid-grid with days of the week or month. As well as the ability to add new tasks to each day (you will need to remember how to work with arrays). A big plus will be the implementation of the function of dragging tasks from one day to another.

  • Layout page using flex or grid.
  • Let's use the basic array methods to add data to the database in a structured way.
  • Adding drag&drop functionality.

To add the other features described above, you can turn each task into an object with a specific set of keys. For example, with the "tags" key, which will contain data from the corresponding field when creating a new task.

And if there are tags, it would be nice to add a system for filtering tasks by these tags, title, and other characteristics.

  • We work with relational databases.
  • We use the filter and includes array methods to create a search algorithm.

The stack can be anything, but it will be difficult to do without frameworks. The main thing is that it should not be some kind of monstrous Angular.

Online Store

one of the most massive projects in our selection. It becomes difficult even at the interface design stage, since you have to pay attention to many small details. We need to learn how to add static elements that will save their state on different pages of the application, as well as reusable components for clothes (or other goods) from the database.

  • We use props to generate many similar elements with different properties.
  • We train skills in working with structures in the spirit of __layout in Svelte.
  • We get data from the database (GET method).

Integral parts of online stores are baskets and panels with selected products. To implement them, you will need to use the IndexedDB database built into the browser.

  • Learning how to interact with the IndexDB database
  • We use the GET and POST methods to modify information in the database.

To add to your work, you can make your own implementation of the database. LowDB is suitable for this purpose. This is a simplified version of the NoSQL database that allows you to operate on information like regular JSON objects. LowDB also supports GET and POST methods by default.

  • We create our database based on LowDB and json-server.
  • We publish this whole thing on Heroku hosting so that the database lives on the network.

Also, such a site should have a built-in search engine that helps to find products not only by name, but also by characteristics (size, category, color, etc.)

  • We structure the data in objects so that they have clearly defined properties that can be used in the search.
  • We create a product filtering system.

All modern frameworks are suitable for creating such an application, but I recommend Svelte. It greatly simplifies development due to its convenient syntax and simplified component inheritance model. But if you are more experienced with React or vue then this will be a great help for your portfolio.

Blog platform

One of the most difficult projects in terms of implementing functionality. Designing the interface of a blogging platform is not so difficult, it is enough to make a grid with posts and a couple of buttons for adding posts and deleting them.

  • Typesetting posts using grid.
  • We make a lot of reusable components so that the design is automatically applied to new posts.

Difficulties begin at the stage of implementing the functionality of such an application. You need to add new posts to the database (POST method). Texts and images will be added, and for this you need a markdown editor.

  • You need to learn how to connect to popular databases like MySQL or MongoDB.
  • Connect the library with a markdown editor or create your own editor.

The blogging platform has users. You can not give the opportunity to leave posts to just anyone. Need a function to register new users.

  • Learn how to validate user data using regular expressions.
  • We create new records in the database during registration.
  • We use cookies to automatically authorize the site visitor.

You need to establish a connection between the user in the database and his posts in order for this to be a full-fledged working blog. If you can add comments on the same principle, it will be very good.

Instead of a conclusion

Perhaps this cheat sheet will inspire you to develop. But it is not necessary to implement only what is written or copy the layouts presented in the article. Train your imagination, try to improve each application and make it more interesting than thousands of the same. Both animated cat calculator themes and complex data processing algorithms or track recommendations in your own Spotify equivalent are welcome.