Skip to content

Latest commit

 

History

History
108 lines (70 loc) · 3.9 KB

Readme.md

File metadata and controls

108 lines (70 loc) · 3.9 KB

🚀 Build Flow

https://buildflow-omega.vercel.app/

Project Overview

Build Flow is a web application that utilizes the Gemini API to return JSON responses. These responses are then populated in the frontend to create and visualize flowcharts using the React Flow library.

Installation 🛠️

Prerequisites

Before starting, ensure you have the following installed:

  • Node.js: Download from nodejs.org.
  • npm: Package manager that comes with Node.js.

Steps to Install

a

  1. Clone the Repository

    Begin by cloning the repository to your local machine:

    git clone https://github.com/yourusername/build-flow.git

  2. Navigate to Project Directory

    Change to the project directory:

       
   cd build-flow

  3. Install Backend Dependencies

    Navigate to the backend directory (if applicable) and install dependencies:

     cd backend
 npm install

  4. Install Frontend Dependencies

    Navigate to the frontend directory (if applicable) and install dependencies:

     cd frontend
 npm install

Running the Application

  1. Start Backend Server

    From the backend directory, run:

    npm run dev

  2. Start Frontend Application

    From the client directory, run:

    npm run dev

  3. Access the Application

    Open your browser and go to http://localhost:5173 (or the port specified in your configuration) to access the application's frontend and http://localhost:3000 for the server.

Contributing 🤝

Contributions are welcome! If you have suggestions for improvements or new features, please fork the repository and submit a pull request.

Technical Stack

Backend

  • Framework: Express.js, a minimal and flexible Node.js web application framework.
  • Deployment: Hosted on Railway.app.
  • API Interaction: The backend interacts with the Gemini API to fetch data necessary for generating flowcharts.

Frontend

  • Library: React Flow, a library for building interactive flowcharts and node-based applications in React.
  • State Management: Utilizes React's state management to handle the flowchart data received from the backend.

Features 🌟

  • Dynamic Flowchart Generation: Users can create flowcharts dynamically based on the data fetched from the Gemini API.
  • User Interaction: The React Flow library allows for user interaction, enabling users to modify flowcharts easily.

Issues Encountered ⚠️

  • Inconsistent API Responses: The deployed server on Railway.app sometimes returns responses only 3 out of 5 times. Possible causes could include resource limitations, timeouts, or issues with handling multiple simultaneous requests.
  • Concurrency Handling: There might be concerns about how the server handles multiple requests, especially if it is not designed to manage concurrent requests effectively.

Future Considerations 🔮

  • Collaboration: Introduce a feature that allows users to collaborate on generating a roadmap, enabling multiple users to contribute and refine the flowchart together.

  • Customizability: Add functionality for users to edit specific nodes or code generated by the AI, allowing for a more personalized and tailored roadmap that meets individual needs.

  • Manual Roadmap Creation: Implement an option for users to create roadmaps manually without relying on AI. This will give users full control from the start, allowing them to add or remove steps and assign tasks to specific team members.

Contact 📧 For questions or inquiries, please visit https://round-moonstone-f2c.notion.site/Mohd-Tabish-Khan-48d4bb905c9146ff88760e58f5974209?pvs=74 Thank you for using Build Flow! We hope it helps you visualize your ideas effectively! 🎉