Front-end training: making clones of Discord, Jira, SoundCloud, Apple Stock, chess, voice acting and currency rates

We bring to your attention ideas / tasks (not solutions) for self-study and hone skills.



image



SoundCloud clone



SoundCloud is an online audio distribution and music sharing platform. The site allows you to download songs, like them and share them.



image



What you will learn by creating a SoundCloud clone:



  • How to load and store songs in the database.
  • All the basics of working with a media player - how to play tracks, rewind, pause, etc.
  • How to share tracks with friends.
  • How to display a graph showing the duration and progress of a song.


Jira clone



Jira is used for bug tracking, issue tracking, and project management. The name "Jira" actually comes from the Japanese word "Gojira" which means "Godzilla".



image



What you will learn by creating a Jira clone:



  • Drag and Drop API in HTML .
  • The formation of roles and user rights.
  • Assigning and reassigning tasks between different users.
  • Marking tasks as completed, and archiving, deleting, and editing various tasks.


Apple Stocks clone



Apple Stocks makes it easy to follow stocks and the stock market. View quotes and daily dynamics in a customizable list, and click on any item to see an interactive chart and key details.



image



What you will learn by creating a clone of Apple Stocks:



  • How to get stock prices asynchronously via API.
  • How to create stock price charts.
  • Sending price notifications. So, for example, if the stock price is up or down by 10%, send an alert.
  • A list of your favorite stocks that you actively follow.


Use this API to get information about stock prices. If you know a free and public API for the stock market, please post it in the comments below.



Chess clone



Chess is a two-player strategy board game played on a checkered board with 64 squares arranged in an 8x8 grid.



image



What will you learn by building a chess clone:



  • How to display an 8x8 grid.
  • Each piece has certain rules that dictate how it can move around the chessboard. Therefore, it is necessary to implement logic that is critical for the game in order for the game to conform to traditional chess rules. Here are the rules for playing chess .
  • Drag and Drop API in HTML .
  • How to track points, keep track of wins, losses and draws. How to store results in a PostgreSQL database .


Voice over text



A text-to-speech app for people with speech disabilities. Text-to-speech solutions make your products and services more attractive to different user groups.



image



What you will learn by building a clone of a text reader:



  • How to use the Web Speech API .
  • How to create a responsive user interface.
  • How to switch between different voices and accents.


Currency rate calculator



The Currency Rate Calculator calculates the difference between two or more currencies and their rates.



image



What you will learn by building a currency calculator clone:



  • How to get currency rates from API - use this API .
  • How to display cost and exchange rates for both currencies.
  • How to update values ​​in real time depending on changes in the value of a currency.


Discord clone



Discord is an all-in-one voice and text chat for gamers, yet it's free, secure and works on both desktop and smartphones. Discord is extremely popular for communication among developers, gamers, and casual users.



image



What you will learn by building a Discord clone:



  • Websocket API . Websockets are used in chat rooms for real-time communication.
  • The formation of various user roles and permissions (for example, administrators, content moderators and regular users).
  • Activate microphones and start voice communication.
  • Creating multiple chats and using multiple websockets.


image


Learn the details of how to get a sought-after profession from scratch or Level Up in skills and salary by completing SkillFactory paid online courses:












All Articles