The Secret to Being a Top Developer Is Building Things! Here’s a List of Fun Apps to Build!

Indrek Lasn
Dec 1, 2017 · 5 min read
Image for post
Image for post

You can only become a great developer if you’re willing to put effort into itit. Imagine for a moment. You can’t become physically fit by reading a lot about fitness. You actually need to go to the gym and put in the hours and sweat! The same concept applies to code.

Here are eight fantastic projects to train your coding muscles. The goal is to build each app with whatever technology stack you prefer. Keep it conflict-free, use whatever you want!

Project 1. Trello Clone

Image for post
Image for post
Trello clone by Indrek Lasn — Demo Link

What you’ll learn from building a Trello clone:

  • Routing.
  • Drag and drop.
  • Creating new objects (boards, lists, cards).
  • Handling inputs and validation.
  • Client-side path: how to use local storage, save data to the local storage, and read data from the local storage.
  • Server-side path: how to use databases, save data to the database, and read data from the database.

Here’s the example Repository — created with React and Redux.

Project 2. User Admin Dashboard

Image for post
Image for post
Github Repository

Simple CRUD app, great for fundamentals. What you will learn:

  • Creating users, and managing users.
  • Interacting with a database — creating, reading, editing, and deleting users.
  • Input validation and how to work with forms.

Project 3. Cryptocurrency Tracker (Native Mobile App)

Image for post
Image for post
Github repository

Has to be a native app — Swift, Objective-C, React Native, Java, and Kotlin are allowed.

What you will learn:

  • How native apps work.
  • Fetching data from an API.
  • How native layouts work.
  • How to work with mobile simulators.

Use this API. Post in the comments if you find a better one.

In case you’re interested in how this was built, I wrote a tutorial for it.

Project 4. Setup Your Very Own Webpack Config From Scratch

Image for post
Image for post

Well, technically this is not an app, but it’s still extremely useful to understand how webpack works under the hood. No longer will it be a “black box”, but a strong tool under your belt.

Requirements:

  • Compile es7 to es5 (basics).
  • Compile .jsx to .js, or, .vue to .js (you will learn about loaders).
  • Setup of webpack dev server and hot module reloading. (vue-cli and create-react-app use both.)
  • Make a production-ready build, and deploy it using Heroku, now.sh or GitHub pages. (You will learn how to deploy webpack projects.)
  • Setup your favorite preprocessor to compile to plain CSS — SCSS, Less, Stylus.
  • Learn how to use images and SVGs with webpack.

Here’s a great resource to getting started for absolute beginners.

Project 5. Hacker News Clone

Image for post
Image for post

Everyone has built their own version of Hacker News — let’s not be an exception.

What you will learn is the following:

  • Interacting with the Hacker News API.
  • Creating single-page apps.
  • How to implement features, such as viewing comments, single comments, and profiles.
  • Routing.

Here’s the Hacker News API documentation.

Project 6. To-do App

Image for post
Image for post
TodoMVC

Really? A to-do app? How many of these are there already? Yes — I know. But hear me out — there’s a reason why they’re so popular.

A to-do app is a great way to ensure you learn the fundamentals. Try building it with plain vanilla JavaScript, and then one with your favorite framework/library.

What you will learn

  • Creating new tasks.
  • Validating fields.
  • Filtering tasks (completed, active, all). Make use of filter and reduce functions.
  • Understanding the fundamentals of JavaScript.

Project 7. A Sortable Drag and Drop List

Image for post
Image for post
Github repository

It’s very useful to understand the drag and drop API. It makes you really stand out from the rest if you’re able to create complex apps.

What you will learn:

  • Drag and drop API.
  • Creating rich UIs.

Project 8. A Messenger Clone (Native App)

Image for post
Image for post

Understanding how native apps and web apps work will make you stand out from the crowd.

What you will learn:

  • Web sockets (instant messaging).
  • How native apps work.
  • How layouts work in native.
  • Routing for native apps.

Conclusion

These should keep you busy for a month or two, pick something and just build it! In case you need a little motivation push to get started, here’s a guide on “How To Stay Motivated As A Developer”.

If you want to take your JavaScript abilities to the next level, I’d recommend reading the “You Don’t Know JS” book series.

Thanks for reading! ❤

Better Programming

Advice for programmers.

Indrek Lasn

Written by

Node + React web engineer, High Quality Tech Writers For-hire: https://vowelmagic.com/, connect with me on Twitter @ https://twitter.com/lasnindrek

Better Programming

Advice for programmers.

Indrek Lasn

Written by

Node + React web engineer, High Quality Tech Writers For-hire: https://vowelmagic.com/, connect with me on Twitter @ https://twitter.com/lasnindrek

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store