Create a Full Stack TODO list Application using React, Node JS, Express, MySQL, and Tailwind CSS

Creating a full stack TODO list application using React, Node, Express, MySQL, and Tailwind CSS can be a great way to improve your skills as a full stack developer. In this tutorial, I will guide you through the process of setting up the backend API with Node and Express, setting up the database with MySQL, building the frontend with React, and styling the application with Tailwind CSS.

1. Setting up the backend API with Node and Express:

First, you need to set up a new Node project by running the following commands in your terminal:

mkdir backend
cd backend
npm init -y

Next, install the required dependencies for the backend API:

npm install express mysql body-parser

Create a new file called server.js and add the following code to set up a basic Express server:

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
const PORT = 5000;

app.use(bodyParser.json());

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Now, you can start the backend API by running node server.js in your terminal. This will start the server on port 5000.

1. Setting up the database with MySQL:

Next, you need to set up a MySQL database for storing the TODO list items. You can create a new database and table using the following SQL commands:

CREATE DATABASE todo_list;
USE todo_list;

CREATE TABLE todos (
  id INT PRIMARY KEY AUTO_INCREMENT,
  title VARCHAR(255) NOT NULL,
  completed BOOLEAN NOT NULL DEFAULT false
);

Make sure to update the database connection details in your server.js file:

const mysql = require('mysql');

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'todo_list'
});

connection.connect((err) => {
  if (err) throw err;
  console.log('Connected to the database');
});

1. Building the frontend with React:

To create a new React project, run the following commands in your terminal:

npx create-react-app frontend
cd frontend
npm install axios

Replace the contents of src/App.js with the following React code to fetch and display the TODO list items from the backend API:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:5000/todos')
      .then((res) => {
        setTodos(res.data);
      })
      .catch((err) => {
        console.error(err);
      });
  }, []);

  return (
    <div>
      <h1>TODO List</h1>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.title} - {todo.completed ? 'Completed' : 'Incomplete'}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

1. Styling the application with Tailwind CSS:

To add Tailwind CSS to your React project, install it using the following command:

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Run the following command to generate the Tailwind CSS configuration file:

npx tailwindcss init

Update the src/index.css file to include the Tailwind CSS styles:

@tailwind base;
@tailwind components;
@tailwind utilities;

You can now start the React development server by running npm start in the frontend directory. This will open the TODO list application in your browser with the data fetched from the backend API and styled with Tailwind CSS.

In this tutorial, we have covered the process of creating a full stack TODO list application using React, Node, Express, MySQL, and Tailwind CSS. This application can serve as a great starting point for building more complex full stack applications in the future. Experiment with different features and functionalities to enhance your skills as a full stack developer.