This is a submission for the GitHub Copilot Challenge : Transitions and Transformations & New Beginnings
What I Built
BrainDump is an AI-powered productivity app that helps you organize your scattered, messy and chaotic thoughts into simplified workflow and mindmaps.
You know that suffocating feeling when you come back home after a long day at school/university/work and your brain feels like it would explode? There are a million scattered thoughts floating in your brain and your head is pounding as you try to make sense of it all? Not fun.
Well, as its name suggests, BrainDump is an app where you can dump out all your thoughts - be as messy and random as you want, just dump out whatever's on your mind.
And BrainDump AI will expertly arrange your mind's mess into organized and neat workflow(s) so that you can let go of your mental stress.
Transform your stress into relaxation and transition to a more peaceful state of mind with BrainDump.
Demo
Demo Video
Here's a short demo video showing BrainDump AI's capabilities - it's super simple and quick to use.
Note that I have added a mobile phone demo because I believe BrainDump AI is more useful as mobile app - because when you are tired and want to dump out your thoughts, you're most likely to use your phone that you already have in your hand, y'know!
Link
Screenshots
Repo
Ayesha-Imr
/
BrainDump---AI-App
transform your chaotic thoughts into organized workflows
BrainDump AI
Transform your stress into relaxation and transition to a more peaceful state of mind with BrainDump.
BrainDump AI is an app designed to help users organize their thoughts by allowing them to input their ideas and receive structured outputs in the form of diagrams or flowcharts.
Features
- Calming Interface: A minimalistic and calming interface for users to 'braindump' their thoughts.
- Input Box: A large input box for entering text.
- Transform Button: A "Transform" button to submit the input for processing.
- Mermaid.js Diagrams: Generate and display diagrams using Mermaid.js.
- Download Diagrams: Option to download the generated diagrams as images.
Live Demo
Check out the live version of BrainDump AI: BrainDump AI
Demo Video
Project Structure
BrainDump
├── pages
│ ├── api
│ │ └── transform.js # API route for processing input text
│ └── index.js # Main page of the application
├── public #Tech Details
The text-to-diagram is powered by a large language model (GPT-4o in this case) which takes the user input and generates Mermaid.js code to convert it into a diagram. The code is then parsed and displayed in the UI as a rendered diagram.
GPT-4o is accessed using Github Models which enables lightning-fast generation, ensuring smooth user experience.
Development Timeline
I developed this app in the span of about 4 hours.
I started with first testing out LLM responses in the Github Model playground and a Python Notebook by using the API provided by Github Models. This was super easy and fast to do.
I passed in some sample input (a mix of my own messy thoughts and GPT-generated ones) and tested out different prompts to elicit responses until I perfected it. I played with instructions to ensure the output code was functional and also the colour palette was aligned with my UI plans (aesthetics, y'know).
Next, I created the next.js app (or it would be better to say that Github Copilot created it for me with just a few prompts and tweaks). The UI of the app took considerable tweaking to perfect and there was a lot overflowing and stuff but with constant prompting and nagging the Copilot, I managed to perfect the UI to my liking (as much as I could given the limited timeframe).
Now I needed to connect the frontend to the backend. I again sought Copilot's help to do this and it was super easy to do because I had designed the frontend with the upcoming data in mind. Again the UI needed tweaks and I had to add the diagram display popup as well as the download feature so I spent some time perfecting the UI again and ensuring the content was being displayed perfectly. This entire process took around 2 hours.
Once the app worked seamlessly locally, it was time to deploy it.
I deployed it on Render using the free tier.
This took around a an hour as there were some issues in deployment and I had to ensure the deployed version worked as well as the local version.
Copilot Experience
Copilot proved to be the perfect coding partner in building this application—it made the entire process incredibly fast and straightforward. All I had to do was outline the general concept, and Copilot took on the responsibility of turning my ideas into actual code. I relied on Copilot at various stages of BrainDump AI’s development, from laying down the fundamental building blocks to executing a complete deployment.
Frontend & UI
I solely used Copilot to create the next.js app (I’m a Python girlie 🐍🎀 ) and the UI of the app. The app came together in just one prompt with all the necessary files structure.
The UI did take longer to perfect, but credit goes to Copilot for that (UI honestly isn’t my strong suit). I gave Claude 3.5 Sonnet a shot for designing the extension’s UI, and I have to say, it really delivered!
Asking Copilot to make UI with minimalistic and calming vibes. 🎀
Adding Functionality
GitHub Copilot was incredibly helpful in creating backend functions and generating scripting code for button triggers. First I independently wrote the backend code with Copilot’s assistance and then I asked if to connect the functions to the frontend, which it did expertly. Of course, there were some issues (only in heaven would code work the first time without errors), but Copilot handled them brilliantly.
I asked Copilot to create the backend function and trigger it once the button was pressed.
Errors & Edits
Errors - the programming antagonist. With the rise of LLMs, tackling errors in code has become so much more manageable. Copilot, in particular, has been a lifesaver when it comes to debugging. Whether it’s errors popping up in the terminal, issues with functionality, or plain old syntax problems, Copilot handles it like a pro.
One of the absolute best things about using Copilot is how simple it is to fix faulty code—you can literally just highlight the problem area and ask it to fix it. It’s insanely fast and effortless, and I’ve been taking full advantage of this feature ever since Copilot launched a couple of years ago (yes, I’m an OG GitHub Copilot user 😉). It’s changed the game!
I should reiterate that I’m a Python person and not a pro in Javascript so there was a lot to to debug in this next.js app and I fully relied on Copilot to help me fix the incessant issues.
Copilot helped me fix issues when configuring the next.js app.
Asking Copilot to fix a compilation error.
The “Edit with Copilot” feature is also insanely helpful. Copilot was struggling with outputting markdown in the Chat, but it did it perfectly in the Edit interface.
Using the “Edit with Copilot” feature. ✍️
Autocomplete
It still feels like magic how you start writing some code, and Copilot instantly suggests the completion—it’s been so helpful so many times. For BrainDump AI, I relied heavily on Autocomplete to create both the frontend code and backend functions. It really saved a lot of time! ⏱️
Chat
The in-editor Copilot chat was in constant use by me at all stages of the app development.
I conversed with Copilot for various purposes during development, some are highlighted below.
Asking Copilot to create the .gitignore file by attaching the entire codebase (don’t worry, I did double check it before committing the code).
Created the entire readme file using Copilot.
Additional Features I Loved
There are so many other ways Github Copilot assisted me throughout the development of this app, from terminal commands, highlighted-code editing, testing deployed API endpoints to logging function outputs. It really optimized the entire workflow.
Copilot flawlessly fixed LLM-generated code parsing issues.
It’s so easy to add logging to your code with Copilot.
I love how you start with an empty file, ask Copilot to generate code for it and can directly apply the code block to the file - barely had to lift a finger (just enough to click the mouse button 😆).
GitHub Models
This is my first time trying GitHub Models, and I’m genuinely impressed. Being able to use the GPT-4o and 4o mini APIs for free, even with rate limits, is such a fantastic offering.
The limits are ideal for testing and prototyping, making it incredibly beneficial for developers who want to build basic MVPs or test their ideas without needing to purchase credits.
The convenience of the GitHub Model Playground is unmatched—it literally took seconds to set up the LLM API through GitHub Models. With support for so many LLMs, both proprietary and open-source, GitHub Models has definitely become my top choice for integrating LLM APIs into my projects.
For BrainDump aI, I used GPT-4o because its precision and accuracy are perfect for my use case which involves AI-generated code (so any mess-ups will cost dearly!) The results speak for themselves - the diagrams were always rendered perfectly.
I tested out prompts for my app function right there in the playground to perfect it and then created the final backend functions.
The task that LLM handles via Github Models is the conversion of user input to output organized diagram through mermaid.js code.
Basically the crux of the app is the LLM.
Conclusion
Creating this app was such an enjoyable experience—it really unleashed my creative side. The time was waning and there was a pressure to complete the app before the deadline - I always work my best under pressure (sad, but true).
P.S: There’s only thirty minutes till submissions close as I write this very sentence!
I developed this entire app and deployed it on Sunday, 19th January in a span of about 4 hours.
The prompts provided as the hackathon tracks were super unique and interesting and definitely out-of-the-box as compared to other hackathons so that made it even more interesting.
BrainDump AI fits perfectly in the Transitions and Transformations prompt due to its ability to transform something messy and chaotic (yes, I’m talking about the inside of your mind, apologies!) into organised and simplified workflows. It helps you transition from a stressful state of mind to a more relaxed one as you are able to (literally) dump
out all the nagging thoughts in your brain.
In addition to that, I also believe that BrainDump AI qualifies for the New Beginnings prompt because it makes people more productive and can help them start anew with a fresher and more relaxed peace of mind.
Even though this app is currently just a small prototype that I built in a day, I can see that it has potential.
In today’s hustle culture, no person is free from a huge amount of mental stress. Journaling and meditation, among other things, are a good way of calming your brain but not everyone has the luxury to make tike for them. In lieu of these, BrainDump AI provides a more convenient and accessible solution to remove daily stress from your life and show some love to your overworked brain.
I have several ideas to expand BrainDump AI and really take it the next level. Users should be able to get registered save generated diagrams and even categorize their tasks (will add a database!). I even tried to add speech-to-text feature to make the braindump process more convenient but alas time was constraint - so this is something that I will definitely incorporate in the future. It would also be great to add more customization etc to the generated diagrams and I plan to explore more code-to-diagram tools to make the experience even better. I also see potential improvements that can be made to the UI to make it more appealing.
In any case, I hope BrainDump AI can truly help people and take at least some stress away from their lives, so they can transition to a more peaceful state of mind. ✨
Note: The publication date shows 20 Jan because it's 20 Jan here but the PST time is still 19th Jan.
Top comments (1)
Amazing Idea🔥