Project Info

Winner

Delve: Most Intuitive UX (AirPods + Delve Founder Numbers + Onsite)

CodeForge Pages

Inspiration

We love to build, but design is hard. To make something visually appealing, it requires a lot of experimentation and research into what needs to be added. Landing pages are often the first thing a customer sees about a business. We thought current AI tools fall short of our needs. They were either too rigid, didn't integrate well into our workflow of Next.JS, or didn't have enough complexity. So, we thought, why not automate it?

What it does

CodeForge Pages asks users to enter information about their company along with the name of the company. Based on this information, CodeForge generates a multi–component landing page in React that contains beautiful layout, text, and style. Users can view the rendered code in either the web-view or a simulated mobile view. When pleased with the website, they can export it–which will download a zip of all the react components. All users are also authenticated – meaning when you create a project, we associate it with your profile and it can be accessed at any time through the dashboard.

How we built it

CodeForge Pages is built in Next.JS. The AI pipeline is quite intricate. We first recorded the data of existing landing pages and then extracted images of every single component of that page (header, hero, feature, etc). Every landing page was then added to an Elasticsearch serverless vector database with a corresponding description generated automatically. Now, when the user prompts the app, it finds the most similar company and generates components through a section-by-section workflow. This backend operation is all coded in Python and utilizes FastAPI. To render the generated component, we use Sandpack from CodeSandbox. In order to authenticate each user, we use Supabase – allowing GitHub, Google, and verified email log-in. To save the data about each project for every user, we use Firebase. Specifically, every component is stored as a String and is rendered every time the user opens the project.

Challenges we ran into

It was quite difficult to render the generated React components on the screen. At first, we created an implementation using Babel. This nearly took 5 hours and was quite complicated as there were many issues with UI libraries we were using such as Tailwind. Later, we experimented with some other features and asked those at the booths for help. After some more research, we found CodeSandbox. Additionally, the model was glitching – generating white text on white background or dark text on dark backgrounds. To fix this, we utilized Tailwind to ensure the model was accurately placing classes on elements. Additionally, we improved the prompting through iteration.

Accomplishments we're proud of

The app generates beautiful and aesthetic components as shown in the images. These designs can be implemented at a real business with a great level of acceptance. Additionally, the code also displays code and an accurate preview. Preview at first seemed difficult to generate accurately, but now it is quite accurate and rarely errors.

What we learned

We gained many insights about UI / UX automation through AI and what it takes to generate such components. Additionally, we learned more about how code rendering really works in React projects. In the future, we should check if there are any libraries to simplify our tasks.

What's next

We plan to add more features to the app and ship it to the public. Some of the features we plan to add are chat to add features, an interactive no-code editor, on-demand hosting, and image generation / implementation.

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Analysis

Compare with all teams

View

Metric

Kshitij Teotia
1

Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.

Technology

Found in codeClaimed only

CSSIn code
FirebaseIn code
JavaScriptIn code
Next.jsIn code
ReactIn code
SupabaseIn code
Tailwind CSSIn code
TypeScriptIn code
FastAPIClaimed
PythonClaimed

8 of 10 appear in the indexed code. 2 claimed on Devpost could not be matched to code, which may simply mean the tool leaves no trace in the repository.

AI coding agents

No AI coding agent signals were found in this repository.

Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.

Codebase size

Source size

189 KB

Source files

Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.