Todo List React + Node.js¶
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
Framer Motion [Optional] - will be used to create simple animations for our todo list
To be able to follow this tutorial, you will need a few things setup on your machine.
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.
npm -vin 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.
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 -vand 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.
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.