WebCraft | Devpost

Inspiration

Aspiring web developers often face a steep learning curve when first starting out. Many struggle to understand the nuances of different frameworks and technologies and lack the necessary skills to build and deploy a web application from scratch. WebCraft was inspired by the need to create an intuitive, AI-assisted online Integrated Development Environment (IDE) that would make web development accessible to everyone.

What it does

WebCraft is a full-stack-focused version of GPT that generates and deploys code and features on a live server. Users can interact with the generated code and provide feedback and edits to improve the output. The system consists of several components, including a user interface, input preprocessing, GPT3.5/GPT4 for code generation, a live dev server, feedback loop, output post-processing, and user notifications.

How we built it

We built WebCraft with Vue for frontend built on top of Monaco editor and FastAPI for backend. We used GPT3.5 for code generation and AWS to host the live dev server. We integrated GitHub for cloning projects and used Docker to provide each user with a dedicated container for their work.

Challenges we ran into

One of the main challenges we encountered was the cost of using GPT3.5. We had to find creative ways to optimize our code and reduce costs, such as limiting the number of characters per user account. Another challenge was implementing a feedback loop that effectively collected and processed user feedback while keeping response times reasonable.

Accomplishments that we're proud of

We are proud of creating a powerful, AI-assisted web development tool that makes it easy for users to build and deploy web applications.

What we learned

Working on WebCraft taught us a great deal about AI-assisted web development, including the challenges of integrating different components into a single system and the importance of optimizing code to reduce costs. We also learned how to use Docker to provide a personalized development environment for each user and how to integrate GitHub for user authentication.

What's next for WebCraft

In the future, we plan to add more frontend and backend frameworks and expand the range of options available for databases. We also plan to explore ways to incorporate user-provided designs using mini-GPT4 and add search capabilities using typesense or elastic search. Finally, we plan to continue optimizing WebCraft to reduce costs and improve response times while maintaining its ease of use and functionality.