We continue a series of projects for training.
- 9 projects to hone front-end craftsmanship
- Six Tasks for Front-End Developer
- Entertaining practice for the developer
- 8 training projects
- Another list of projects to practice on
The article was translated with the support of EDISON Software, which created a unidirectional information transfer system between river and sea vessels based on wireless optics , as well as software porting and migration .
Layer
www.reddit.com/r/layer
Layer is a community where everyone can draw a pixel on a common “board”. The original idea was born on Reddit. The r / Layer community is a metaphor for co-creation that everyone can be a creator and contribute to a common cause.
What will you learn to create your Layer project:
- How JavaScript canvas works, the ability to operate canvas is a critical skill in many applications.
- How to coordinate user permissions. Each user can draw one pixel every 15 minutes and do not have to log in.
- Create cookie sessions.
Squoosh
squoosh.app
Squoosh is an image compression application with many advanced options.
20 Mb gif 
By creating your version of Squoosh you will learn:
- How to work with image sizes
- Learn the basics of the Drag'n'Drop API
- Understand how API and event listeners work
- How to upload and export files
Note: The image compressor is local. It is not necessary to send additional data to the server. You can have a compressor at home, or you can have a server of your choice.
Calculator
Come on? Seriously? Calculator? Yes, exactly, a calculator. Understanding the basics of mathematical operations and how they work together is a critical skill to simplify your applications. Sooner or later you will have to deal with numbers and the sooner the better.
jarodburchill.github.io/CalculatorReactApp
By creating your own calculator you will learn:
- Work with numbers and mat operations
- Practice with event listeners API
- How to arrange elements, deal with styles
Crawler (Search Engine)
Everyone used a search engine, so why not create your own? Crawlers are needed to search for information. They are used by everyone every day and the demand from time to time for this technology and specialists will only grow.
Google search engine
What to learn by creating your own search engine:
- How do crawlers work?
- How to index sites and how to rank them by rating and reputation
- How to store indexed sites in a database and how to work with a database
Music Player (Spotify, Apple Music)
Everyone listens to music - it's just an integral part of our lives. Let's create a music player to better understand how the basic mechanics of a modern music streaming platform work.
Spotify
What to learn by creating your own music streaming platform:
- How to work with the API. use Spotify or Apple Music APIs
- How to play, pause or rewind to the next / previous song
- How to change the volume
- How to manage user routing and browser history
PS
What projects would you suggest to “repeat” yourself in order to pump your skill?