Project Story: CrodeX
What Inspired Us Developers often rewrite entire codebases when switching frameworks, which is time-consuming, error-prone, and wastes effort. We wanted a tool that automates framework conversion while preserving business logic. CrodeX was built to let teams switch stacks without losing functionality.
What We Learned We explored multiple frameworks (Flask, Django, Spring Boot), analyzed code structure, and integrated AI for intelligent conversion. We learned how to parse project layouts, extract dependencies, and map patterns across frameworks. Integrating Gemini taught us prompt engineering, API optimization, and handling large codebases efficiently. We also implemented file management, session handling, and real-time progress tracking, covering frontend-backend communication, error handling, and user experience design.
How We Built It CrodeX is a Flask web application with a modular architecture. The backend uses Flask blueprints for routing, a service layer for AI integration (Gemini), and utilities for file management and cleanup. The analyzer detects frameworks from file patterns and dependencies. The converter orchestrates analysis and conversion, using AI to transform code while maintaining logic. The frontend uses vanilla JavaScript for drag-and-drop uploads, real-time progress, and dynamic UI. We used Server-Sent Events for progress updates and implemented session-based state for project tracking. The UI includes a welcome screen with logo animation and a responsive layout using CSS Grid and Flexbox.
Challenges We Faced We addressed several challenges. Parsing ZIP structures reliably and handling nested directories required careful path handling. Managing large file uploads led to streaming and progress tracking. Session storage for large project data prompted lightweight summaries to avoid cookie limits. AI integration required balancing conversion quality and speed while keeping context windows within limits. Frontend state management across upload, analysis, conversion, and download required careful coordination. Ensuring converted code preserves functionality and business logic demanded robust validation and testing. Cross-browser compatibility for drag-and-drop, animations, and CSS features required progressive enhancement and fallbacks.
The Result CrodeX delivers a solution that reduces migration effort from weeks to hours. It demonstrates how AI can automate technical tasks while preserving the value in existing code, making framework migration more accessible for development teams.
Built With
- anthropic-api
- application-factory-pattern
- black
- blueprint-pattern
- chardet
- css3
- flake8
- flask
- flask-cors
- flask-session
- font-awesome
- google-fonts
- google-gemini-api
- html5
- javascript-(es6+)
- middleware
- pytest
- pytest-cov
- pytest-flask
- python
- python-dotenv
- python-magic
- python-magic-bin
- pyyaml
- redis
- requests
- restful-api
- server-sent-events-(sse)
- service-layer-architecture
- werkzeug
- xmlhttprequest
Log in or sign up for Devpost to join the conversation.