Key Lessons from My First Major Web Development Project + Vue.js Insights

Embarking on your first substantial web application can be both exciting and challenging. Recently, I developed a notable project—a Notion extension that fetches data from Notion databases and converts it into email reports. For those interested, you can explore the live version here: https://ocean-digest.com.

This project leveraged a tech stack comprising Nuxt.js, Supabase, Stripe, Notion API, Google Cloud Platform, and Cloudflare. Through this journey, I gathered several valuable insights, which I hope will streamline your development process and help avoid common pitfalls.

1. Prioritize Validation Rules Before TypeScript Classes

Initially, I invested significant effort in defining TypeScript classes and interfaces for the backend logic. Only later did I realize the importance of robust input validation. Incorporating validation libraries like Zod early on not only improves security but also simplifies maintenance since you can generate TypeScript schemas directly from validation schemas. This approach minimizes redundant code adjustments and enhances overall code quality.

2. Keep Your State Management Lean with Pinia

In the beginning, I stored assorted UI-related logic—such as modal visibility and notification states—within the Pinia store. I found this approach created unnecessary complexity and made state harder to manage. Transitioning to utilizing Nuxt’s useState() within composables allowed me to compartmentalize UI logic neatly and keep the store focused solely on critical data. This separation fosters clearer, more maintainable code.

3. Utilize Provide/Inject for Passing Data in Vue

While passing data via props is straightforward, it can lead to deeply nested or cumbersome structures—often termed “prop drilling.” In such cases, Vue’s provide/inject system offers a cleaner, more scalable solution for sharing data across component hierarchies. Additionally, defineExpose() can facilitate communication from child to parent components, reducing the need for excessive props and making your codebase more manageable.

4. Validate the Necessity of Features Before Building

It’s tempting to add fancy features impulsively. However, before investing hours into development, always evaluate whether the feature truly serves your audience. When you consider a new feature, ask yourself: Are users going to utilize this? Implementing functionalities without validation can lead to wasted effort and resources—sometimes, simpler is better. Focus on core value and audience needs to