{"id":26316705,"url":"https://github.com/ganeshsrambikal/iitb_trello","last_synced_at":"2026-04-30T11:34:57.632Z","repository":{"id":46987665,"uuid":"407708312","full_name":"GaneshSrambikal/iitb_trello","owner":"GaneshSrambikal","description":"Trello Mockup -Simple Todo with task tracking.","archived":false,"fork":false,"pushed_at":"2021-09-18T20:28:44.000Z","size":1430,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-11-06T22:03:26.579Z","etag":null,"topics":["bootstrap","bootstrap4","javascript","react","reactjs"],"latest_commit_sha":null,"homepage":"https://optimistic-bardeen-794d3d.netlify.app/","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/GaneshSrambikal.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}},"created_at":"2021-09-17T23:56:27.000Z","updated_at":"2023-03-08T01:08:06.000Z","dependencies_parsed_at":"2022-09-02T22:40:19.133Z","dependency_job_id":null,"html_url":"https://github.com/GaneshSrambikal/iitb_trello","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/GaneshSrambikal/iitb_trello","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GaneshSrambikal%2Fiitb_trello","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GaneshSrambikal%2Fiitb_trello/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GaneshSrambikal%2Fiitb_trello/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GaneshSrambikal%2Fiitb_trello/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GaneshSrambikal","download_url":"https://codeload.github.com/GaneshSrambikal/iitb_trello/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GaneshSrambikal%2Fiitb_trello/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32463892,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T22:27:22.272Z","status":"online","status_checked_at":"2026-04-30T02:00:05.929Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["bootstrap","bootstrap4","javascript","react","reactjs"],"created_at":"2025-03-15T13:16:31.041Z","updated_at":"2026-04-30T11:34:55.838Z","avatar_url":"https://github.com/GaneshSrambikal.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Trello_MockUp\n\nA Simple Todo Web App with task tracking.\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) and uses [bootstrap](https://getbootstrap.com/). \nNo other additional libraries are used.\n\nIn this documetation includes:\n* Introduction\n* System Overview\n* Reference\n\n## 1. Introduction\n\n### Goals\n- Implementing a simple web page which has 3 column lists using simple bootstrap \n- Each column will contain multiple cards.\n- The order of the cards should be maintained.\n- The card should show a title and a description.\n- The state should be maintained after refresh.\n- There should be a button at the top to add a new card.\n- ***(Bonus Point)*** User should be able to move a card from one column to another by drag and drop.\n- UI Goals\n    - #### Add Card\n        - On clicking the add card button, a modal popup should be shown with a form. \n        - The form should contain title, description and column selection dropdown.\n        - Title should be validated and should only contain alphabets.\n        - Description should be validated and should be minimum 25 characters.\n        - On submit, the card should be added to the end of the selected column.\n    - #### Edit Card\n        - On clicking a card, the add card modal popup should be shown with the add card form with the prefilled data.\n        - If the user changes the column then, the card should be added to the end of the selected column.\n        - There should be a button to delete the card in the popup.\n\n### 2. System Overview\nThe App let's you create task and have a track using different status (i.e Doing, Done).\n\n- #### Features\n    - Add Card\n    - Edit Card\n    - Delete Card\n    - Drag and Drop cards to different columns\n- #### User Activities\n    - User can create a task with title, description and a set status (todo,doing,done).\n    - User can edit a task's title,description and status \n    - User can delete an individual task\n    - User can drag and drop task to desired column and the task gets added to the bottom of the selected column\n- #### Functionality\n    - ##### Add Card\n        - On clicking the add card button, a modal popup should be shown with a form.\n        - The form will contain title, description and column selection dropdown.\n        - Title will be validated and should only contain alphabets.\n        - Description will be validated and should be atleast 25 characters or more.\n        - On submit, the card will add to the end of the selected column.\n    - #### Edit Card\n        - On clicking a card, the add card modal popup should be shown with the add card form with the prefilled data.\n        - If the user changes the column then, the card shouldbe added to the end of the selected column.\n        - There should be a button to delete the card in the popup.\n    - #### Delete Card\n        - There will be a button to delete the card in the popup.\n        - There will be a button on the card to delete the card.\n    - #### Drag and Drop\n        - User can move a card from one column to another by drag and drop.\n        - it sets the card's status to selected column and adds to the bottom of the column.\n- #### UI Components\n    - #### Modals\n        - Uses bootstrap's [Modal](https://getbootstrap.com/docs/5.1/components/modal/) to\n            - show Add Popup\n            - show Edit Popup\n    - #### Cards\n        - Uses bootstrap's [Card](https://getbootstrap.com/docs/5.1/components/card/) to\n            - show individual task's with title and descriptions and status.\n    - #### Collapse\n        - Uses bootstrap's [Collapse](https://getbootstrap.com/docs/5.1/components/collapse/) to\n            - show each columns with cards\n    - #### Placeholder\n        - Uses boostrap's [Placeholder](https://getbootstrap.com/docs/5.1/components/placeholders/) to \n            - show loading state of the cards\n    - #### Buttons\n        - Uses bootstrap's [Button](https://getbootstrap.com/docs/5.1/components/buttons/) to\n            - show buttons on cards and modals\n    - #### Badges\n        - Uses bootstrap's [Badge](https://getbootstrap.com/docs/5.1/components/badge/) to\n            - show the count of cards in the columns\n\n\n### Screens\n#### Main Page\n![Main Page](public/assets/mains.png?raw=true)\n\n#### Add Modal\n![add modal](public/assets/addtodo.png?raw=true)\n\n#### Edit Modal\n![edit modal](public/assets/edittodo.png?raw=true)\n\n#### Loading state\n![loading state](public/assets/loadingstate.png?raw=true)\n\n#### Empty state\n![Empty state](public/assets/empty.png?raw=true)\n\n#### Error\n![Error](public/assets/error.png?raw=true)\n\n#### Mobile View\n![Main Page](public/assets/mobile.png?raw=true)\n\n\n### References\nYou can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n\nLearn [Bootstrap 5](https://getbootstrap.com/) now.\n\n[Drag And Drop API ](https://developer.mozilla.org/.en-US/docs/Web/API/HTML_Drag_and_Drop_API).\n\n[Refs and the DOM](https://reactjs.org/docs/refs-and-the-dom.html).\n\n[React Hooks](https://reactjs.org/docs/hooks-intro.html).\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fganeshsrambikal%2Fiitb_trello","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fganeshsrambikal%2Fiitb_trello","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fganeshsrambikal%2Fiitb_trello/lists"}