GPT Web App Generator - Let AI create a full-stack React & Node.js codebase based on your description 🤖🤯
This project started out as an experiment - we were interested if, given a short description, GPT can generate a full-stack web app in React & Node.js. The results went beyond our expectations!
🚀 GPT Web App Generator is live on Product Hunt today! If you like what we're doing, your support would mean the world to us!
How it works
All you have to do in order to use GPT Web App Generator is provide a short description of your app idea in plain English. You can optionally select your app's brand color and the preferred authentication method (more methods coming soon).
That's it - in a matter of minutes, a full-stack web app codebase, written in React, Node.js, Prisma, and Wasp, will be generated right in front of you, and available for you to download, run it locally, and deploy with a single CLI command!
Take a look here to see a one-minute demo video of generating a fully-functioning blog.
The stack 📚
Besides React & Node.js, GPT Web App Generator uses Prisma and Wasp.
Prisma is a type-safe database ORM built on top of PostgreSQL. It makes it easy to deal with data models and database migrations.
Wasp is a batteries-included, full-stack framework for React & Node.js. It takes care of everything from front-end to back-end and database along with authentication, sending emails, async jobs, deployment, and more.
Additionally, all the code behind GPT Web App Generator is completely open-source: web app, GPT code agent.
⚠️ CAUTION
Since this is a GPT-powered project, it's output is not 100% deterministic and small mistakes will sometimes occur in the generated code. For the typical examples of web apps (as seen below) they are usually very minor and straightforward to fix. If you get stuck, ping us on our Discord.
My Plants - track your plants' watering schedule 🌱🚰
💻 See the generated code and run it yourself here
This app does exactly what it says - makes sure that you water your plants on time! It comes with a fully functioning front-end, back-end, and database with User and Plant entities. It also features a full-stack authentication (username & password) and a Tailwind-based design.
The next step would be to add more advanced features, such as email reminders (via Wasp email sending support) when it is time to water your plant.
ToDo app - a classic ✅
💻 See the generated code and run it yourself here
What kind of a demo would this be if it didn't include a ToDo app? GPT Web App Generator successfully scaffolded it, along with all the basic functionality - creating and marking a task as done.
Limitations
In order to reduce the complexity and therefore mistakes GPT makes, for this first version of Generator we went with the following limitations regarding generated apps:
- No additional npm dependencies.
- No additional files beyond Wasp Pages (React) and Operations (Node). So no additional files with React components, CSS, utility JS, images or similar.
- No TypeScript, just Javascript.
- No advanced Wasp features (e.g. Jobs, Auto CRUD, Websockets, Social Auth, email sending, …).
Next features wishlist
- Get feedback on this initial experiment - both on the Generator and the Wasp as a framework itself: best place to leave us feedback is on our Discord.
- Further improve code agent & web app.
- Release new version of wasp CLI that allows generating new Wasp project by providing short description via CLI. Our code agent will then use GPT to generate project on the disk. This is already ready and should be coming out soon.
- Also allow Wasp users to use code agent for scaffolding specific parts of their Wasp app → you want to add a new Wasp Page (React)? Run our code agent via Wasp CLI or via Wasp vscode extension and have it generated for you, with initial logic already implemented.
- As LLMs progress, try some alternative approaches, e.g. try fine-tuning an LLM with knowledge about Wasp, or give LLM more freedom while generating files and parts of the codebase.
- Write a detailed blog post about how we implemented the Generator, which techniques we used, how we designed our prompts, what worked and what didn’t work, … .
This is just the first version of the product so every feedback is welcome - try it out and let us know how it went and which features you'd like to see next!
We can't wait to see what you'll build - happy coding!
Oh my god, it's happening!!
They are coming :D 🤖
can you pick the backend language that you want? Also can I have it build other stuff like for example creating and sending contract templates.
Hey Ruben, the stack is React, Node.js, Prisma and Wasp. And yes, you can use it for creating/sending contract templates. The starter can help you come up with the initial project structure and CRUD around it, but you'll still have to code your own custom and more complex logic.
If you have any questions, join our Discord (https://discord.gg/rzdnErX) and we'd be happy to help!
Can I ask the generator add more stuff after I generate the initial app? Seems like a killer feature 👏 also, is there a monetization plan here?
No monetization plan! We already gain a lot by people trying out and generating Wasp apps, so the plan is to keep it free. Also it would be helpful for existing Wasp users to kick start new projects easily.
But yeah adding more stuff after first generation would be awesome!
So cool. Do you have any info on initial users? I imagine it would be extremely helpful to junior devs looking to get into full-stack development.