Bolt.new Tutorial for Beginners

Bolt.new has gained traction in the developer community for its innovative approach to web development. By combining AI-driven code generation and deployments, it simplifies building and deploying full-stack applications directly in the browser.

Especially for beginners, it eliminates the need for local setups.

When using Bolt, it’s easy to overlook features that can help speed up your workflow. This guide will show you how to use those features to get the most out of Bolt and code more efficiently.

Step 1. Quickstart

Use the input mask

.. Open bolt .. .you have input mask

Recommend: Start with Your Framework of Choice

Bolt’s flexibility is one of its strongest points. You don’t have to worry about complicated setups or reconfiguring your tech stack when using it. Simply jump right into your preferred tools, whether that’s Next.js, TailwindCSS, Shadcn, or any other tech you’re comfortable with. Bolt adapts to your project needs, so you can focus on building without getting stuck in the setup phase. This means you can spend less time configuring and more time writing code that works.

Step 2. Get Organized with Prompt Engineering

Before diving into the coding process, it’s essential to spend some time organizing your prompts. By structuring your prompts in advance, you’ll save hours of trial and error. For instance, start by setting up a simple prompt in GPT or Claude that breaks down your project into manageable parts. Here’s an example:

Step 1: Prompt to use in GPT/Claude

Hit enter.

Step 2:

Enable Web Search in GPT:

Copy/paste the content of the package.json of your bolt project.

Or just type:

Step 3:

Disable Web Search in GPT:

--> your app description <-- Output: Write the user stories including a short brief at the beginning with the given framework. No code output.

This setup helps you stay focused and ensures that GPT provides clear, useful results that align with your project.

[TODO] The resulting prompt needs to be inserted into ... bolt..

Step 3. Using Lock and Target for Precise Code Updates

Bolt’s Lock and Target features are perfect for fine-tuning your code updates. The Lock feature prevents specific files from being modified, which is handy when you don’t want to risk breaking something important. Meanwhile, the Targetfeature focuses updates on specific files or folders, making it easy to work on particular areas of your project without touching the entire codebase. This is especially useful in larger projects where certain files need to remain unchanged while others are updated.

So in summary:

• Lock: Prevents Bolt from changing a file.

• Target: Focuses updates on specific files or folders.

Step 4. Working with APIs in Bolt

APIs play a big role in modern development, whether you're pulling data, integrating services, or building complex workflows. Bolt simplifies working with APIs, so you can spend more time focusing on your app rather than managing connections.

Save API Keys Securely

Always store your API keys in a .env file to keep them safe. Be sure the variable names in your code match Bolt’s expectations, which helps avoid potential errors.

• Pro Tip: Never commit your .env file to a repository.

Step 5. Managing Databases in Bolt

Since Bolt runs on WebContainers, local database installations won’t work as expected. Instead, you’ll need to rely on remote databases. Bolt supports APIs to connect with services like Supabase for PostgreSQL and Turso for SQLite, making it easy to manage your app’s data. If your project involves heavy database use, consider using tools like Cursorfor a smoother experience when working with databases. These tools integrate seamlessly with Bolt and ensure your project’s database needs are met.

Step 6. Diff-Based Edits: Faster, Smarter Updates

One feature that sets Bolt apart is diff-based editing. Instead of rewriting an entire file, Bolt focuses on making the necessary changes only. This reduces token usage and saves time, especially when you’re working with large files. If you haven’t tried this yet, it’s worth starting now. It’s a great way to update your code quickly and efficiently without unnecessary rework.

A Quick How-To:

1. Install Cursor

Start by downloading the Cursor AI code editor from the official website. Visit their download page and follow the simple instructions to install the editor on your system.

2. Open a Code File

Once Cursor is installed, open a code file in the programming language you're working with. Cursor works with a variety of languages, so you can use it with your existing codebase.

3. Start Typing

As you begin typing, Cursor starts analyzing your code in real-time. It looks for patterns and potential improvements, offering suggestions that can help optimize or correct your code.

4. Review the Suggestions

Cursor will display its suggestions in the form of a diff, clearly highlighting the changes it suggests. This makes it easy to see what will be changed and how it will affect your code.

5. Apply the Suggestions

To apply the suggested edits, simply press the Tab key. This will instantly make the changes, streamlining your coding process and helping you work faster.

Also have a look at my article on how to create projects faster with advanced prompt workflow techniques.

Step 7. Troubleshooting in Bolt

Whenever you run into issues, Bolt has you covered with helpful troubleshooting tools. You can check the Bolt Console to review error logs and messages for clues about what went wrong. If that doesn’t give you enough information, dive into the Chrome Developer Console to dig deeper into the issue. Additionally, using console.log statements in your code helps you track outputs and pinpoint any bugs quickly. These tools make it easier to stay on track and keep your code running smoothly.

Step 8. Undo Changes Like a Pro

Have you ever made a change you instantly regretted? Bolt’s Undo feature is a lifesaver in these situations. It lets you roll back changes quickly, so you don’t have to worry about losing your progress. Whether you’re trying out something new or fixing a mistake, the Undo feature is quick and reliable, helping you stay focused and less stressed while coding.

Step 9. Set Coding Standards with .bolt/prompt

Consistency is key to writing clean, maintainable code. Bolt’s .bolt/prompt file helps you set and maintain coding standards across your entire project. You can define rules like always using camelCase for variables or following a specific structure for your React components. By doing this, you ensure that your code stays consistent and aligned with your project's style, making it easier to read and maintain

Step 10. Import GitHub Repos Easily

If you’re starting with an existing project, importing a GitHub repository into Bolt is a breeze. First, fork the repo into StackBlitz to ensure essential files like .package-lock.json aren’t missing. Then, simply import the project into Bolt, and you’ll be ready to jump right into coding. This process is quick and easy, allowing you to get started without missing a beat.

Step 11. Bonus: My Minecraft Project Example

Here’s an example of how I used Bolt for a Minecraft demo project:

Step 1:

Open GPT and use o1-preview

Step 2:

Use a prompt:

You are a software architect. Your task is to provide clear, precise specifications for engineers to implement. Focus only on the current features, avoiding theoretical or future considerations. Break down the specs feature by feature, keeping each prompt under 200 words. This helps ensure iterative improvements and prevents overwhelming the LLM. Keep the descriptions direct and free of unnecessary details. The input you need is the stack, so if not given, ask for the frontend and the backend stack. Don't output anything, wait for instructions.

Step 3:

Insert your app or game wishes here.

Step 4:

Refine it until you're happy.

Step 5:

Paste it step by step into Bolt. By following these steps, you can see how easy it is to integrate GPT into your Bolt workflow and use it to help structure your project efficiently.

12. Conclusion

Bolt makes your development process faster and more efficient, but it’s all about working smart. By setting up your prompts, using tools like Lock/Target, and leveraging API support, you can streamline your workflow and build projects with confidence. Whether you’re importing a GitHub repo, managing APIs, or updating your code, Bolt has the tools you need to get the job done. Try it out and see how much smoother your coding can be.

Make sure to check out my article where I compare AI tools to help you find the best ones.

Happy coding! 🚀