MERN Stack Agile Board Application with MySQL Database

This is an open source Kanban board built with React, Node.js, Express and MySQL. It's a Trello-style app with JWT login, workspaces, drag-and-drop tasks and email invitations. It follows the MERN pattern, with MySQL and Sequelize in place of MongoDB for the data layer. The full source is on GitHub.

It was my first MERN project. I built it to understand how Node.js and Express talk to a database and serve a React app, and I deployed the finished app on a VPS. I wrote my commit messages in detail to document what I was learning, and the repository still describes the project as under development.

Project at a glance

• What it is: a Trello-style Kanban board and task manager, with my own design
• Frontend: React 18 (Vite), Redux Toolkit, React Router, react-beautiful-dnd
• Backend: Node.js, Express.js, JWT authentication, Multer, Express Validator
• Database: MySQL with Sequelize v6
• Deployment: VPS with Apache as a reverse proxy
• Source: github.com/Zeeshan607/agile-board-app

What the app does

• Sign up and login with JWT: accounts use hashed passwords and token-based access control, with protected routes on the React side.
• Drag-and-drop boards: tasks are created, edited and moved between columns with react-beautiful-dnd, and the order is saved.
• Workspaces and invitations: users create workspaces, and members join by email invitation.
• Rich tasks: each task can have a priority, a due date, an assignee, subtasks, a discussion thread and a formatted description with image uploads.
• Instant interface updates: Redux Toolkit updates every connected component when an action runs, and redux-persist keeps key user data when the page is refreshed or closed.
• Image uploads: the server accepts task images through Multer and serves them from the API.
• A structured REST API: routes, controllers, models and services are separate, with custom middleware for validation, authentication, error handling and logging.
• Relational data: Sequelize models and relationships cover users, workspaces, boards, columns, tasks, subtasks and comments.

How it's deployed

The Node.js API and the built React app run on a VPS, with Apache as a reverse proxy. It forwards API requests to Node and serves the static front end. The React app talks to the API through a proxy in development and in production. If you need a MERN app deployed the same way, I offer MERN stack server deployment.

What I learned building it

1. APIs with Node.js and Express.js

• Designing a REST API from scratch: routes, HTTP requests and middleware.
• Validating incoming data with Express Validator, so bad input is rejected early.

2. Middleware and error handling

• Writing custom middleware for validation, authentication, errors and logging, which kept the code modular.
• Returning proper HTTP status codes so the client gets meaningful feedback on both client and server errors.

3. File uploads

• Using Multer to receive images and save them, then serving them back from the API.

4. Drag and drop in React

• Building task reordering and column-to-column moves with react-beautiful-dnd.

5. JWT authentication

• Handling registration, login and token-based sessions, then wrapping the logic in custom React hooks so components can reuse it.

6. Sequelize models and relationships

• Defining models for users, workspaces, tasks and columns, with one-to-many and many-to-many relationships, and querying them efficiently.

7. State management with Redux Toolkit

• Sharing state across many components, and persisting the store so key user data survives a refresh.

8. Proxy setup and deployment

• Connecting React to the Node.js API through proxies, and deploying the whole app on a VPS behind Apache.

Source code on GitHub

The whole codebase is public at github.com/Zeeshan607/agile-board-app. You can read the Express API structure, the React components and the Sequelize models. Feel free to fork it or use it as a reference for your own full stack project.

Need something like this built?

If you want a task board, a dashboard or another React and Node.js app, see my full stack web development service. I also build the REST APIs behind apps like this through my API integration and REST API development service. You can see more of my work on the portfolio page, or send me the details through the contact form.

Quick answers

What is this project?

An open source Kanban board built with React, Node.js and Express, with a MySQL database and Sequelize. It has JWT login, workspaces, drag-and-drop tasks and email invitations.

Is it a real MERN stack app if it uses MySQL?

It uses the same stack as MERN, which is React, Node.js and Express. The data layer is MySQL with Sequelize instead of MongoDB.

Is the source code available?

Yes, it's public on GitHub, and you can fork it.

Can you build a custom Kanban or task management app?

Yes. I build React front ends, Node.js and Laravel back ends, and I deploy them. Use the contact form to tell me what you need.