{"id":30055120,"url":"https://github.com/abhishekjadhav2002/bitespeed-task","last_synced_at":"2026-06-20T04:31:29.448Z","repository":{"id":304555883,"uuid":"1019130286","full_name":"AbhishekJadhav2002/bitespeed-task","owner":"AbhishekJadhav2002","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-13T20:09:22.000Z","size":123,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-07T21:48:53.929Z","etag":null,"topics":["nextjs","reactflow"],"latest_commit_sha":null,"homepage":"https://bitespeed-task.vercel.app/","language":"TypeScript","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/AbhishekJadhav2002.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,"zenodo":null}},"created_at":"2025-07-13T19:59:34.000Z","updated_at":"2025-07-13T20:09:35.000Z","dependencies_parsed_at":"2025-07-13T22:10:53.751Z","dependency_job_id":"2e9f282b-1e8e-4d48-893d-e24dbcb8d574","html_url":"https://github.com/AbhishekJadhav2002/bitespeed-task","commit_stats":null,"previous_names":["abhishekjadhav2002/bitespeed-task"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AbhishekJadhav2002/bitespeed-task","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbhishekJadhav2002%2Fbitespeed-task","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbhishekJadhav2002%2Fbitespeed-task/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbhishekJadhav2002%2Fbitespeed-task/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbhishekJadhav2002%2Fbitespeed-task/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AbhishekJadhav2002","download_url":"https://codeload.github.com/AbhishekJadhav2002/bitespeed-task/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbhishekJadhav2002%2Fbitespeed-task/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34557551,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-20T02:00:06.407Z","response_time":98,"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":["nextjs","reactflow"],"created_at":"2025-08-07T21:36:11.327Z","updated_at":"2026-06-20T04:31:29.436Z","avatar_url":"https://github.com/AbhishekJadhav2002.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chatbot Flow Builder\n\nA visual chatbot flow builder built with Next.js 15, React Flow, and Tailwind CSS.\n\n##### 🚀 [Live Demo](https://bitespeed-task.vercel.app/)\n\n## Features\n\n- 📱 **Text Nodes**: Create and connect text message nodes\n- 🎨 **Visual Flow Builder**: Drag-and-drop interface using React Flow\n- ⚙️ **Settings Panel**: Edit node content with an intuitive settings panel\n- 🔄 **Node Connections**: Connect nodes with edges (one outgoing edge per node)\n- 💾 **Flow Validation**: Validates flow before saving\n- 🎯 **Extensible Architecture**: Easy to add new node types\n\n## Getting Started\n\n1. **Install dependencies**:\n   ```bash\n   yarn install\n   ```\n\n2. **Run the development server**:\n   ```bash\n   yarn dev\n   ```\n\n3. **Open [http://localhost:3000](http://localhost:3000)** in your browser\n\n## Usage\n\n1. **Add Nodes**: Drag the \"Message\" node from the panel to the canvas\n2. **Connect Nodes**: Click and drag from a node's source handle to another node's target handle\n3. **Edit Content**: Click on a node to open the settings panel and edit its text\n4. **Save Flow**: Click \"Save Changes\" to validate and save your flow\n\n## Validation Rules\n\n- Each source handle can only have one outgoing edge\n- When saving, if there are multiple nodes, only one node can have an empty target handle (no incoming edges)\n\n## Architecture\n\nThe project is structured for extensibility:\n- **Node Types**: Easily add new node types in the `nodeTypes` configuration\n- **Panels**: Modular panel system for nodes and settings\n- **Validation**: Centralized flow validation logic\n- **State Management**: React hooks for flow state management\n\n## Tech Stack\n\n- **Next.js 15**: React framework with App Router\n- **React Flow**: Visual flow builder library\n- **Tailwind CSS**: Utility-first styling\n- **TypeScript**: Type safety and better developer experience\n\n## Project Structure\n\n##### `/src/app`\n\nContains the main application pages, only pages no other code lives here.\n\n##### `/src/components`\n\nHouses reusable UI components organized by Atomic Design principles.\n\n- `atoms/`: The most basic and indivisible UI elements, like buttons or inputs.\n- `molecules/`: Combinations of atoms that work together as a single unit, like header or footer. All shared components that are used across multiple pages live here.\n- `organisms/`: This folder will contain sub-directories of pages that contain components that needs to be in the page.\n\n##### `/src/hooks`\n\nThis folder primarily includes custom [React Query](https://tanstack.com/query/latest/docs/framework/react/overview) hooks, which encapsulate the server state management logic, making it easier to manage and access server data throughout the application.\nFor general purpose, we will be using [useHooks().ts](https://usehooks-ts.com/introduction) package.\n\n##### `/src/lib`\n\nIncludes utility functions and helper modules that are used throughout the application.\n\n##### `/src/providers`\n\nHolds context providers and other global state management utilities.\n\n##### `/src/store`\n\nContains stores created using [Zustand](https://zustand-demo.pmnd.rs/), which is used for state management throughout the application.\n\n##### `/public`\n\nHolds static files such as images, fonts, and other assets accessible in the root of the project.\n\n#### Styling\n\nThe project uses [Tailwind CSS](https://tailwindcss.com/) for styling. Theme and Global styles are managed in `globals.css`, and the design system is organized based on utility-first principles.\n\n\n## Deployment\n\nFor deployment on port 3000:\n```bash\nyarn\nyarn build\npm2 start yarn start --name chatbot-flow-builder -- start -- -p 3000\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabhishekjadhav2002%2Fbitespeed-task","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabhishekjadhav2002%2Fbitespeed-task","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabhishekjadhav2002%2Fbitespeed-task/lists"}