السلام علیکم ورحمۃ اللہ وبرکاتہ
In the name of Allah, the Most Gracious, the Most Merciful, I begin this article with a story of ambition, failure, and the lessons I learned along the way. As a developer passionate about creating meaningful applications, I embarked on a journey to build HelpMySalah, a web app aimed at assisting users in managing their Salah.
Initially, the project seemed promising, and I was excited to bring it to life. But in hindsight, I made a critical error: I chose a tech stack I knew very little about. Add to that my over-reliance on AI, and the result was a disaster that taught me valuable lessons about preparation, mastery, and the mindful use of technology.
Background: Jumping into Vue.js with No Experience
Coming from a strong background in Flutter development, I felt confident in building applications. I have a solid understanding of app architecture in Flutter, including state management. However, when I decided to create HelpMySalah as a web app, I chose Vue.js as the framework.
At the time, I knew very little about Vue.js. While I had some familiarity with Pinia for state management and Vue Router, my overall knowledge of Vue.js was surface-level. I lacked an understanding of:
Component-based architecture.
Best practices for scaling Vue.js applications.
TypeScript, which I decided to use without any prior experience.
It was like venturing into a dense forest without a map or compass.
How AI Seemed Like a Shortcut
To speed up development, I used Cursor AI, a popular AI-powered coding assistant. In the beginning, it felt like a blessing. The AI helped me write components quickly, generate boilerplate code, and set up basic workflows.
But as the project grew, cracks began to show.
Database Schema Changes: When I needed to update the database schema, everything connected to it started breaking.
State Management Issues: Bugs emerged due to poor practices, and I struggled to fix them.
Too many interfaces: In clean architecture + Flutter, we create clear models which are data classes that are used throughout the app. In HelpMySalah, the AI generated so many interfaces that it left me scratching my head trying to figure out which one means what and how it is being used.
This is when I realized the root of the problem: I had no mental map of the app. Without a deep understanding of the framework or the architecture, I couldn’t debug efficiently.
The Consequences of My Mistakes
Here are the critical mistakes I made:
Using a Framework I Didn’t Understand
My lack of experience with Vue.js was a major issue. Unlike Flutter, where I feel at home, I was unfamiliar with Vue’s workflows, making even simple tasks feel complicated.Overreliance on AI
While AI was useful for speeding up tasks, I used it as a crutch instead of learning Vue.js properly. When things went wrong, I didn’t have the knowledge to fix them.Attempting TypeScript Without Learning It First
Adding TypeScript to the mix, without prior experience, was like throwing fuel on the fire. Instead of simplifying the project, it added unnecessary complexity.Lack of a Clear Project Map
I didn’t plan the architecture, document the database schema, or map out component interactions. As the app grew, managing the codebase became increasingly chaotic. Every day, I had to add one or two new database migrations. Extremely irritating…
Lessons Learned from My Failure
Master the Basics Before Starting
Never dive into a new framework without understanding its fundamentals. If I had spent time learning Vue.js and TypeScript first, I could have avoided many of these issues. Don’t try to master 10 frameworks. Instead of learning to make a to-do app in 10 frameworks / SDKs, become an expert in one framework / SDK. Don’t be jack of all trades and master of none. Imagine being an expert in one framework so much so that you can literally make anything imaginable. How cool, right? Plus, people will pay you highly highly well if you are an expert at what you do. It will take some time before you find the framework you love so keep searching. For me, it was Flutter, Alhamdulillah. I read the following dua and Allah helped me make the correct choice:Allahumma khir lee wakhtar lee
اللَّهُمَّ خِرْ لِي وَاخْتَرْ لِي
“O Allah, make it good for me and choose for me.”
AI is a Tool, Not a Replacement for Knowledge
AI can assist you, but it cannot think for you. Use it to handle repetitive tasks and speed up workflows, but ensure you understand the code it generates. You have to tell it how to do things and not let it tell you!Stick to Your Strengths for Big Projects
For large-scale projects, use technologies you’re confident in. Experiment with new tools on smaller projects where the stakes are lower.Plan and Document Things
Whether it’s the database schema, component hierarchy, or overall architecture, documentation is key to managing complexity and ensuring long-term scalability.
Conclusion: A Blessing in Disguise
Alhamdulillah, this failure turned out to be a blessing. It taught me the importance of preparation, mastery, and mindful use of technology. While HelpMySalah didn’t succeed as I had hoped, it was a valuable learning experience that has made me a better developer.
To my fellow developers, my advice is simple: Bismillah, start every project with preparation and humility. Make beautiful du’as. Use AI to enhance your productivity, but don’t let it replace your expertise. Stick to the tools you know well, and never stop learning.
May Allah help us improve, grow, and succeed as devs 🔥.