Full-Stack . Vibe-Coding.Saas
Planora
A modern study planning platform vibe-coded and designed to help students organize their tasks, timetable, events and note in one place
Description
A modern study planning platform vibe-coded and designed to help students organize their tasks, timetable, events and note in one place
Technologies
Project Stack
frontend
React.js, CSS, Javascript
backend
Supabase, Postgressql
animation
Framer-Motion
The Process
Challenges I Faced
One of the main challenges was communicating the exact UI and functionality I wanted through prompts. Initial outputs often needed several rounds of refinement before they matched the intended design.
As the project grew, maintaining consistency across components required careful prompting around spacing, typography, responsiveness, and overall design.
AI-generated code sometimes introduced incorrect assumptions or implementation details, so I had to understand, test, and debug the generated code rather than relying on it blindly.
I also learned that breaking complex requirements into smaller and more specific prompts produced much better results than trying to describe the entire application at once.
Takeaways
What I Learned
I learned how to write clearer and more structured prompts by providing context, constraints, examples, and expected behavior.
I learned to treat AI as a development assistant rather than a replacement for understanding the code I was building.
I learned that iteration is an important part of AI-assisted development. Testing, refining prompts, and reviewing the output repeatedly led to much better results.
I learned how important it is to clearly define responsive behavior, component structure, and visual consistency when working with AI-generated interfaces.
Most importantly, I learned that effective prompting is a technical skill that requires clear thinking, problem breakdown, and the ability to evaluate and improve generated solutions.