Front End Training Tasks: CodeSandbox, Robinhood, Whoishiring, Stackoverflow Clones
Robinhood Style Stock Price Chart
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.
CodeSandbox is an online code editor and prototyping tool that accelerates the creation and sharing of web applications.
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 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.
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.
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.
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?
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.
What will you learn by building a clone of Newton's pendulum:
- Working with keyframe in CSS and creating animations.
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:
- Profession Web developer (8 months)
- 450 free courses from the Ivy League
- Trends in the Data Scene 2020
- Data Science has died. Long live Business Science
- Data Scenes on Steroids: Introducing Decision Intelligence
- The most successful and most scandalous Data Science project: Cambridge Analytica