Trello clone (Visit Now)
💎 Trello is a web-based Kanban-style list-making application and this projects clones it down,
adding most of the features which can give a user to add some kanban to their projects idea.
cd server && npm run dev
yarn start
-
git clone {this repo}
-
create a mongodb Atlas Cluster and get connection uri
-
make sure you have two now secrets
- mongo_uri = "connection uri with user and password"
- jwtsecretkey="random string"
-
add a .env file and add same two secrets like .env.sample file so work in development mode.
-
deploy / Redeploy
-
make changes
-
make sure you have two now secrets
- mongo_uri
- jwtsecretkey
-
now
-
now alias https://trello-clone.jugshaurya.now.sh clone-trello.now.sh
- linear-gradient(135deg, #0079bf, #5067c5)
- background-color: #0079bf;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
- Generate Server
- node + express
- mongodb connection + mongoose
- trello-clone db
- users collection
- trello-clone db
- auth - local SignIn using Passport
- jwt
- bcrypt to hash pass
- Generate Client
- Create a react app
- use react-bootstrap/ant design or write from scratch
- Add redux-logger
- Add redux-thunk
- Add local auth to server
- TODO: Add client data validation on server use JOI
- Add signin and signup to client
- Create Form for Both
- Add Client Side Validation of data @server, checking and showing errors: use joi
- save token after signin inside localstorage
- Add boards service to server
- User can create/view boards on client
- Create new Board
- Add ownerId
- View all the boards
- show user's boards not of others
- Create new Board
- view single board using id param to route
- @server : add GET /boards/id=3027593 route and route handler
- User can create/view lists for boards
- @server
- create new list in board, POST : /lists/:boardId
- get all , GET: /lists/:boardId
- @client : create board Component
- get all lists in a board
- create new list
- Restrict only the owner to create a new list
- @server
- create/view cards in list
- @client
- @server : service to server
- Drag Cards from one list to another
- make logged in user visible on navbar
- user can edit the card
- User can add image/attachment to a card (https://codeburst.io/image-uploading-using-react-and-node-to-get-the-images-up-c46ec11a7129).
- npm multer
- Add redux and create basic store files
- Create activities service on server
- All activities are logged
- dragging card activity
- creating card activity
- create list activity
- card Update Activity
- card title change
- card photo change
- card descritption change
- user can add description to card
- Style refactor
- Delete Board
- Delete List
- Show all the available boards on a specific board so it is easy to switch b/w boards
- Deploy front end and backend
- Add funtionality to boards to mark them favorites
- show all fav boards under fav sections
- Restrict only the board owner to
- Access his/her boards only
- create a list or create a card
- User can add other members to a board
- Update restrict to board owner to include members
- User can re-arrange lists
- restrict to board members
- User can assign a member to a card
- restrict to board members
- User can add comments to a card
- restrict to board members
- Add Socket-io for real time board sharing
- Arrange Lists and card and change order
- Archieve Cards and Lists
- https://blog.logrocket.com/how-to-use-bootstrap-with-react-a354715d1121/
- https://fonts.google.com/?selection.family=PT+Sans
- https://getbootstrap.com/docs/4.4/layout/overview/
- https://vectr.com/new
- https://digitalsynopsis.com/design/beautiful-color-ui-gradients-backgrounds/
- https://blog.bitsrc.io/react-production-deployment-part-2-now-c81657c700b7
- https://zeit.co/guides/deploying-a-mongodb-powered-api-with-node-and-now
he used Featherjs and Vue to made the same but I am going to make it in React and backend from scratch, will be
taking the pointers about what to implement and using his entity relationship Diagram to make my database structure.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent