by Indrek Lasn

The secret to being a top developer is building things! Here’s a list of fun apps to build!

You can only become a great developer by putting the effort in. Imagine for a moment — You can’t become fit physically by reading a lot about fitness. You actually need to go to the gym and put the hours and sweat in! Same concept applies for coding as well.

Note; This article was originally published at strilliant.com — give some love to the original!

The secret to being a top developer is building things! Here's a list of fun apps to build
You can only become a great developer by putting the effort in. Imagine for a moment - You can't become fit physically…www.strilliant.com

Here are 8 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

Trello clone by Indrek Lasn — Demo Link

What you will 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, saving data to the local storage, reading data from the local storage.
  • Server side path: How to use databases, saving data to the database, reading data from the database.

Here’s the example Repository — done with React+Redux.

Project #2: User admin dashboard

Github Repository

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

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

Project #3: Cryptocurrency tracker (native mobile app)

Github repository

HAS to be a native app — Swift, Objective-C, React Native, Java, Kotlin 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 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

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 “blackbox” 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 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 starter for absolute beginners.

Project #5: Hackernews clone

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 hackernews API.
  • Creating single page apps
  • How to implement features such as viewing comments, single comments, profiles.
  • Routing.

Here’s the Hacker News API documentation.

Project #6: Todo App

TodoMVC

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

todo app is a great way to insure 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

Github repository

Very useful to understand the drag and drop api. Makes you stand out from the noise 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)

Understanding both how native apps and web apps work will make you easily 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.

Those should keep you busy for a month or two, pick something and just build it! You can do it!

Indrek Lasn (@lasnindrek) | Twitter
The latest Tweets from Indrek Lasn (@lasnindrek). Author, software engineer, founder👨🏼‍💻 Follow me for exciting…twitter.com

The secret to being a top developer is building things!
Due to high demand I’m extending the list of fun apps to build. 😁medium.com All You Need To Know About CSS-in-JS
TL;DR: Thinking in components — No longer do you have to maintain bunch of style-sheets. CSS-in-JS abstracts the CSS…hackernoon.comLet’s build a customizable rich text editor with Slate and React
What is a rich text editor anyway?medium.com👆 Pointer events with React — The why, how, what?
Let’s talk about events, more specifically pointer events.medium.com The best front-end hacking cheatsheets — all in one place.
It’s rather impossible to remember all the APIs by heart. This is when cheatsheets jump in! Here are the best front-end…medium.freecodecamp.org✨ Immensely upgrade your development environment with these Visual Studio Code extensions
Let’s talk about Code — Visual Studio Code.medium.freecodecamp.orgLet’s Build: Cryptocurrency Native Mobile App With React Native + Redux
Demo — What we will be buildingmedium.comThe ultimate list of resources to mastering Swift and iOS development — 2018 edition
Swift is a general-purpose, multi-paradigm, compiled programming language developed by Apple Inc. for iOS, macOS…medium.comSupercharge your debugging experience for Node.js
You see this, what do you do?medium.com

Thanks for reading! ❤