This is an app built with MERN Stack, and you can access the live demo HERE and you can CLICK the following image to watch video!
Click the image to watch video!
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.
- 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
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 |
-
Download nodejs here
-
For database, you can use local mongodb or mongo atlas. See here
-
Clone the repository:
git clone https://github.com/umurdogann/trello-clone-mern
-
Change directory:
cd trello-clone-mern
-
Open second terminal same location:
- Ubuntu:
gnome-terminal
- Windows:
start
- Ubuntu:
-
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