search

stackblitz / bolt.new

Prompt, run, edit, and deploy full-stack web applications
https://bolt.new
MIT License
4.17k stars 487 forks source link

Going in Circles #305

Open robertthought opened 1 day ago

robertthought commented 1 day ago

Describe the bug

Hey, it seems like on bolt.new - I am just going in circles and burning up my tokens. Its frustrating. I am not a coder by any means but I can clearly see it was making simple mistakes like constantly overwriting the API keys and no providing code when it needed to. I was bouncing back between claude and other apps for advice to try and figure out how to get this thing to give me what I want by asking better prompts.

It is frustrating because I feel like I know I can develop what I need, I can feel the progress, but then it takes like 10 steps backwards

Also when I manually refresh my page by accident, I lose chat history which is really frusterating as well if I want to reference it.

Link to the Bolt URL that caused the error

https://bolt.new/~/sb1-39qrjp

Steps to reproduce

Review chat log https://bolt.new/~/sb1-39qrjp

Expected behavior

I tried to rewrite the initial prompt to be more detailed

  1. Project Overview:

    1. You are building a web application our airbnb management team. The application will connect our admin team, our operations team and outside contractors together. The application needs to be able to identify and showcase occupancy in our booking calendar by properties. We manage 30+ individual listings, so it gets a bit complex. This applications goal is to reduce the scheduling complexity between our operation team and our contractors. After we identify the occupancy in our properties calendar, we need to create a issue reporting module for our operation team, that will then create a task by property for the contractor to easily view what property is available and what tasks need to be completed. We will use [hospitable.com](http://hospitable.com/) API to get property data and calendar data.

  2. Core Functionalities

    1. Connect to [hospitable.com](http://hospitable.com/) api using

  3. Technology Stack

    1. Frontend:
      • React.js: A popular JavaScript library for building user interfaces, especially single-page applications. It's efficient and has a large ecosystem of tools and libraries.
      • Next.js: A React framework that provides server-side rendering, routing, and other optimizations out of the box. It's excellent for building complex web applications.
    2. Backend:
      • Node.js with Express.js: A JavaScript runtime and web application framework that allows you to use JavaScript on the server-side. It's fast, scalable, and works well with React.
      • Python with Django or Flask: If you prefer Python, these frameworks offer robust features for building web applications.
    3. Database:
      • MongoDB: A NoSQL database that works well with Node.js and can handle complex data structures.
      • PostgreSQL: A powerful relational database if you need more structured data and complex queries.
    4. State Management:
      • Redux or MobX: For managing application state, especially useful for complex data flows between components.
    5. UI Components:
      • Material-UI or Ant Design: These provide pre-built React components that can speed up development.
    6. API Integration:
      • Axios or Fetch API: For making HTTP requests to the hospitable.com API.
    7. Authentication:
      • JSON Web Tokens (JWT) for secure authentication between your frontend and backend.
    8. Calendar Integration:
      • FullCalendar: A powerful calendar component that integrates well with React.
    9. Task Management:
      • Consider using a library like react-beautiful-dnd for drag-and-drop task management interfaces.

  4. Docs

    1. [Hospitable.com](http://hospitable.com/) API https://developer.hospitable.com/docs/public-api-docs/d862b3ee512e6-introduction

  5. File Structure

    Here is the file structure we should follow.

    Here's an explanation of the structure:

    1. project-root/: The main project folder
      1. client/: Frontend React application
        • src/: Source files
          • components/: Reusable React components
          • pages/: Components that represent full pages
          • hooks/: Custom React hooks
          • utils/: Utility functions
          • styles/: CSS or styled-component files
        • public/: Static assets
      2. server/: Backend Node.js/Express application
        • src/: Source files
          • controllers/: Request handlers
          • models/: Database models
          • routes/: API route definitions
          • utils/: Utility functions
          • middleware/: Custom middleware
      3. shared/: Shared code between client and server
        • types/: TypeScript type definitions (if using TypeScript)
        • constants/: Shared constant values

    This structure keeps the frontend and backend separate while allowing for shared code. It's organized enough to scale but not overly complex.

    Key files to include:

    1. In the project root:
      • package.json: For project dependencies and scripts
      • .gitignore: To specify files to ignore in version control
      • README.md: Project documentation
    2. In client/:
      • src/App.js: Main React component
      • src/index.js: Entry point for React app
    3. In server/:
      • src/index.js: Entry point for Express app
      • src/app.js: Express app configuration
    4. In both client/ and server/:
      • .env: For environment variables (don't commit this to version control)

    This structure allows for easy separation of concerns while keeping related files close together. It's lean but can accommodate growth as your project expands.

Screen Recording / Screenshot

No response

Platform

Additional context

No response

Felitendo commented 1 day ago

Great Job, you just exposed your hospitable.com API key 👏 No but for real, please delete the link to your bolt.new instance

superresistant commented 1 day ago

but what's the problem? what's the bug exactly? also don't send us the code with your api key

robertthought commented 1 day ago

I’m just playing around with it, I can just delete the api key. Just trying to learn.

The bug is that it doesn’t make continual progress, it seems to go backwards with some prompts. I don’t understand why it’s doing it and really just wasting my tokens. I only have 2M left for the month?

It deleted my api key about 15 times, is that normal? It kept overwriting it. It also kept defaulting back to the wrong hospitable.com URL. It was little mistakes that were burning credits as we weee going around in circles

On Wed, Oct 9, 2024 at 10:43 AM superresistant @.***> wrote:

but what's the problem? what's the bug exactly? also don't send us the code with your api key

— Reply to this email directly, view it on GitHub https://github.com/stackblitz/bolt.new/issues/305#issuecomment-2402543687, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE5JJ6VXDPB3A5VA3PS3D43Z2U6HZAVCNFSM6AAAAABPUUV73KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMBSGU2DGNRYG4 . You are receiving this because you authored the thread.Message ID: @.***>

superresistant commented 10 hours ago

continual progress

I would try to divide the code into files/features and work on one file at the time. From experience, it doesn't work to prompt about features and UI at the same time or too many things at the same time.

It deleted my api key about 15 times, is that normal?

It could be that you don't follow what bolt knows as a recommendation and bolt automatically overwrite. You should have a .env file that contain the key and a .gitignore that list the .env file not to be exported so that your key is protected. Could be something like that.

Try to ask bolt in a new chat how would he manages the key. I often ask him question like that so I follow what he knows best.