Trello - MERN stack kanba style Work management web application

Trello is a web-based, kanban-style, list-making application.

Users can create task boards with different columns and move the tasks between them. Typically columns include task statuses such as To Do, In Progress, Done. The tool can be used for personal and business purposes including real estate management, software project management, school bulletin boards, lesson planning, accounting, web design, gaming, and law office case management.

back-end github repo

Database schema

Open to read

Technologies

Front-end:

• ReactJS, React-router-dom (protected routes), React-hook-form, React-toastify
• Material UI, DND kit library
• Redux, Redux persist
• Axios (custom interceptors), cross-env

Back-end:

• RESTful API built with NodeJS (Express Framework)
• custom errorHandlingMiddleware; multer middleware for uploading image
• Resend EaaS for sending email; Cloudinary image API
• JSON Web Token Authorization & Authentication (stored in HttpOnly Cookie)
• Joi schema description language,
• cors

Database: MongoDB Atlas

Built tools: Vite, ESLint, Yarn, Babel, Node Version Manager

Application Requirements 👀

Open to read

👉 Users can create new account using their email

👉 Users must verify their email by clicking a verification link sent to their inbox

👉 Users can login, logout and switch account. Users must login again after 2 weeks

👉 Users can change account information: displayed user name, password

👉 Users can upload image file as avatar

👉 User can create new board. Each board contains columns and columns' cards. Each user can have multiple boards (apply pagination).

👉 Users can create new column and add cards to those column.

👉 Users can change columns' order by drag and drop

👉 Users can drag and drop cards in the same column

👉 Users can also drag and drop card to other columns in the same board

👍 App needs Dark Mode and user can set light or dark mode based on computer preference.

What I gained from building this project 😎

Open to read

🔵 I try to apply all my knowledge into this project and follow best practices for clean coding.

🔵 Manage sensitive environment variables such as API keys using dotenv & cross-env. All sensitive data are stored in a single file .env which must NOT be pushed to Github.

🔵 Token-based Authentication & Authorization with JWT

• The access token & refresh token is stored as HttpOnly cookie which forbids JavaScript from accessing the cookie. The cookie will be send with HTTP request to the server
• Use Axios Interceptor to refresh JWT on the front-end

🔵 Writing custom Axios interceptors

• Prevent spam-clicking in form submit buttons.
• Handle all responses' error status code & message in one place (clean code)

🔵 Front-end routing

Using ProtectedRoute, if user not log in => always re-direct to /login page

🔵 Back-end routing:

Route, Middleware, Validation, Controller, Service, Model

🔵 Project file structure follows best practice which makes it easy to read, maintain and keeping each source codes file modular and reusable.

• Front-end ReactJS: pages, components, redux, apis, assets, customLibraries
• Back-end Express: routes, middlewares, controllers, services, models, config, utils, etc...

🔵 Front-end form validation with regex and react-hook-form. Back-end data validation with joi

🔵 Managing Front-end states in application with Redux:

Using Redux persist to store user slice into local storage. When user reload page, the user slice is not erased.

🔵 Using back-end and front-end pagination technique to show user boards.

🔵 Give users a way to toggle between light modes, dark mode and system preference by using Material UI useColorScheme hook. Also stored user's preference in local storage.

🔵 Write highly reusable React Functional Components, with custom styling by leveraging Material UI styled-component

Examples: Reusable AppBar Component, FieldErrorAlert Component, and ModeSelect Component with custom styling

🔵 Professional large frontend application planning:

• From gather business requirements, frontend architecture, thinking about the data flow through the entire application
• and then Break the application into categories of features.
• Choosing suitable Technology Stack for high quality frontend development.

🔵 This application is built with Performance and Maintainability in mind.