MERN Kanban Board - Front-end

This project was part of a (full-stack) course at the University of Applied Sciences Rotterdam. This is the front-end part for an API that we created. I chose to build a kanban board.

Tech Stack

Client: Bootstrap (bootstrap-react), React

Server: Node, Express, MongoDB

Lessons Learned

This was my first app using React. I have learned to:

• Implement the basic CRUD functionalities (using my own api) using react components
• Use the React hooks useState, useEffect, useContext, useRef, Fragments, Custom hooks
• Work with JWT tokens and React protected routes (by using context and custom hooks) (back-end implementation tutorials followed from Dave Gray as this was my first time working with JWT and protected routes in React. I expanded this system by checking ownership of boards instead of the universal system he created.
• Work with the libraries react-beautiful-dnd and react-router
• Work with Socket.IO for a real-time application when creating/deleting/moving/editing cards etc. using rooms and events.

Future additions

Due to the lack of time there are plenty of things that I was not able to implement. In the future I would like to add the following:

• Live updates through Socket.IO
• Ability to add boards
• Add indexes to list order and fix bug when dragging a card in the same list
• Add an authentication and Authorization system
• Deploy front-end
• Add ability to add members

Screenshots

Run Locally

Clone the project

  git clone https://github.com/Isissss/MERN-Frontend

Go to the project directory

  cd my-project/client
  cd my-project/server

Install dependencies

  npm install

Start the server

  /cd my-project/server
  npm run server

  /cd my-project/client
  npm run start