8 educational projects

“A master makes more mistakes than a novice tries”

We offer 8 options for projects that can be done "on a fan" in order to gain real development experience.

Project 1. Trello Clone

')
Clone Trello from Indrek Lasn.

What you will learn:

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

Here is an example of a repository made on React + Redux.

Project 2. Admin Panel

Github Repository.

A simple CRUD app, perfect for learning the basics. Let's learn:

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

Project 3. Cryptocurrency tracker (native mobile application)

Github repository.

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

We will study:

• How native applications work.
• How to extract data from the API.
• How do native page layouts.
• How to work with mobile simulators.

Try this API . Find better - write in the comments.

If 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 the webpack works from the inside. Now it will not be a “black box”, but an understandable tool.

Requirements:

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

Here is an awesome resource for complete newbies.

Project 5. Clone Hackernews

Every Jedi is bound to make his own Hackernews.

What do you learn on the road:

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

Project 6. Tudushechka

TodoMVC.

Seriously? Tudushka? There are thousands of them. But believe me, there is a reason for such popularity.
This application is a great way to make sure you understand the basics. Try to write one application on vanilla Javascript and one on your favorite framework.

Learn:

• Create new tasks.
• Check the filling 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 drag and drop api .

Let's learn:

• Drag and drop API
• Create rich UIs

Project 8. Messenger clone (native application)

You will understand how web applications and native applications work, which makes you stand out from the gray mass.

What we will learn:

• Web sockets (instant messaging)
• How native applications work.
• How templates work in native applications.
• Organization of query processing routes in native applications.

This is enough for you for a month or two.

---

The translation was made with the support of EDISON Software , which professionally develops PHP applications and websites for large customers, as well as developing cloud services and mobile Java applications .