DEV Community

Cover image for Why To-Do List should be your first web-app
Divyansh Chahar
Divyansh Chahar

Posted on

Why To-Do List should be your first web-app

If you have just started to venture into the world of JavaScript projects, you must have come across a lot of tutorials that explain how to make a To-Do list app. The same can be said even if you are looking for beginner-friendly project ideas for either frontend or backend javascript framework\library projects.

Based on my experiences (and mistakes) so far I would recommend that you start with a To-Do-List. A To-Do-List app is the most uncomplicated, straightforward, no-frills way to learn how CRUD operations are performed in the framework/library you are trying to learn. This is a good project to start with even if you are trying to become a fullstack developer.

What are CRUD operations?

"CRUD" is an acronym for

C - Create

R - Read

U - Update

D - Delete.

CRUD operations form the basis of every web app whether it is the frontend or the backend.

In the next section, crud operations will be explained with real-life examples of a social media website

Examples of CRUD operations in the frontend and backend

Let us suppose you are an avid reader of a social media platform. As soon as you decide to make a new post you are creating new content i.e. uploading either text or media. You are adding to the list of UI elements that render posts. Also, a POST request is sent to the backend to add media or text to the database. This is an example of the create operation.

When you decide to modify any post that you have made in the past you are changing either the text or the media rendered on your screen. As soon as you hit save a PUT request is made to the backend to edit the data in the database, this is an example of the update operation.

When you decide to take down a post, you delete an entry from the list of UI layouts that render the posts accompanied by a DELETE request to the backend which deletes the data from the database Thus we can say it is an example of delete operations.

Top comments (0)