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.

Peek a Boo!

ER Diagram

Run server

cd server && npm run dev

Run client

yarn start

Wanna Clone it ?

• 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

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

UI/UX -DESIGN

• linear-gradient(135deg, #0079bf, #5067c5)
• background-color: #0079bf;
• box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

Progress

• Generate Server
  • node + express
  • mongodb connection + mongoose
    • trello-clone db
      • users collection
  • 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
• 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
• create/view cards in list
  • @client
  • @server : service to server
• Drag Cards from one list to another
  • Options: (https://github.com/mzabriskie/react-draggable) or
    (https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) or
    (http://jsfiddle.net/zfnj5rv4/) or (https://www.npmjs.com/package/react-draggable-list)
• 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

Stretch

• 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

Thank you Links

• 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

Special Thanks to Coding Gardan CJ for the project idea

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.