MERN Stack Agile Board Application with MySQL Database

Project Overview:

This project is a feature-rich Kanban board application developed using the MERN stack (MySQL, Express.js, React.js, and Node.js)  It was built to enhance project management efficiency by allowing users to create, update, and manage their tasks with ease using drag-and-drop functionality.

The backend API was developed using Node.js and Express.js, while the frontend user interface leverages React.js with Redux for state management. MySQL is used to handle the database requirements, with Sequelize as the ORM to define and manage the data models and their relationships.

This project was a great learning opportunity to gain in-depth knowledge of building a full-stack web application from scratch. — from designing a RESTful API and implementing JWT authentication, to deploying the entire project on a VPS production server. The complete source code for this project is available on GitHub at github.com/Zeeshan607/agile-board-app.

Key Features of This Project:

1. User Authentication:
   Implemented using JSON Web Tokens (JWT), allowing secure user login and registration. The authentication flow includes account creation, password hashing, and token-based access control.

2. Task Management with Drag-and-Drop Functionality:
   Tasks can be created, updated, and moved across different columns using the react-beautiful-dnd library. This feature provides a fluid and user-friendly way to organize tasks.

3. Real-time Updates and State Persistence:
   Utilized Redux for state management, allowing actions to trigger updates across the application. State persistence was implemented to store user data even when the user leaves or refreshes the page.

4. File Uploading:
   Image uploads were handled on the server side using the multer middleware. This allowed users to upload task-related images, which are stored and served by the API.

5. Task Categorization:
   Users can create workspaces, assign tasks to columns, and categorize tasks based on priority, due dates, or completion status.

6. Relational Database with Sequelize:
   I implemented MySQL as the main database, using Sequelize to define models and establish relationships between tables (e.g., Users, Workspaces, Tasks, and Columns). Sequelize also enabled efficient querying and model validation.

7. RESTful API Design:
   The API was built following RESTful principles with a clear separation of concerns. Including custom middleware for validation, error handling, and response formatting.

8. Deployment:
   The project was deployed on a VPS server with a Node.js backend and a React.js frontend, using Apache as a reverse proxy to route API requests and serve static files.

What I Learned and Practiced Building This Open Source Project

1. Building APIs with Node.js and Express.js:

• Designed, structured, and implemented a robust RESTful API from scratch.
• Gained experience in handling HTTP requests, creating routes, and managing middleware in an Express.js application.
• Learned how to handle request validation to ensure data integrity using Express Validator.

2. Middleware Implementation:

• Developed custom middleware functions for request validation, authentication, error handling, and logging.
• Middleware was key in maintaining the modularity and scalability of the application.

3. Request Validation & HTTP Status Codes:

• Became proficient in validating incoming data at different points in the API pipeline.
• Ensured the API provided meaningful feedback in scenarios involving client or server errors using proper HTTP status codes.

4. Image Uploading in Node.js:

• Used multer to handle file uploads and save images to the server.
• Gained insights into how to manage file storage and serve images securely in a web application.

5. Drag-and-Drop Functionality in React:

• Implemented drag-and-drop using the react-beautiful-dnd library.
• Improved user experience by enabling seamless task reordering and column-to-column movement.

6. JWT Authentication for Login Systems:

• Integrated JSON Web Tokens (JWT) for secure login, registration, and token-based session management.

7. Sequelize Models and Relationships:

• Defined Sequelize models for entities such as users, workspaces, tasks, and columns.
• Implemented one-to-many and many-to-many relationships and learned to query them efficiently.

8. Proxy Setup and Deployment:

• Configured the React app to communicate with the Node.js API using proxies in both development and production.
• Successfully deployed the full-stack app on a VPS using Apache as a reverse proxy.

9. State Management with Redux:

• Mastered Redux Toolkit to manage application state across multiple components.
• Implemented store persistence to retain key user data across sessions.
• Used custom hooks to create reusable logic for authentication and shared functionalities.

10. Custom Authentication Hooks:

• Built custom React hooks to streamline the authentication process across different components, improving code reusability and maintainability.

Conclusion:

This MERN stack Kanban board project helped me understand the full development lifecycle of building a web application — from back-end API design to front-end implementation and VPS deployment. It was a comprehensive experience covering database design, state management, and secure JWT authentication.

The challenges I faced throughout the project pushed me to implement best practices in both development and deployment of a production-grade full-stack web application.

📂 Source Code Available on GitHub

The full source code for this MERN stack Kanban board application is publicly available on GitHub. You can browse the codebase, explore the Node.js API structure, React component architecture, and Sequelize database models at github.com/Zeeshan607/agile-board-app. Feel free to fork it, raise issues, or use it as a reference for your own full-stack projects.