Here Are 5 Front-End Challenges — Nov. 2019 Edition
Sharpen your front-end skills by building these apps
One of the most efficient ways to grow as a developer is to simply build as often as possible. Sharpen your front-end skills by building the following apps.
Here are five front-end ideas you can start building today.
1. Notion Clone
The Notion app improves workflow for docs, tasks, lets you create to-do tasks, and sync all data between devices, such as your mobile phone, tablet, and laptop.
What you will learn by building the Notion app
- HTML Drag and drop API. The user may select draggable elements with a mouse, drag those elements to a droppable element, and drop them by releasing the mouse button.
- How to sync real-time data between your phone and laptop.
- Since we’re allowing users to create, read, update, and delete notes (CRUD) — we’re learning the essential CRUD skills.
2. Repl.it Clone
Useful for code interviews or quick demos. Pretty neat!
What you will learn by building the Repl.it clone
- How to run and execute server-side code on the browser (client-side).
- Reading input, such as the code editor, and displaying the output results. Notice the
sayHellofunction results being outputted to the console on the right.
- How to create files and folders on the web and save the results.
- How to highlight code syntax.
3. Google Photos Clone
Google Photos is a photo-sharing and storage service developed by Google.
Uploading, cropping, and in-general working with pictures is key to any modern application. Users want to upload avatars, share cat pictures — it’s important you know how to work images efficiently.
What you will learn by building the Google Photos clone
- How to create responsive images on phones, tablets, laptops, and even bigger screens such as TVs.
- How to handle image uploads, especially handling bigger images (>1mb) and bulk uploads.
- Image file processing, cropping, and resizing photos for thumbnails or when opening a gallery.
- Bonus: How to store images in the cloud or local database.
4. Gifsky Clone
It produces animated GIFs that use thousands of colors per frame.
What you will learn by building the Gifski clone
- How to convert video files such as .mp4 to .gif (image) format.
- How to use the Drag and Drop HTML API.
- How image optimization and processing work.
Note: Gifsky is open-source and on GitHub!
5. Cryptocurrency Price Tracker
What you will learn by building the cryptocurrency price tracker clone
- How to work with APIs and fetch data remotely from an API.
- How to display data in a list form.
Bonus: If you’re interested, I wrote a tutorial about building a cryptocurrency price tracker with React Native a while ago.
Note: Here’s a GitHub example repository.
Thanks for reading, I hope you found an interesting project to work on. If you liked this type of post, here’s the previous post about front-end challenges.
Stay curious and happy coding!