How I Built a Fully Functional AI App Using Bolt.new

9th December 2024

AIApps

In today’s rapidly evolving digital landscape, building feature-rich AI apps no longer demands an advanced computer science degree, painful debugging sessions, or a substantial team of software engineers. The shift towards no coding AI apps—particularly those created with intuitive platforms like bolt.new—means that virtually anyone with a creative idea can design, implement, and deploy sophisticated applications in record time. Add a frictionless hosting service like Netlify, and the entire process from concept to deployment becomes fast, seamless, and affordable.

As an AI enthusiast with many years of experience in the tech industry, I’ve witnessed countless innovations. Few are as democratising as the current no-code AI revolution. In this detailed walkthrough, I’ll share how I created a dynamic, AI-powered web application that generates random UK lottery lines, includes your favourite numbers, leverages historical draw frequency data, and even uses AI to decide which draws you should play—all without writing a single line of traditional code and in about 15 minutes overall. By the end of this article, you’ll have all the insights you need to create your own no coding ai apps and deploy them swiftly.

View the full prompt here: Lottery-App-Prompt

Why Bolt.new is a Game-Changer

Before diving into the specifics of the lottery line generator, let’s understand why bolt.new is such a monumental shift in software creation. Historically, building a custom app—especially one that incorporates complex logic or AI—demanded significant coding knowledge. Developers had to handle everything from front-end design to back-end integration, database connectivity, and hosting.

With bolt.new, the entire process revolves around prompting an AI to generate code and components on your behalf. Think of it as instructing a very clever assistant rather than writing code line-by-line. This approach drastically reduces the barrier to entry, enabling marketers, entrepreneurs, small business owners, and creative professionals to bring their ideas to life without learning multiple programming languages.

The App We’re Creating: AI-Driven Lottery Line Generator

The project I’ll walk you through is a lottery line generator with a few intelligent twists. You can view the finished project here: My Deployed App. Although the app is presented as a demonstration, it’s built to be practical and extendable.

Core Features:

Random Line Generation: The app generates a set of lottery numbers—just like you’d pick for a standard lottery draw. Instead of guessing numbers manually, you click a button and let AI produce lines for you.
Limit Lines per Week: To encourage responsible play, the app can limit the number of lines you generate per week. This feature is customisable, letting you set, for example, a maximum of two or three lines in a seven-day period.
Most Drawn Numbers Insights: The app can incorporate historically most frequently drawn numbers. This allows you to generate lines that leverage statistical frequencies rather than sheer randomness.
Favourite Numbers: Users can add their own “lucky” or favourite numbers. The app then incorporates these into the generated lines—either by always including them or giving them a weighted priority.
AI-Powered Draw Recommendations: Beyond generating random lines, the app can use AI to suggest which specific draws (e.g., midweek or weekend draws) you should play, based on criteria you define. For instance, the AI might suggest the draws where your favourite numbers historically appear more often, or where the prize tiers are more favourable.

All of these features are bundled into a no-code workflow, achieved by prompting and refining instructions to the AI within bolt.new, and then deploying the final app via Netlify with a single click.

Getting Started with Bolt.new

Step 1: Signing Up and Creating a New Project

Begin by visiting bolt.new and creating a free account. Once logged in, start a new project. Just type your prompt into the main field in the centre of the window with the placeholder “How can Bolt help you today?” Once you have entered your prompt, either on-the-fly or copied and pasted it from your notes, you’ll be taken to a more complex window. The top left pane gathers all the instructions and steps it takes to create the app, the bottom left pane is where you enter your prompts, and the main right pane will either display your code or the app preview and you can switch from one to the other using the top Code/Preview links.

Step 2: Understanding the Interface

Bolt.new typically presents a user-friendly interface composed of:

Prompting Interface: Your control centre, where you’ll describe what you want to build. You communicate with the AI in natural language.
Component Library: A collection of drag-and-drop elements—buttons, input fields, text elements, sliders, etc.
Configuration Panels: Places to define variables, data sources, and logic flows.
Real-Time Preview: Watch your app take shape instantly as you give the AI instructions.

Prompting the AI: Building the Lottery Logic

Step 3: Define the App’s Purpose to the AI

To get started, outline the key objectives:

“I want to create a system that will help me play the UK lottery less to save money.

In the UK, there are currently 3 different lottery draw games with 2 draws a week for each of them:

1. Set For Life

Draws happening on Mondays and Thursdays

Way to play: Pick 5 numbers between 1 & 47 included and a life ball between 1 & 10 included
2. Euromillions

Draws happening on Tuesdays and Fridays

Way to play: Pick 5 numbers between 1 & 50 included and 2 stars between 1 & 12 included

3. Lotto

Draws happening on Wednesdays and Saturdays

Way to play: Pick 6 numbers between 1 & 59 included”

The AI will come back with suggestions, potentially asking you to clarify things, or to define parameters like “favourite numbers” and “most drawn numbers.” The beauty of bolt.new is that you can refine your instructions iteratively.

Step 4: Refining Your Logic

I also added the below to the prompt:

“I first want you to create a system for the next quarter starting today, I want you to create a table with the first day of the week, e.g. today “Week starting Monday 9 December”

Then randomly select two out of 6 draws per week for me to play. As a fun added bonus, and to add some spice, I want you to also randomly pick numbers for those draws (I understand that the lottery is a random game and there is no way for you to guess the drawn numbers)”

The AI adjusts the logic accordingly. Behind the scenes, it might create variables like favouriteNumbers, mostFrequentNumbers, and drawsPerWeek. It could generate logic to ensure uniqueness and compliance with your constraints.

Step 5: Integrating AI-Driven Draw Recommendations

You can level up the complexity by asking the AI to account for the player favourite numbers:

“Add a field entitled “My favourite numbers” asking for the player favourite numbers (comma separated), the field can be left empty, so that you can add the player’s lucky numbers to the randomly selected lines. Then below add a button that will read “Randomly select my numbers”, so that every new person landing on that app can select new lines for themselves.”

The AI can then integrate this logic. If we imagine you have some data or at least a heuristic, the AI can generate code to choose a draw day. If you want, you can simply rely on a random choice weighted by your criteria.

Creating the User Interface (UI) Without Coding

Step 6: Designing the Front-End via Prompts

Instead of writing HTML and CSS, describe what you want. I used all the above prompts, one after the other. Once you see the preview and think of an add-on to improve the UI, just ask for your improvement in the prompt window and click the blue arrow button. I was lucky not to encounter any error this time around as this app is relatively simple, but when you encounter an error, just fix it using the Bolt interface and it should be fairly straight-forward.

The AI will assemble all the app components, and create files on the go. If you want to add API keys and you need them to be kept private, in the build, you can say:

“Use the following (e.g, OPENAI) API key: xxxxxxxxxxxxxxxxxxx with the “gpt-4o” model. Create environment variables to mask the API key from users, and add the “.local.env” and the “.env” files to .gitignore.”

The interface will then make the necessary changes for your app to be secure once deployed. Whatever API key you add, whether it is one for ChatGPT or for a database, asking to mask the API keys is the minimum requirement for your credentials to remain safe and private.

Storing and Managing Data

Step 7: Variables and State Management

To keep track of how many lines you’ve generated this week, you might say:

“Add a variable called linesGeneratedThisWeek. Increment it each time I successfully generate a line. If linesGeneratedThisWeek reaches the user’s defined limit (for instance, 2), disable the ‘Generate Line’ button and show a message, ‘You’ve reached your weekly limit!’.”

The AI will implement logic behind the scenes:

While you don’t have to code this yourself, having a mental image of what’s happening can be helpful. The AI, guided by your prompts, creates these variables and updates them as needed.

Step 8: Incorporating Your Own Data

Perhaps you have a historical dataset of most frequently drawn numbers. You can instruct the AI:

“If this info is accessible to you, can you add – in between the favourite numbers field and the button – the most drawn numbers and life balls/lucky stars for each game, and a possibility to add them to lines with a ticked box when desired?”

The AI then ensures that generated lines meet these criteria.

Example Behind-the-Scenes Logic

Although you’re not required to write code, let’s illustrate what might be happening under the hood. This helps you understand what bolt.new does for you:

javascript

// Hypothetical logic snippet (for illustration only)

function generateLotteryLine(favouriteNumbers, mostFrequentNumbers, totalNumbers = 6, maxNumber = 49) {
let line = [];
// Ensure we include at least one favourite number if available
if (favouriteNumbers.length > 0) {
line.push(favouriteNumbers[Math.floor(Math.random() * favouriteNumbers.length)]);
}

// Ensure we include at least one most frequent number if available and not already in line
let freqNum = mostFrequentNumbers[Math.floor(Math.random() * mostFrequentNumbers.length)];
if (!line.includes(freqNum)) {
line.push(freqNum);
}

// Fill the rest of the line with random unique numbers
while (line.length < totalNumbers) {
let randNum = Math.floor(Math.random() * maxNumber) + 1;
if (!line.includes(randNum)) {
line.push(randNum);
}
}

// Sort line for neatness
line.sort((a, b) => a - b);
return line;
}

function recommendDrawDay(favouriteNumbersHistory) {
// Simple heuristic: if favourite numbers appear more often on Wednesday (arbitrary logic),
// recommend Wednesday, else Saturday.
// In a more complex scenario, we could analyse frequencies from a dataset.

// For demonstration, assume if we have more than 3 favourite numbers, choose Wednesday
// else choose Saturday.
return favouriteNumbersHistory.length > 3 ? "Wednesday" : "Saturday";
}

You never needed to write this, but it’s the kind of logic bolt.new might generate based on your instructions.

Deployment to Netlify

Step 9: Exporting and Deploying

After fine-tuning your prompts and previewing your application within bolt.new, it’s time to go live. Netlify provides an extremely streamlined deployment process.

Export Your Project: Bolt.new will bundle your app into a ready-to-deploy package containing HTML, CSS, and JavaScript files.
Sign Up for Netlify: If you don’t have an account, head over to Netlify and sign up. Their free tier is quite generous and perfect for this kind of project.
Deploy Your Site:
- Deploy: Simply click the blue Deploy button (top right) from bolt.new to deploy the app on the Netlify dashboard. Within seconds, Netlify provides a public URL for your app.
- Git Integration: Alternatively, connect your Git repository so that every time you push changes, Netlify automatically rebuilds and redeploys your app.
Push to Production: On the Netlify website, go to Sites, there you will see all your apps and their latest Deployed builds. To push your app to its production environment, click the arrow > at the end of the row for that app. You will be taken to the Production Deploys window, click the arrow > again on the line of the latest Published app, in that next window, choose Open Production Deploy and you will be taken to the live app with it’s URL in the shape of the one below.

Once the site is live, you’ll receive a URL like https://elaborate-sopapillas-14158e.netlify.app/, which you can share with friends, users, or customers.

No-Code Development Best Practices

As you work with no coding ai apps, keep these tips in mind:

Clear, Iterative Prompts: The AI is only as good as the instructions you give it. If something isn’t working, refine your prompt. Be explicit about what you want the app to do.
Start Small, Add Complexity Gradually: Begin with a simple line generator, then layer in favourite numbers, most frequent numbers, and weekly limits. Iteration helps keep the process manageable.
Focus on User Experience (UX): With coding details offloaded to the AI, invest your time in user-centric design. Make sure your instructions, inputs, and outputs are clear and intuitive.
Test Thoroughly: Just because you’re not coding doesn’t mean you shouldn’t test. Enter invalid favourite numbers, exceed your weekly limit, and see how the app responds.
Extend and Improve: Once the basic functionality works, consider adding features like data visualisations (e.g., charts of most frequent numbers), integration with lottery draw APIs, or user authentication to track line generation over time.

Marketing Your App and Going Viral

Having an amazing no-code AI app is just the start. To gain traction and potentially go viral, consider these strategies:

Keyword-Optimised Content: Your blog post, like this one, should include terms like “no coding AI apps,” “AI lottery line generator,” “build AI apps without coding,” and “bolt.new” so that search engines can index your content, making it easier for people to find.
Social Media Promotion: Share your app on LinkedIn, Bluesky, Facebook, and any community forums where lottery enthusiasts and tech-savvy users gather. Highlight the unique features—like AI-generated lines and recommended draw days—to capture attention.
Influencer Outreach: Connect with influencers who discuss AI tools, no-code platforms, or even lottery tips. Offer them a sneak peek or a custom feature if they showcase your app to their followers.
Email Newsletters and Communities: If you have a mailing list or are part of marketing groups, share your creation there. People love discovering new, easy-to-use AI-powered tools that make their lives simpler—or just more fun.
Continuous Improvement and User Feedback: Encourage users to share feedback. If they say the recommended day feature isn’t quite right, iterate. If they want more complexity (e.g., integrating international lotteries), add it. Each update can be shared as fresh content, driving repeated visits and interest.

The Bigger Picture: Limitless Possibilities with No-Code AI

The example I’ve shown—a lottery line generator—is simply one instance of what you can achieve with no coding ai apps. The flexibility of AI prompting means you can develop:

Recommendation Engines: From movies to products, create tools that suggest items based on user preferences and historical data.
Analytics Dashboards: Analyse data and present insights with intuitive graphics and narratives. Users can interact with data without any SQL or front-end coding.
Chatbots and Conversation Tools: Integrate large language models to build helpdesk bots, personalised interview simulators, or even narrative-driven chat-based games.
Content Generation Apps: Spin up applications that create blog post outlines, marketing copy, or social media content at scale.

In each case, bolt.new empowers you to focus on what matters—your unique ideas and the experience you provide your users—rather than wrestling with syntax and debugging.

Embrace the No-Code AI Revolution

We stand at an exhilarating frontier in software development. The ascent of no-code, AI-driven platforms like bolt.new unlocks a world where brilliant ideas are no longer held back by the complexity of coding. By describing your vision in everyday language and letting AI handle the heavy lifting, you can rapidly build, refine, and deploy no coding ai apps that were once out of reach.

This AI lottery line generator, which incorporates favourite numbers, most frequently drawn picks, line limits, and intelligent draw recommendations, exemplifies the kind of sophisticated tool you can create with just a series of well-crafted prompts. And thanks to Netlify, sharing your creation with the world is as simple as dragging and dropping a folder.

Embrace the no-code AI revolution and set your creativity free. Whether you’re a marketer, entrepreneur, hobbyist, or innovator, the time is now to experiment, build, and bring your ideas to life—no coding required. Your AI-powered future awaits!

22nd January 2025