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. I learned everything from designing a RESTful API, implementing authentication, to deploying the entire project on a VPS production server.

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. This includes 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:

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

• I learned how to design, structure, and implement a robust RESTful API.
• I gained experience in handling HTTP requests, creating routes, and managing middleware in an Express.js application.
• Additionally, I learned how to handle request validation to ensure data integrity using tools like Express Validator.

2. Middleware Implementation:

• Developed custom middleware functions for tasks like 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:

• I became proficient in validating incoming data at different points in the API pipeline.
• By learning how to handle HTTP status codes, I ensured that the API provided meaningful feedback, especially in scenarios involving client or server errors.

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 functionality in the Kanban board using the react-beautiful-dnd library.
• This helped improve the user experience by enabling seamless task reordering and movement between columns.

6. JWT Authentication for Login Systems:

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

7. Sequelize Models and Relationships:

• Defined Sequelize models to represent the application's entities such as users, workspaces, tasks, and columns.
• I learned how to create one-to-many and many-to-many relationships between models and how to query these models effectively using Sequelize.

8. Proxy Setup and Deployment:

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

9. State Management with Redux:

• Mastered Redux to manage application state across multiple components.
• Implemented store persistence to ensure that key user data is retained across sessions.
• Used custom hooks to create reusable logic for authentication and other 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 deployment. It was a comprehensive experience that allowed me to delve deep into essential web development concepts such as database design, state management, and secure authentication.

The challenges I faced throughout the project helped me grow as a developer, enabling me to learn and implement best practices in both the development and deployment of a full-stack web application.