Skip to content

Todo List React + Node.js

In this tutorial, you will learn how to make a to-do list application from scratch using the latest Javascript technologies. It will guide you through the setup, implementation, and build of the frontend, backend, and database parts.

Here is the list of things we are going to use:

Node.js + Express - will be used to create REST API and database querying

  • MongoDB - non-relation database permanent storage where we will store our data

  • React.js - library for our client-side application to display content to the user

  • Redux - will be used for React.js application state handling

  • Tailwind CSS - CSS framework which will provide us different predefined CSS selectors and components

  • Typescript - TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale

  • Framer Motion [Optional] - will be used to create simple animations for our todo list

Pre-requirements

To be able to follow this tutorial, you will need a few things setup on your machine.

  1. Node.js server - You will need Node.js server setup on your machine, version should be >= 14.0. In order do install node on your machine, please go to their official website here https://nodejs.org/ and follow the steps to install it based on the OS you are using.

    After you completed the installation proccess, please open the Terminal (Console) and type node -v. If your installation was successful, you should see the following output "v.16.13.1" which tells you the Node version you installed.

    Node installation comes with npm package manager as well, which is the default package manager for the JavaScript runtime environment Node.js. To verify that npm was installed as well, you can again type npm -v in your Console and the output should be something like "8.1.2".

    Output versions of node and npm can vary based on what Node version you installed.

  2. npx package - npx package should be installed by default when you install Node.js. To verify it, you can do the same thing here. Access your Console, enter npx -v and it should output "8.1.2".

    If it does not output the version, and it says that the command is unknown, you can install it globally using npm like npm i -g npx

    When that is done, you should close your Console, open it again and check the version. It should output you the version now.

  3. IDE - Integrated development environment IDE is the software we will use to help use write our code. There are many different solution, but for this project we will go with Visual Studio Code (not Visual Studio - these are different).

    You can go to their official website here and download and install version for your OS. https://code.visualstudio.com/

After the installation is done, your environment is setup and you are ready to write some code.

About the Author

This tutorial was authored by Haris Vreto and vetted by industry experts for correctness. Haris is currently working for Morpher as a Full-Stack engineer, developing blockchain enabled Vuejs and React-Native applications.

Last update: March 28, 2022