Building an App in a Week with bolt.new and Firebase

I built the core functionality on a personal project using an AI-powered IDE in one weekend with a week of evening tweaks to refine the details. It's a journaling app built using StackBlitz 's bolt.new and Google Cloud 's Firebase. I wouldn't call it "done" since I'll find more ways to improve it, but the core functionality is there. As a designer (non-developer), this project was a fantastic learning experience, though there are a few things I’d approach differently if I were to do it again.

Although I initially planned to record a video documenting the app-building process, I ended up tackling it in many small bursts—on the weekend and on late nights after dinner. My wife happened to be away at a retreat so the timing was perfect. But it wasn’t a single focused session to get it into shape, which says a lot, so the video never came together. Fortunately, there are plenty of YouTube videos that demonstrate how to use these tools, and I’ll share the ones I found helpful.

My plan was to build a journaling app with a database backend and authentication, so that users could enter journal entries and not see other user content. What I learned from watching YouTube videos was that the process that might work well with bolt is to follow this workflow:?

• Plan the experience and do some lo-fi design of the screens (I didn't do this because I wanted to see how it went to just use prompts. Your mileage may vary if you skip this. More on that later.)
• Prototype the basic functionality first
• Add the database connection
• Add authentication
• Iterate over the database and authentication functions to add the specific features you want
• Refine the interaction and visual details
• Do security checks
• Deploy

I'll summarize my steps and highlight areas that I would change if I do this again.

Design Concept

I began by outlining the concept for the app in writing, drawing from my experience journaling to work through mental health challenges, including living with anxiety, ADHD, childhood baggage, and recurring experiences of grief from divorce to the loss of loved ones.

I've been in therapy for a couple of decades now, and one thing that I haven't been consistent at is daily journaling, but like meditation I know how helpful it is. Over the years, I’ve been inspired by what we continue to learn about neuroplasticity and how to rewire the mind to break free from negative bias, rumination and negative self-talk. With that in mind, I’ve been aiming to focus my thoughts on gratitude, celebrating the positive and achievements in life, and cultivating the feelings and reality I aspire to experience. To support this, I started sketching out the concept for a journal designed to help me build a more optimistic mindset and reflect on the positive world I want to create.?

Prototyping

Here's where I entrusted bolt.new and learned that some things go well with AI and others could be better. Based on the basic features I wanted to build, I started by making this request in the chat.?

Create a daily journal app called "Be Optimistic" that helps users practice gratitude, celebrate achievements, and manifest their goals.?

Bolt went through the steps of setting up the project, installing dependencies, creating React files, setting up routers, and doing all the basic development to create a journaling app prototype with functions to create journal entries. It also did an excellent job with layout and styling using Tailwind for component styling and Lucide for icons. Out of the gate it looked good enough for an app I might use just for myself, without needing much more in the way of styling and layout. The basic parts turned out better than expected, even without giving it much direction. It even made some interesting sample copy and taglines, though I ended up finding them a little cheesy and rewrote those.?

But this was only a prototype at this point. I also needed the entries to be saved to a database.

Database

The next step was to set up a Firebase database and configure the project to save the user's journal entries to it. The prototype saves content to local storage temporarily until you do this. You can start with a free Firebase account. Given Firebase’s pricing structure, I can likely maintain this app without upgrades as long as the user base stays small.

I learned how to add the database to the bolt.new app following the great series of short tutorials by Tomek Su?kowski, one of the founders at StackBlitz. I just followed his video step by step. It was incredibly easy.

There's also a tutorial for Supabase, if that's what you prefer to use. I've read that there are great plugins to add subscription payments with Supabase, but since my app is free, I wasn't needing that.

From what I can remember when I did this, setting up Firebase was simply a matter of creating an account and database on Firebase, and then prompting Bolt to use Firebase to save the journal entries. If you watch the video above, you'll see that there are a few steps to do some manual set up of Firebase, and then you'll have to provide some prompts to get your app to do what you want, but it's pretty easy.

I added the Firebase config settings to a .env file and created a .gitignore file so that I could eventually check the codebase into Github, but not store my credentials there. I later added my environment variables directly to Netlify instead when I deployed.?

The next step was to set up authentication so that users must sign up to add entries, and so that other users can't access this.?

Authentication

Setting up authentication was also straight forward. Once again I followed Tomek's tutorial about adding user authentication with Firebase, step by step.

After running the prompt to set up authentication, Bolt created a really nice sign up / login form on the home page. It took a couple rounds asking Bolt to fix some errors to get authentication set up, but it resolved those issues after a couple tries.?

There was then a firestore.rules file that was generated so that users don’t see other users’ entries, and Bolt told me where to save them on Firebase. I found myself working in Firebase directly for a while, checking to see if new test users I set up were unable to see other user content. Things appeared to be working well.

Iteration and Design Refinements

With database and authentication set up, it was time to work on making it a more pleasant user experience. I started to ask for changes to make it suit my needs.?

Iteration 1

Among the things I asked for to improve the first pass:?

• A calm color palette: I asked for that's suitable for a mental health app. The calm color palette turned out to be pretty decent! But I ended up changing the colors manually in the end.?
• About page: I asked Bolt to create an About page. It even wrote the sample copy for the page, and I haven't yet updated it because it's not bad. I will though. I learned that I had to create a _redirects file for this view to work.?
• Delete function: I asked to add a delete function for the current day's entry only. It put a delete icon next to today's entry.?
• A breathing exercise step: I asked for the option before creating a New Entry, so that the user could do a breathing activity to center themself before starting to journal. I told it to show an animation instructing the user to do 3 rounds of box breathing, inhaling for 3 seconds, holding the breath for 3 seconds, exhaling for 3 seconds, and holding the breath for 3 seconds. I liked how it implemented this as an expanding and contracting circle because it conveys the idea of the lungs expanding and contracting.

These changes all happened in one day and went smoothly and I lived it with for a few days, adding entries to test it. After a few days with some real data, I began to think of other features that would be nice to have. And I was still unsure about the color palette, so I did another iteration.

Iteration 2

In the second iteration, I added these features:

• Month/Day Views: The app was only showing one entry at a time with Previous / Next buttons. I wanted the ability to see a whole month at a time, so I asked it for a toggle to switch between views.?
• A Statistics Dashboard: I wanted a dashboard similar to the iOS Journal app, showing the number of entries for the year and my "streak"—days in a row journaling. I find these kinds of gamification features motivating.?
• A color theme switcher: I liked the color palette I ended up with, but sometimes I like to work in dark mode. I also wanted to purple/violet mode just because I thought some days I want to feel more energetic. So I asked for a color theme switcher based on the original palette, a violet palette, and a dark mode palette. This turned out to work only partially. I then asked it to create a settings file for these color classes: primary, secondary, background, text, text link, and cardBackground. This ended up taking me a few nights to get to work well because it didn't know where I wanted these classes to be applied. Ugh.
• Social media icons: I wanted to add brand icons to YouTube, Instagram, TikTok. Lucide doesn't carry these, but I attached SVG files I found on Simple Icons and Bolt embedded them.

This second iteration was a bit of a hassle and was time consuming. I did these changes over the course of several days. Compared to doing it manually, it was relatively easy. I shouldn't really complain because it would have been a bummer to do it all myself.?

Prompting costs tokens and the plan I chose is limited to 10M and I think I ate up too many tokens on this "last mile" of polishing. So in the end I did end up editing manually in order to finish before I used up all of my tokens.?

Security checks

With the polishing step done, I then started thinking about security. I spent some time prompting Bolt to check for security vulnerabilities. In the future, I plan to explore Google dorks for additional security checks.

Bug Workarounds

There are some bugs that I discovered still need to be worked out. Bolt does great with SVG, but seems to mess up bitmap images. It took me a while to figure out that whenever I downloaded my favicon and app icons, it was messing up my files. So as a workaround, whenever I download the codebase, I ignore the public directory. Nothing changes for me in that directory anyway.

Deploying

Speaking of downloading the codebase, I had initially hoped that the very convenient Deploy feature in Bolt would allow me to continuously re-deploy a project to a specific Github project or would repeatedly deploy to the same Netlify project. But that's not supported right now. I found that a few times I could get the connection through Github to work if I used StackBlitz, but for whatever reason, it didn't always work. I should note that Bolt does, however, do great deploys to Netlify that you can claim, which works fine the first time you deploy; it's just subsequent deploys to the claimed site that could be improved.

So the workflow I use now is to develop in Bolt and then download the whole project locally. Then I move the project files to the directory where I keep the local git repository and check in to Github. I have Netlify set up to watch my Git project and deploy it.?

I have no doubt this will be easier later and have created a feature request to see if the Deploy to Netlify feature might be possible in the future, but to be honest, it's fine right now knowing it's versioned in Github.

NOTE: As of December (a few weeks after writing this article) Netlify integration was added and you can now deploy directly to Netlify.

Demo Video

The last bit was adding a video demo since the product is behind an authentication gate and you can't really see what the experience is like on the landing page. I did a quickie screen recording and edited it in Canva. Then I tried using Hey Gen to add a talking head over it. I kind of like it, but while effective, it feels inauthentic to me. Take a look and decide for yourself:

This stuff has come a long way, but I'm still considering if it feels like the right fit. I could also just get more comfortable sharing my face on YouTube, but you know... introverts are gonna introvert.

Closing Thoughts

This experience has blown me away. I've gone from AI skeptic to believer and regular user, but mainly using tools like ChatGPT, Perplexity and the like for daily information work. In the past month I ended up tinkering with V0, Cursor and Bolt before deciding to give Bolt a real try. It's amazing to me how much it does and will empower non-developers to create simple prototypes like the one I made. But I've also seen that some people are building much more complex products. If you're interested in doing something like that, the StackBlitz Office Hours has a great episode with Paul Gosnell talking about how he built a full CRM.?

Building by prompting without doing some initial concept exploration or planning worked, but I think I would have had better luck and saved some tokens if I spent some time on planning and basic low-fi design work. Because I ended up adding more features and changing direction in iterations, I ended up using up a lot of tokens. A few sketches or wireframes could have saved me there. ?

I was initially hesitant to embrace the use of AI in some contexts, given issues of intellectual property regarding artists' work and questionable authority and authenticity of what's offered in response to questions. But there's a benefit for some types of tasks.?

The project has also forced me to think critically about the consequences of AI for designers and developers. I do think a lot about how it will affect people's jobs if they don't use these technologies. There's no doubt that hiding your head in the sand won't help you there. The challenge is to explore how to make these tools help you to work faster and smarter, but leaving human thinking and judgement in place.

I see these tools as assistants and accelerators. I also imagine that they can empower some teams to work safely on Skunkworks projects, to explore new ideas without taking too much time and energy away from the core business. That's the next topic I'd like to explore and start writing about.

Anyway, if you've read this far, I appreciate it. If you're experimenting with similar tools, I'd love to hear about your experience.?

You can check out my project if you're curious: beoptimistic.app