Task Manager App using Express, React and GraphQL.

The Task Manager app tool is designed to simplify task management with CRUD operation: creation, deletion, and modification of tasks. Users can easily generate new tasks, remove completed ones, and update task details. In this step-by-step tutorial, you will learn the process of building a Basic Task Manager App with Express, React and GraphQL.

Preview of final output: Let us have a look at how the final application will look like.

Prerequisites

• Node JSs
• React
• Express
• GraphQL

Approach to create Task Manager App:

• Creating a Task Manager application involves using React for the front end and Express with GraphQL for the back end.
• The front end is built with React, a JavaScript library for building user interfaces, and utilizes Apollo Client for state management.
• Apollo Client is employed for handling data fetching and mutations through GraphQL queries in the front end.
• Communication between the front end and back end occurs via Express, a Node.js framework, with express-graphql middleware managing GraphQL queries.
• The backend defines a GraphQL schema with queries and mutations specifically designed for tasks.
• Task management is handled in memory on the server side, utilizing GraphQL's capabilities for querying, creating, updating, and deleting tasks.
• Apollo Client's useQuery and useMutation hooks facilitate interaction between the frontend and backend, fetching tasks and updating the UI dynamically.
• The application follows a client-server architecture, where React interacts with Express through GraphQL for CRUD operations on tasks.

Steps to create Application and install dependencies

Step 1: Create a new directory for your project and navigate it to the terminal using the following commands

mkdir task-manager-app
cd task-manager-app

Step 2: Create a new React app using Create React App.

npx create-react-app client
cd client

Step 3: Install the required dependencies.

npm install @apollo/client graphql

Project Structure:

The updated dependencies in package.json file will look like :

Frontend Dependencies:

"dependencies":{ 
 "react":"18.2.0", 
 "@apollo/client": "3.8.8", 
 "@apollo/react-hooks": "4.0.0", 
 "react-dom": "18.2.0", 
 "graphql": "16.8.11"
}

Backend Dependencies

"dependencies": { 
 "express": "4.18.2", 
 "express-graphql": "0.12.0", 
 "graphql": "15.8.0", 
 "cors": "2.8.5", 
 "apollo-server-express": "3.13.0"
}

Example: Add the following code in client/src/App.js

Now the Frontend of the app is ready and we are moving forward to the backand of the app.

Step 4: In the main project directory, create a new file named server.js for the Express server.

npm init -y
touch server.js

Step 5: Install the required dependencies for Express and GraphQL using below command :

npm install express express-graphql graphql cors

Example: Now, copy and paste the following code into server.js:

Step 6: Run and Test the App

Backend:

node server.js 

Frontend:

cd client 
npm start

Output :