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.