{"id":15041634,"url":"https://github.com/jugshaurya/trelloclone","last_synced_at":"2025-07-04T01:04:57.762Z","repository":{"id":104223042,"uuid":"230257040","full_name":"jugshaurya/trelloclone","owner":"jugshaurya","description":"Personal Project : Trello Clone","archived":false,"fork":false,"pushed_at":"2020-02-28T18:35:26.000Z","size":20862,"stargazers_count":6,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-14T20:41:59.454Z","etag":null,"topics":["axios","bcrypt","bootstrap4","jsonwebtoken","marked","mongoose","multer","node-sass","passport","passport-jwt","passport-local","react","redux","redux-logger","redux-thunk"],"latest_commit_sha":null,"homepage":"https://trello-clone.jugshaurya.now.sh","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jugshaurya.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-26T12:01:53.000Z","updated_at":"2023-09-11T07:04:48.000Z","dependencies_parsed_at":"2023-07-15T14:32:41.037Z","dependency_job_id":null,"html_url":"https://github.com/jugshaurya/trelloclone","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jugshaurya/trelloclone","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jugshaurya%2Ftrelloclone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jugshaurya%2Ftrelloclone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jugshaurya%2Ftrelloclone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jugshaurya%2Ftrelloclone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jugshaurya","download_url":"https://codeload.github.com/jugshaurya/trelloclone/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jugshaurya%2Ftrelloclone/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263427303,"owners_count":23464842,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","bcrypt","bootstrap4","jsonwebtoken","marked","mongoose","multer","node-sass","passport","passport-jwt","passport-local","react","redux","redux-logger","redux-thunk"],"created_at":"2024-09-24T20:46:18.710Z","updated_at":"2025-07-04T01:04:57.721Z","avatar_url":"https://github.com/jugshaurya.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Trello clone ([Visit Now](https://clone-trello.now.sh))\n\n\u003cimg src=\"https://img.shields.io/badge/made%20with-react-cyan.svg\" alt=\"made with react\"\u003e \u003cimg src=\"https://img.shields.io/badge/made%20with-scss-pink.svg\" alt=\"made with scss\"\u003e \u003cimg src=\"https://img.shields.io/badge/made%20with-redux-purple.svg\" alt=\"made with redux\"\u003e \u003cimg src=\"https://img.shields.io/badge/made%20with-multer-red.svg\" alt=\"made with multer\"\u003e\u003cimg src=\"https://img.shields.io/badge/made%20with-moongose-green.svg\" alt=\"made with moongose\"\u003e \u003cimg src=\"https://img.shields.io/badge/made%20with-bcrypt-yellow.svg\" alt=\"made with bcrypt\"\u003e \u003cimg src=\"https://img.shields.io/badge/made%20with-express-grey.svg\" alt=\"made with express\"\u003e \u003cimg src=\"https://img.shields.io/badge/made%20with-passport-blue.svg\" alt=\"made with passport\"\u003e \u003cimg src=\"https://img.shields.io/github/last-commit/jugshaurya/trello-clone\" alt=\"last-commit\"\u003e \u003cimg src=\"https://img.shields.io/github/languages/code-size/jugshaurya/trello-clone\" alt=\"code-size\"\u003e\n\n```\n\n💎 Trello is a web-based Kanban-style list-making application and this projects clones it down,\nadding most of the features which can give a user to add some kanban to their projects idea.\n```\n\n### Peek a Boo!\n\n![Peek](./app.gif)\n\n### ER Diagram\n\n![ER DIAGRAM](./erdiagram.png)\n\n### Run server\n\n```\ncd server \u0026\u0026 npm run dev\n```\n\n### Run client\n\n```\nyarn start\n```\n\n### Wanna Clone it ?\n\n- git clone {this repo}\n- create a mongodb Atlas Cluster and get connection uri\n- make sure you have two now secrets\n\n  - mongo_uri = \"connection uri with user and password\"\n  - jwtsecretkey=\"random string\"\n\n- add a .env file and add same two secrets like .env.sample file so work in development mode.\n- deploy / Redeploy\n\n### Redeploy\n\n- make changes\n- make sure you have two now secrets\n\n  - mongo_uri\n  - jwtsecretkey\n\n- now\n- now alias https://trello-clone.jugshaurya.now.sh clone-trello.now.sh\n\n#### UI/UX -DESIGN\n\n- linear-gradient(135deg, #0079bf, #5067c5)\n- background-color: #0079bf;\n- box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n\n#### Progress\n\n- [x] Generate Server\n  - [x] node + express\n  - [x] mongodb connection + mongoose\n    - [x] trello-clone db\n      - [x] users collection\n  - [x] auth - local SignIn using Passport\n  - [x] jwt\n  - [x] bcrypt to hash pass\n- [x] Generate Client\n  - [x] Create a react app\n  - [x] use react-bootstrap/ant design or write from scratch\n  - [x] Add redux-logger\n  - [x] Add redux-thunk\n- [x] Add local auth to server\n- [ ] TODO: Add client data validation on server use JOI\n- [ ] Add signin and signup to client\n  - [x] Create Form for Both\n  - [ ] Add Client Side Validation of data @server, checking and showing errors: use joi\n  - [x] save token after signin inside localstorage\n- [x] Add boards service to server\n- [x] User can create/view boards on client\n  - [x] Create new Board\n    - [x] Add ownerId\n  - [x] View all the boards\n    - [x] show user's boards not of others\n- [x] view single board using id param to route\n  - [x] @server : add GET /boards/id=3027593 route and route handler\n- [ ] User can create/view lists for boards\n  - [x] @server\n    - [x] create new list in board, POST : /lists/:boardId\n    - [x] get all , GET: /lists/:boardId\n  - [x] @client : create board Component\n    - [x] get all lists in a board\n    - [x] create new list\n  - [ ] Restrict only the owner to create a new list\n- [x] create/view cards in list\n  - [x] @client\n  - [x] @server : service to server\n- [x] Drag Cards from one list to another\n  - [x] Options: (https://github.com/mzabriskie/react-draggable) or\n        (https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) or\n        (http://jsfiddle.net/zfnj5rv4/) or (https://www.npmjs.com/package/react-draggable-list)\n- [x] make logged in user visible on navbar\n- [x] user can edit the card\n- [x] User can add image/attachment to a card (https://codeburst.io/image-uploading-using-react-and-node-to-get-the-images-up-c46ec11a7129).\n- [x] npm multer\n- [x] Add redux and create basic store files\n- [x] Create activities service on server\n- [x] All activities are logged\n  - [x] dragging card activity\n  - [x] creating card activity\n  - [x] create list activity\n  - [x] card Update Activity\n    - [x] card title change\n    - [x] card photo change\n    - [x] card descritption change\n- [x] user can add description to card\n- [x] Style refactor\n- [x] Delete Board\n- [x] Delete List\n- [x] Show all the available boards on a specific board so it is easy to switch b/w boards\n- [x] Deploy front end and backend\n\n#### Stretch\n\n- [ ] Add funtionality to boards to mark them favorites\n  - [ ] show all fav boards under fav sections\n\n* [ ] Restrict only the board owner to\n  - [x] Access his/her boards only\n  - [ ] create a list or create a card\n* [ ] User can add other members to a board\n* [ ] Update restrict to board owner to include members\n* [ ] User can re-arrange lists\n* [ ] restrict to board members\n* [ ] User can assign a member to a card\n* [ ] restrict to board members\n* [ ] User can add comments to a card\n* [ ] restrict to board members\n\n- [ ] Add Socket-io for real time board sharing\n- [ ] Arrange Lists and card and change order\n- [ ] Archieve Cards and Lists\n\n#### Thank you Links\n\n- https://blog.logrocket.com/how-to-use-bootstrap-with-react-a354715d1121/\n- https://fonts.google.com/?selection.family=PT+Sans\n- https://getbootstrap.com/docs/4.4/layout/overview/\n- https://vectr.com/new\n- https://digitalsynopsis.com/design/beautiful-color-ui-gradients-backgrounds/\n- https://blog.bitsrc.io/react-production-deployment-part-2-now-c81657c700b7\n- https://zeit.co/guides/deploying-a-mongodb-powered-api-with-node-and-now\n\n#### Special Thanks to Coding Gardan CJ for the project idea\n\n```\nhe used Featherjs and Vue to made the same but I am going to make it in React and backend from scratch, will be\n\ntaking the pointers about what to implement and using his entity relationship Diagram to make my database structure.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjugshaurya%2Ftrelloclone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjugshaurya%2Ftrelloclone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjugshaurya%2Ftrelloclone/lists"}