Building a Task Management App with Rails and React
Task management is a critical aspect of any project or organization. With the rise of web technologies, it has become essential to develop task management applications that are efficient, user-friendly, and provide real-time updates. In this tutorial, we will explore the process of building a task management app using the popular web development frameworks, Ruby on Rails and React.
Prerequisites
Before we begin, make sure you have the following installed:
-
- Ruby on Rails: The framework that will handle our backend logic.
- PostgreSQL: A powerful open-source database that integrates seamlessly with Rails.
- Node.js: A JavaScript runtime environment to execute our React code.
- React: A JavaScript library for building user interfaces.
Setting Up the Rails Backend
First, let’s create a new Rails application:
$ rails new task-management-app
$ cd task-management-app
Next, we need to generate a model and controller for managing tasks:
$ rails generate model Task name:string description:text completed:boolean
$ rails generate controller Tasks index create update destroy
Now, let’s create the necessary routes in the config/routes.rb
file:
Rails.application.routes.draw do
resources :tasks, only: [:index, :create, :update, :destroy]
root 'tasks#index'
end
Implementing the React Frontend
Now, let’s set up the React frontend of our task management app. We will use Create React App
to quickly scaffold our React application:
$ npx create-react-app frontend
$ cd frontend
Modify the src/App.js
file to include our task management logic:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [tasks, setTasks] = useState([]);
const [newTaskName, setNewTaskName] = useState('');
useEffect(() => {
fetchTasks();
}, []);
const fetchTasks = async () => {
const response = await axios.get('/tasks');
setTasks(response.data);
};
const createTask = async () => {
await axios.post('/tasks', { name: newTaskName });
setNewTaskName('');
fetchTasks();
};
return (
Task Management App
type="text"
value={newTaskName}
onChange={(e) => setNewTaskName(e.target.value)}
/>
{tasks.map((task) => (
- {task.name}
))}
);
}
export default App;
Connecting the Backend and Frontend
Now that we have set up both the Rails backend and React frontend, we need to connect them together. In the config/initializers/cors.rb
file, uncomment the following line to allow cross-origin requests:
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
origins '*'
resource '*', headers: :any, methods: [:get, :post, :put, :delete]
end
end
Finally, let’s run our application:
# Terminal Tab 1 - Start Rails backend
$ cd task-management-app
$ rails s
# Terminal Tab 2 - Start React frontend
$ cd frontend
$ npm start
Note: Make sure both Rails backend and React frontend are running concurrently for the app to function properly.
Conclusion
Congratulations! You have successfully built a task management app using Rails and React. This application provides a solid foundation that can be expanded with additional features like task editing, due dates, priority levels, and user authentication. We hope this tutorial has been helpful in understanding the integration of Rails and React to build modern web applications.
Leave a Reply