Cymos

Introduction

Cymos is a next-generation website builder designed for non-technical creators who need a fast, beautiful, and fully accessible web presence—in under three minutes. With our intuitive drag-and-drop canvas and the powerful "Code With Me" Gemini AI assistant, building a site feels less like a chore and more like a game. Charity? CV website? Art Portfolio? Cymos allows you to host your ambitions through website design! Get active feedback from Gemini on our analytics page about your daily, weekly, or even monthly reports! Welcome to Cymos, the new era of AI generation. No coding. No confusion. Just creation.

How it works

Cymos opens on a clean, styled landing page inviting you to Get Started or Log In, at which point Auth0 handles authentication and returns a JWT that we securely store alongside your profile in MongoDB. Inside your personal workspace you can either choose from our curated templates or start from scratch—if you opt for the latter, a brief, friendly survey feeds your responses into our Gemini AI assistant so its design suggestions feel tailor-made. As soon as you complete your first layout you unlock the animated “Welcome to Cymos” badge (and many more for actions like “Launched First Site” or “Used AI Suggestions”), turning site-building into a gamified journey. Our intuitive drag-and-drop canvas, complete with 2x6 grid snapping, resizing, recoloring, and theme presets, lets you position, style, and preview elements on desktop, tablet, or mobile; switch into AI mode at any time to ask Gemini for color palettes, typography tweaks, or layout advice, and watch one-click updates roll out instantly. Save your runs every few seconds! and when you’re ready, a single Publish click triggers our wizard to deploy your website in our domain! Once live, we collect fully anonymized traffic data—page views, session length, bounce rate—completely GDPR/CCPA-compliant, and feed it back into your analytics dashboard alongside one-click SEO and performance recommendations that Gemini can apply on your behalf, so your beautiful, accessible site not only goes live in minutes but keeps getting better over time.

How we built it

1 . Frontend with Vue, TypeScript, Tailwind, shadcn, html, css.

Backend with Express, TypeScript, Python, Flask, Mangoose, PyMango
Database with MongoDB
Authentication with Auth0
Use of Generative AI for personalized recommendations and analytics -Gemini AI
Drag and drop UI component editor - GrapesJS
Deployment with cloudflare and nginx

Challenges we ran into

During this hackathon, we faced alot of problems in building such ambitious projects. We had numerous times where were saved by libraries to save tremendous amounts of time designing and debugging. Something that we first thought would've taken us days took us a mere 24 hours. We had a lot of issues with the amount of techstack we had to learn, and the amount where we had to discover or implement for the first time. Anything from workflow to project architecture, this was a challenge to manage for such a short amount of time. At the same time, we have had tons of trouble solving flask CORS mistakes after redirecting different routes. Local port issues when deploying, MongoDB not being able to store data for our each individual generated sites,

Accomplishments that we're proud of

Overall, We were happy about the completion of the project because it was so ambitious and an extremely large project. Dozens of libraries and multiple API calls, setting up everything wasn't easy. We are also very happy that we got to make Gemini AI such a huge part of our website building and analytics. It can both live-code with the user on the website editor, and also analyze, recommend personal recommendations based on statistics given to it. This was an extremely time-consuming and unfathomable project, to achieve it was our greatest glory

What we learned

How to deploy websites using cloudflare nginx on macos, project architecture, Live-time code altercations while designing with GrapesJS and Gemini AI, Flask backend server setup, MongoDB and Auth0 implementation, web design through shadcn tailwind.

What's next for Cymos

We want to scale this website to help those who don't have access to the same platforms to be represented online. We want to implement more SEO and Analytic data to improve our Gemini's accuracy on giving our user advice, we would like to increase exponentially the amount of containers, components and frames that is offered through our website editor. We would also like to add templates that correspond to indicative styles and set themes that we would need to study for. We want to maximize user experience and satisfaction at all cost.