8 study projects

"The master makes more mistakes than the novice tries"

We offer 8 project options that can be done “for fun” in order to gain real development experience.

Project 1. Trello clone

Trello clone by 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.
• From the client side: how to use local storage, how to store data in local storage, how to read data from 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 repositorymade with 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.

Anything: Swift, Objective-C, React Native, Java, Kotlin.

We study:

• How native apps work.
• How to retrieve data from API.
• How native page layouts work.
• How to work with mobile simulators.

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

If interested, here 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 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 (you'll have 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 how to deploy webpack projects.
• Set up your favorite preprocessor to compile css - scss, less, stylus.
• Learn how to use images and svgs with webpack.

This is an awesome resource for complete beginners.

Project 5. Hackernews clone

Every Jedi is required to make 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 such features 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.
The Tudu app is a great way to make sure you understand the basics. Try writing one application in vanilla Javascript and one in your favorite framework.

Learn:

• Create new tasks.
• Check field completion.
• Filter tasks (completed, active, all). Use filter и reduce.
• Understand the basics of Javascript.

Project 7. Sortable drag and drop list

Github repository.

Very helpful 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 both web applications and native applications work, which will set you apart from the gray mass.

What we will study:

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

This will be enough for you for a month or two.

The translation was made with the support of the company EDISON Softwarewho professionally deals development of applications and websites in PHP for large customers, as well as development of cloud services and mobile applications in Java.

Source: habr.com