8 educational projects

‘An expert makes more mistakes than a beginner - in attempts’

We offer 8 project ideas that can be done "for fun" to gain real development experience.

Project 1. Trello Clone

Trello clone by Indrek Lasn.

What you will learn:

• Organization of request handling routes (Routing).
• Drag and drop.
• How to create new objects (boards, lists, cards).
• Processing and validating input data.
• From the client side: how to use local storage, how to save data in local storage, how to read data from local storage.
• From the server side: how to use databases, how to save data in the database, how to read data from the database.

Here is an example repository, made with React+Redux.

Project 2. Admin Panel

Github Repository.

A simple CRUD application, perfect for learning the basics. You will learn to:

• Create users, manage users.
• Interact with the database — create, read, edit, delete users.
• Input validation and working with forms.

Project 3. Cryptocurrency Tracker (native mobile app)

Github repository.

Using anything: Swift, Objective-C, React Native, Java, Kotlin.

We will learn:

• How native applications work.
• How to extract data from APIs.
• How native page layouts function.
• How to work with mobile simulators.

Try this API. If you find a better one, let us know in the comments.

If you're interested, here is a tutorial.

Project 4. Set up your own webpack config from scratch

Technically, this is not an application, but a very useful task to understand how webpack works internally. It will no longer be a "black box," but a clear tool.

Requirements:

• Compile es7 to es5 (basics).
• Compile jsx to js  — or  .vue to .js (you will need to learn loaders)
• Set up webpack dev server and hot module reloading. (vue-cli and create-react-app use both)
• Use Heroku, now.sh or Github, learn to deploy webpack projects.
• Set up your favorite preprocessor to compile css  —  scss, less, stylus.
• Learn how to use images and svgs with webpack.

Here is an awesome resource for complete beginners.

Project 5. Hackernews Clone

Every Jedi should create their own Hackernews.

What you will learn along the way:

• How to interact with the hackernews API.
• How to create a single-page application.
• How to implement features such as viewing comments, individual comments, profiles.
• Organization of request handling routes (Routing).

Project 6. Todo App

TodoMVC.

Seriously? A to-do app? There are thousands of them. But believe me, there’s a reason for such popularity.
A to-do application is a great way to ensure you understand the basics. Try building one app with vanilla JavaScript and one with your favorite framework.

Learn how to:

• Create new tasks.
• Validate input fields.
• Filter tasks (completed, active, all). Use filter and reduce.
• Understand the basics of JavaScript.

Project 7. Sortable drag and drop list

Github repository.

Very useful to understand the drag and drop API..

Let's learn:

• Drag and drop API
• Create rich UIs

Project 8. Messenger clone (native app)

You will understand how both web applications and native applications work, which will set you apart from the crowd.

What we will study:

• Web sockets (instant messaging)
• How native applications work.
• How templates work in native applications.
• Organizing request handling routes in native applications.

That should be enough for a month or two.

Translation supported by EDISON Software, who specializes professionally in developing applications and websites on PHP for large clients, as well as developing cloud services and mobile applications on Java.

Source: habr.com