Here are 8 great projects to train your coding muscles! Our goal is to build each application with your favorite technology stack. Use whatever content you want to ensure there are no conflicts!

Project #1: Trello Clone

Demo ：https://trello-copy-ddiaorohmd.now.sh/

You will clone a Trello:

  1. routing
  2. Drag and drop
  3. Create a new object (board, list, card)
  4. Handle input and validation
  5. Client path: How to use local storage, save data to local storage, and read data from local storage.
  6. Server-side path: How to use the database, save data to the database, and read data from the database.

The one with the React + Redux example: https://github.com/wesharehoodies/simple-trello.

Project #2: User admin dashboard

Simple CRUD application, important foundation. You will learn:

  1. Create and manage users.
  2. And database – create, read, edit, delete users.
  3. Input validation and how to process the form.

Project #3: Cryptocurrency tracker (native mobile app)

This is a Native application — Swift, Objective-C, React Native, Java, Kotlin.

You will learn:

  1. How native applications work.
  2. Get the data from the API.
  3. How the local layout works.
  4. How to use the mobile emulator.

Using this API (https://coinmarketcap.com/api/). Comment if you find a better one.

If you’re interested in how to build it, I wrote a tutorial for it (https://medium.com/react-native-training/bitcoin-ripple-ethereum-price-checker-with-react-native-redux-e9d076) 037092).

Project #4: Setup your very own webpack config from scratch

Well, it’s not an application, but it’s still very useful for technically understanding how we work under WebPack. It will no longer be a “black box” but will give you a powerful tool.

Requirements:

  1. Compile ES7 back to ES5. (basic)
  2. Compile JSX to.js or.vue to.js (you’ll learn about loaders)
  3. Set up the WebPack Dev service and module hot loading. (VuE-CLI and React applications are used)
  4. Use Heroku, now.sh, or GitHub to prepare for production environment setup and future deployment. (You’ll learn how to deploy the WebPack project)
  5. Set your favorite precompiled CSS – SCSS, LESS, stylus.
  6. Learn how to use images and SVG in WebPack.

There is a good resource (HTTP: / / https://codeburst.io/easy-guide-for-webpack-2-0-from-scratch-fe508a3ce44e? Source = user_profile 31 — — — — — — — — — — — — — — — — — — — — — — — — -), can service for beginners.

Project #5: Hackernews clone

Everyone builds their own version of hacker news, and we are no exception.

Here’s what you need to learn:

  1. HackerNews API.
  2. Create a single-page application.
  3. How to implement features such as view comments, individual comments, profiles, etc.
  4. Routing.

Below is the hacker news API documentation (https://github.com/HackerNews/API).

Project #6: Todo App

The backlog application is a great way to illustrate the fundamentals. Try writing it in basic JavaScript and build it with your favorite framework/library.

What you will learn:

  1. Create a new task.
  2. Validate the field.
  3. Filter tasks (completed, active, all). Use filters to reduce features.
  4. Understand the fundamentals of JavaScript.

Project #7: A sortable drag and drop list

The sample (https://github.com/atlassian/react-beautiful-dnd) to understand the drag and drop API (https://developer.mozilla.org/en-US/docs/Web/API/HTML_Dra G_and_Drop_API) is very useful. If you can create complex applications, you can stand out.

What you will learn:

  1. Drag and drop API
  2. Create a rich user interface

Project #8: A messenger clone (native app)

What you will learn:

  1. Web socket (instant messaging)
  2. How native applications work.
  3. How the layout works locally.
  4. Routing of local applications.

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

Thank you for reading this article. If you like this, don’t forget to retweet it and let more people see it!

Please be sure to follow my Twitter (https://twitter.com/lasnindrek)!

Xiaozhi translation, share a vue.js entry-level family bucket series tutorial:

1. Vue. Introduction to js and improve: xc.hubwiz.com/course/vue….

2. Vuex 2 entry and improve: xc.hubwiz.com/course/vuex

3. Vue – introduction to the router and improving: xc.hubwiz.com/course/vuer…

4. Vue. Js engineering practice: xc.hubwiz.com/course/vueg…