DEV Community

Kevin Ziechmann
Kevin Ziechmann

Posted on • Edited on

Creating a baby tracking 👶 web-app in 15 min with an AI agent 🤖.

We were overjoyed when my daughter was born, but as first time parents we were also overwhelmed, newborns are a big project it turns out! Among other things you need to track their inputs and outputs initially to make sure they are getting enough food to grow and are staying hydrated.

After logging these events in a notebook for a few days then tallying the numbers for the doctor visit, I thought there must be a better way to collect this data. A spreadsheet and pivot tables did the trick at first, with some formulas generated with the help of MS Copilot. But my software engineering experience kept me thinking if inputing and viewing the data could be easier, we have enough on our plates, could a personalized web app be more efficient and could we gain some insights by visualizing the data?

Image description

This was a chance to use a coding agent I had heard about from Replit, I uploaded the spreadsheet I had created and used the below prompt to create a web app to track these statistics. I made and deployed the site without writing any code and minimal technical direction (no choosing the programming language, tooling or frameworks ), and only a few plain text responses for feedback within 15 minutes. This included a few button clicks for fixing coding mistakes the agent had made, which it used error messages in the application logs to come up with fixes for. I made some feature requests while previewing the changes via the inbuilt local server and ran up about $6 worth of server cost from the interactions.

The app, created with the agent, included a form with dropdowns for inputting common events, and tables and charts for tracking the visualizing the data. It also included UI elements I had not specifically asked for like tabs for organizing the pages, some loading animations,background colors, layout and a few cutesy titles and headings. The agent decided to store the data in a traditional Postgres SQL database, chose libraries to use for the excel sheet processing and upload, and with some guidance to use a session ID so users wouldn't overwrite others data, it implemented these technical requirements. It built this simple C.R.U.D ( Create Read Update Delete) web app with python, 'deciding' its own tech stack no problem. Though it was a simplistic site and a project that a student could easily handle, the speed for development was incredible with minor guidance needed.

Image description

Initial Prompt: Hello, I created a spreadsheet to track my newborn daughters activity as we have to track her feeding and excrement schedule. Can you examine the spreadsheet which includes a pivot table to summarize the activity, and create a web application to enter these events with a dropdown for categories. 
Enter fullscreen mode Exit fullscreen mode

Some Insights from the process

*1. Generative AI tools like agents are empowering developers rapidly and changing how software is made *
I use code generation tools and language models through chatbots like Copilot or ChatGPT at work pretty much every day now, either Github Copilot for auto-completing routine code that I am writing or automating writing unit tests, to using Copilot to look up syntax when I am working in a language that is not my most used ( currently Typescript ).Luckily for me I think software development is one of the few areas right now that LLMs live up to the hype due to the verifiable nature of the code they generate and the amount of training data available, not to mention it’s what the makers of these tools know best.

I have found these tools extremely useful for saving me time on simple and repetitive tasks or as an extended search tool and sometimes replacement for forums like Stack Overflow. I continue to find new uses too like creating mock data in a JSON file by reformatting a table of test. I think agents are the obvious next step in these kinds of tools for code generation, code review, and integration of systems like is common in CI/CD, and they will give more power to those looking to complete a task without full knowledge of a domain. They will enable developers to think more high level about systems and complete coding tasks with record speed. We may spend more time in the future reviewing code than writing.

2. Prototyping especially benefits from agents in the near term.
It cost around $6.25 to create this app with about 10 prompts and responses, taking about 15 mins for all features and fixes until the site was deployed and available on the ope web with server scaling enabled. This would have taking me or my classmates a few hours at minimum when I was learning web development in the late 2010s. The code that was created is readable and commented which allows for editing manually if needed. It was all in one file "main.py" so surely not production grade, but for going from concept to real users on the internet this is incredibly, fast and cheap.

# Code sample from main.py

        if not diaper_events.empty:
            # Create separate rows for combined events
            diaper_events['Date'] = pd.to_datetime(diaper_events['Date'])
            split_events = []

            for _, row in diaper_events.iterrows():
                events = row['Event category'].split(',')
                for event in events:
                    new_row = row.copy()
                    new_row['Event category'] = event.strip()
                    split_events.append(new_row)
Enter fullscreen mode Exit fullscreen mode

*3. Gen AI will enable more dynamic front-end systems with highly personalized user interfaces (UI) *

I was impressed by Replit’s agent not only creating code from my description of the app and my spreadsheet but “thinking” of details like naming the app, adding appropriate emojis as decoration and creating some charts to display the data that for the most part made sense. After a few revisions it even added a sleep analysis section to predict my baby’s next nap using Pytorch! This experience drove home to me how other similar tools will in the future create personalized User Interfaces and will with the help of some framework, be able to decide what presentation and interactions may be best for the given data or state of the application. This agent wrote the app and revised it for me, fixing errors with plain English commands without explicit instructions in code.

4. Agents will not take our jobs, but it will change them. Agents are powerful software that need prompting and careful supervision to be useful.

As anyone who has used these tools knows they are not without their flaws and often confidently present solutions that are frustratingly incorrect and often sound very plausible. In general I would say I have a 70%ish rate of success for accomplishing what I set out to with these tools, maybe lower for a first pass especially with any task more complex than this simple web app. This is of course getting better and no doubt many people are better than me at the art of finessing accuracy from prompts but even then it is all too easy to get lazy here and mentally offload decisions to the tool, which will get you into trouble.

The hard part of software is always in defining the right requirements, understanding the user and use-case, and creating something with unique value that solves a valid need that is not solved elsewhere. As it becomes easier to generate code it will b more crucial than ever to decide "why do I want this feature", and "what tradeoffs or biases am I assuming".

I always scrutinize, test and run code generated by Copilot ( LLMS ) for efficiency, correctness and security vulnerabilities before using it. We can just think of agents like Repl's or the infamous 'Devin' as the latest development along the lines of automation that web developers have always worked with: akin to IDEs, linting, frameworks, CI/CD etc. But with more powerful tools we need more oversight.

As we rely more on these tools or systems to write and deploy our code what happens when things go wrong, can we look beneath the hood to give more explicit instructions? Can we build systems that allow us to evaluate the technical decision made by these machines, when they are able to produce and run vast amounts of code among increasingly complex systems?

How much control matters if we get close to the desired output with a fraction of the effort? I suppose by the time my daughter becomes a software engineer we will see ;)

Link to the deployed app: https://baby-tracker-ziechmann.replit.app/

Image description

Top comments (0)