Introduction:
During the Code with Kiro Hackathon, KiroGenesis was developed with the intention of creating a simple yet effective starter template for creating full-stack applications. We were forced to investigate Kiro's distinctive API generation hooks during the hackathon, so we used the chance to build a scaffold that strikes a balance between usability and simplicity.
As a developer who is always prototyping UI flows and APIs, I frequently found that setting up React state sync, CORS, and API endpoints was repetitive. The goal of this project is to expedite that process and enable ideas to go from zero to life more quickly.
Problem Statement:
Before concentrating on business logic, developers spend too much time configuring simple API routes, resolving CORS problems, and wiring frontends to mock data.
This is resolved by KiroGenesis, which provides:
- A full-stack scaffold that is ready to use.
- Already wired Async fetch calls in a React frontend.
- User and billing endpoints are part of the FastAPI backend.
- To avoid cross-origin problems, use CORS middleware.
Tech Stack:
Frontend: React.js (Create React App)
Backend: FastAPI
ASGI Server: Uvicorn
CORS Middleware: fastapi.middleware.cors
Development Environment: Visual Studio Code
** Features:**
- GET /api/users → gives back a list of fictitious users.
- POST /api/billing → Creates a subscription simulation.
- CORS Setup → Enables backend API access for the frontend (localhost:3000).
- Frontend Integration → The React app retrieves billing status and users from the backend.
- Live Dev Server Support using uvicorn --reload and npm start.
Challenges Faced & Solutions:
Problem: Because of an incorrect working directory or module name, Uvicorn was unable to find the FastAPI application.
** Fix:** Verified that app.py was in the backend root and that uvicorn app:app --reload was executed from the same directory.
** Problem:** CORS errors prevented the React frontend from fetching from FastAPI.
** Solution:** CORSMiddleware was integrated into FastAPI, and allow_origins was appropriately set to http://localhost:3000.
** Problem:** the frontend build failed to locate react-scripts.
** Fix:** To avoid needless Python venv activation in the React project folder, all necessary dependencies were installed using npm install.
** Video Link:**
https://vimeo.com/1101464814
GitHub Repository:
https://github.com/NiranjanBabu7/Kirogenesis
Conclusion – What’s Next?
This is only the start. Upcoming revisions will consist of:
- User authentication based on JWT
- Actual integration of payments
- Deployment to Render and Vercel platforms
- Support for Dockerized containers
- Using Kiro's API hooks to generate intelligent backends
The goal of KiroGenesis is to develop into a boilerplate that can be reused for hackathons, MVPs, and instructional demonstrations.
Top comments (0)