Trello Clone With MERN Stack!

 

Purpose

My purpose of developing this project is to show what I can do both on the frontend and the backend. I would also like to point out that it is my first project as MERN stack.

 

Features

• Fully responsive design like Trello
• Register and Login
• Create multiple boards, select any background and add members
• Create multiple lists
• Create multiple cards
• Drag and drop lists or cards
• Change title and background of board
• Add description for board
• Change title of lists
• Add description, cover color, members, labels, start date, due date, multiple checklist and multiple attachements
• Delete boards, lists or cards
• Track all activity logs of cards and boards
• Comment on cards or boards
• Search boards or cards titles

 

Used Technologies

Server Side	Client Side	Only Development
expressjs	styled-components	nodemon
express-unless	reduxjs-toolkit
mongoose	react-beautiful-dnd
cors	material-ui
path	axios
dotenv	date-fns
jsonwebtoken	moment
bcryptjs	atlaskit/css-reset
	react-hook/mouse-position
	react-router
	react hooks

 

How to run?

• Download nodejs here

• For database, you can use local mongodb or mongo atlas. See here

• Change directory:

  cd trello-clone-mern

• Open second terminal same location:

  • Ubuntu:   gnome-terminal
  • Windows:   start

• Change directory of first terminal and install packages:

  cd server

  npm install

• Create .env file in server directory like .env.example and enter required variables

• Start the server:

  npm run start

• Switch the second terminal

• Change directory of second terminal and install packages:

  cd client

  npm install

• Start the client:

  npm run start