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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.)
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.
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.
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.
The blogging platform has users. You can not give the opportunity to leave posts to just anyone. Need a function to register new users.
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.
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.