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

Robinhood Style Stock Price Chart


image

Robinhood has a beautiful chart for displaying prices for various stocks. As you move around the chart, the creeping line changes with a scrolling text animation. If you are curious about how to create this kind of animation, then this repository can be extremely useful.

What can you learn by building a stock price chart in the Robinhood style:

  • How to get stock price data via API.
  • How to display a graph with different timelines (for example, display prices for 3 months, six months, a year, etc.)
  • Recreating scrollable animation.

You can use this API to receive stock quotes. If you know the best API that you can use for free, post it in the comments below.

Clone CodeSandbox


CodeSandbox is an online code editor and prototyping tool that accelerates the creation and sharing of web applications.

image

Do not overcomplicate, try to implement only the most basic functions. Focus on the editor as it is the most useful feature.

What you learn by creating a CodeSandbox clone: ​​

  • How to render and run HTML, CSS and JavaScript inside a browser.
  • How to reboot with the display of the change in real time both in the editor and in full view.
  • How to generate an embedded URL. Embedding allows you to include a sandbox in your documentation, blog post, or site using an iframe (or anywhere else with Embedly support, such as Medium, Reddit, Trello, and Notion). You can only show the code, the preview, or all together.

Clone Whoishiring


Whoishiring presents the most relevant jobs in the form of a map. Job seekers can easily find employers in the most attractive place for them.

image

What you learn by creating a Whoishiring clone: ​​

  • How to work with different cards and draw on them.
  • Work with complex layouts, for example, with a map and side navigation that must be synchronized.
  • Working with a database to receive tasks. I would recommend using dummy data, since this is just a clone, your goal is to hone your front-end skills.

Clone Stackoverflow (Q & A only)


Whenever developers encounter a problem, StackOverflow is the first place they turn to. This is a smart friend who has all the necessary answers!

Stackoverflow is a huge site, so don't try to clone it in its entirety. Start with questions and answers. Give users the opportunity to ask questions, answer them, and tag.

image

What you learn by building a StackOverflow clone.

  • Working with a database such as PostgreSQL or MongoDB. Questions and answers should be stored in and retrieved from the database whenever someone opens your StackOverflow clone.
  • Tagging posts and implementing search with indexing. You must provide a concise but comprehensive search for users. You also need to realize the ability to search for questions and answers using simple keywords like CDMY0CDMY or CDMY1CDMY.

Website uptime monitor


There are many services that let you control application performance and uptime.They are easy to implement, so why not build one for fun?

imagebr>
What will you learn by creating a clone of a runtime monitor:

  • Work with the terminal. How to use the command line and check the status of the site. If the site returns the code CDMY2CDMY, do nothing. If he returns the code CDMY3CDMY or CDMY4CDMY, notify by email.
  • plotting. Everyone wants to use intuitive and fresh looking applications. Create beautiful graphs to display server status.

Newton's pendulum on CSS


Newton's pendulum is a device that demonstrates the conservation of momentum and energy through a series of swaying spheres. When one sphere at the end rises and falls, it acts on the fixed spheres, transmitting through them the force that pushes the last sphere up.
image

What will you learn by building a clone of Newton's pendulum:

  • Working with keyframe in CSS and creating animations.

If you decide to use Canvas in JavaScript, then this is great.

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:



Useful


.

Source