Tutorials

Create a Full Stack App with Puter.js Using Bolt.new

Understanding Puter.js

Puter.js is an innovative JavaScript library designed to simplify full stack web development. It eliminates the need for complex backend infrastructure by providing browser-based APIs that give developers direct access to cloud storage, authentication systems, file handling capabilities, and AI features. This serverless approach allows you to build complete applications using only frontend code, with no API keys or server configuration required.

Development Workflow

Step 1Obtain the API Documentation

First, download the comprehensive Puter API documentation file:

👉 https://docs.puter.com/prompt.md

Save this document to your computer as prompt.md. This file contains all the information Bolt.new needs to understand Puter's capabilities.

Step 2Access the Bolt.new Platform

Navigate to https://bolt.new in your browser. If you're a new user, create a free account, or sign in with your existing credentials.

After logging in, initialize a new project to begin your development process.

Step 3Import the API Documentation

Within the Bolt.new interface, locate the file upload feature by clicking the link icon in the chat area.

Upload the prompt.md file you saved earlier. This crucial step ensures that Bolt.new's AI has complete knowledge of Puter.js's functionality and available endpoints.

Import API Documentation

Step 4Define Your Application and Generate Specifications

In the conversation area, clearly describe your application concept using natural language. Your description should:

  • Specify that you're developing an HTML5 application
  • Request that Bolt.new analyze the uploaded Puter.js documentation
  • Ask for a comprehensive technical specification that utilizes Puter.js endpoints exclusively

Sample Request:

I need to create an HTML5 application that allows users to create, store, and retrieve notes from cloud storage. Please examine the attached Puter.js documentation and develop a detailed technical specification for this application. The implementation should rely solely on Puter.js endpoints for all functionality including storage and user authentication if required. Only generate the technical description, do not generate any code.

Allow Bolt.new to process your request and generate the technical documentation. Take time to review the specifications for completeness and technical accuracy.

Step 5Build Your Application Code

With the technical specification in place, request the complete implementation by sending a follow-up message:

Using the technical specification you've created, please generate a complete HTML file that implements all the functionality described. The file should include everything from the opening <html> tag to the closing </html> tag, with all necessary UI elements and Puter.js integration. Do not use any frameworks like react or vue, only HTML5 and Puter.js.

Bolt.new will produce a comprehensive HTML5 file containing the user interface, styling, and all functional logic implemented with Puter.js.

Carefully examine the generated code to ensure it meets your requirements and implements all specified features correctly.

Step 6Publish Your Application

After finalizing your application code:

  1. Copy the generated HTML and save it locally as index.html
  2. Navigate to the Puter Subdomain Registrar:

👉 Subdomain Registrar

  1. Choose and register your preferred subdomain
  2. Upload your index.html file to complete the deployment

Congratulations! Your serverless, full stack application is now live on the web, hosted for free on the Puter platform.

You've successfully created and deployed a complete web application using only Bolt.new's AI capabilities and Puter.js—no traditional backend required! 🚀

Additional Resources

To enhance your application further or explore advanced features, consult the comprehensive Puter.js documentation. Remember that Puter.js eliminates the need for traditional backend configuration or API keys—all functionality runs securely within the browser environment.

Related Tutorials

Ready to Build Your First App?

Start creating powerful web applications with Puter.js today!

Get Started Now

Read the Docs • Try the Playground