Hey Siri, Build Me an App!

My Weekend Adventure in AI-Assisted Development

It all started with a simple frustration. I was using DayOne, a popular diary app, but the free version limited me to accessing my entries on different devices only once every 30 days. As someone who likes to jot down thoughts on both my phone and laptop, this was super annoying.

Instead of shelling out for a premium subscription, I thought, "Why not build my own app?" There was just one tiny problem: I had never made a web app of this complexity end-to-end. That's when I decided to team up with Claude, an AI assistant from Anthropic , to see if we could bring this idea to life.

A diary sounds simple enough, but actually has a lot of questions that need to be addressed: what type of input can I have, where will it be stored (if it's stored in the browser, then I can't see it on other devices, which defeats the whole point of this exercise), how do I login, where are the login details stored, how will it look on mobile, etc. Here's a breakdown of my journey, the challenges Claude and I faced, and how we overcame them.

1. Setting up the project:

We kicked off by creating a React app using Create React App (update: CRA is gone now). Claude guided me through the process, explaining each step. We installed necessary dependencies like react-router-dom for navigation and Tailwind CSS for styling. Setting up Tailwind was new to me, but Claude walked me through configuring the tailwind.config.js file and setting up the CSS file with the necessary directives. This solid foundation made the rest of the development much smoother.

2. Implementing user authentication:

We chose Firebase for authentication due to its ease of use and robust features (and it's free*). Setting this up was our first real challenge. We had to create a Firebase project, set up the web app, and then integrate it into our React app. We then set up the authentication functions for sign up, login, and logout. Claude explained the concept of React hooks, which we used to manage the user's authentication state throughout the app.

3. Creating the diary entry component:

This was the heart of our app. We built a component to display and edit diary entries. Claude suggested using react-quill for rich text editing, which added a professional touch to the app. Implementing this was tricky - we had to handle state for both new entries and editing existing ones. We also added functionality to display the entry creation date and time. A particularly challenging aspect was handling the edit mode toggle and ensuring that the rich text content was properly saved and displayed.

4. Setting up cloud storage:

To allow cross-device access, we used Firebase Firestore for storing text entries and Firebase Storage for images. This step involved learning about NoSQL database structures, which was entirely new to me. Claude explained how to structure our data for efficient querying. Configuring the security rules was crucial - we set it up so users could only access their own entries. This took some trial and error, but Claude helped me understand the syntax and logic behind the rules.

5. Implementing image uploads:

This feature was trickier than expected. We first had to modify our form to accept file inputs. Then, we had to handle the file upload to Firebase Storage, get the download URL, and save that URL with the diary entry in Firestore. We initially faced issues where uploaded images weren't displaying in the UI. Claude helped me modify the handleAddEntry and handleUpdateEntry functions to correctly save and display image URLs. We also added image preview functionality, which required working with the FileReader API - another new concept for me.

6. Adding dark mode:

Implementing a dark mode toggle was a great lesson in using React context. We created a ThemeContext to manage the dark mode state across the entire app. Using Tailwind made the color scheme switch relatively easy, but we hit a snag with the rich text editor. It wasn't respecting our dark mode styles, so we had to create a custom CSS file to style the editor in dark mode. This taught me a lot about CSS specificity and how to override third-party component styles.

7. Responsive design:

To ensure the app worked well on both mobile and desktop, we leveraged Tailwind's responsive classes. This involved rethinking our layout and adjusting components like the navbar to work well on smaller screens. We used Tailwind's flex and grid utilities to create a responsive layout. Claude introduced me to the concept of mobile-first design, which changed how I approached the UI development. We also had to ensure that the image upload and display features worked well on mobile devices, which required some additional CSS tweaks.

The final product is a fully functional diary app with features like:

- Cross-device synchronization

- Rich text editing

- Image uploads

- Dark mode

- Responsive design for mobile and desktop use

What amazed me most was how quickly we progressed. We went from a basic concept to a working application in around 3 hours of my focused time spread over two days. Claude's ability to provide code snippets, explain complex concepts, and help troubleshoot issues was invaluable.

This experience taught me that the barrier to entry for app development is lower than ever. With AI assistance, even someone with limited coding experience can bring their ideas to life. It's not about replacing developers, but about empowering more people to create and innovate.

If you've been hesitating to start that pet project because you thought it was beyond your skills, I encourage you to give it a shot. Pair up with an AI assistant, break your project into small steps, and don't be afraid to make mistakes. You'll learn so much in the process, and you might just end up with a functional app that solves a real problem for you.

I'd love to hear about your experiences with AI-assisted development or any app ideas you're working on. Drop a comment or message me - let's inspire each other to create!

Happy coding, everyone! ????