Md. Musfiqur Rahaman
Making a React ToDo App and Deploying it in Vercel

Making a React ToDo App and Deploying it in Vercel

Md. Musfiqur Rahaman's photo
Md. Musfiqur Rahaman
·

3 min read

Table of contents

Making a ToDo app is one of the easiest ways to learn CRUD operations. CRUD means Create, Read, Update, Delete. To create a ToDo app with CRUD functionality using Reactjs, you can follow the steps below. We will also deploy our app in Vercel after making it. Let's start.

Step 1: Set up a new React app

  1. Open your terminal and navigate to the directory where you want to create your app.

  2. Run the following command to create a new React app:

     npx create-react-app todo-app

  3. Navigate into the new project directory:

     cd todo-app

  4. Start the development server:

     npm start

    This will open your app in the browser at http://localhost:3000.

Step 2: Create necessary components and styles

  1. Open the src/App.js file and replace its content with the following code:
import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const handleInputChange = (e) => {
    setNewTodo(e.target.value);
  };

  const handleAddTodo = () => {
    if (newTodo.trim() !== '') {
      const todo = {
        id: todos.length + 1,
        title: newTodo,
      };
      setTodos([...todos, todo]);
      setNewTodo('');
    }
  };

  const handleDeleteTodo = (id) => {
    const updatedTodos = todos.filter((todo) => todo.id !== id);
    setTodos(updatedTodos);
  };

  return (
    <div className="app">
      <h1>Todo App</h1>
      <div className="todo-form">
        <input
          type="text"
          placeholder="Enter a new todo"
          value={newTodo}
          onChange={handleInputChange}
        />
        <button onClick={handleAddTodo}>Add Todo</button>
      </div>
      <ul className="todo-list">
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.title}
            <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;
  1. Open the src/App.css file and replace its content with the following code:
.app {
  background: #209cee;
  height: 100vh;
  padding: 30px;
}

.todo-form {
  margin-bottom: 10px;
}

.todo-list {
  background: #e8e8e8;
  border-radius: 4px;
  max-width: 400px;
  padding: 5px;
}

.todo {
  align-items: center;
  background: #fff;
  border-radius: 3px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  margin-bottom: 6px;
  padding: 3px 10px;
}

Step 3: Deploy the app on Vercel

  1. Make sure you have the Vercel CLI installed. If not, you can install it globally by running:

     npm install -g vercel

  2. Build the production version of your app by running the following command:

     npm run build

  3. In the project directory, run the following command to deploy your app to Vercel:

     vercel --prod

  4. Follow the prompts and provide your Vercel account credentials if requested.

  5. After the deployment is successful, you will receive a URL for your deployed app.

That's it! You have now created a todo app with CRUD functionality using React.js and deployed it on Vercel. You can access your app using the provided URL.

Thanks for reading the article. See you soon on another one.

ReacttodoappVercelJavaScript