Lessons Learned from My First Major Web Application Project and Valuable Vue.js Tips

Embarking on a significant web development venture can be both exciting and challenging. Recently, I completed my first substantial web application—a Notion extension designed to extract data from Notion databases and deliver it via email reports.

You can explore the live version here: https://ocean-digest.com

This project leveraged a modern tech stack, including Nuxt.js, Supabase, Stripe, Notion API, Google Cloud (primarily for serverless functions), and Cloudflare.

Throughout this journey, I gathered several insights that can help fellow developers optimize their workflows and avoid common pitfalls. Here are five key takeaways:

1. Prioritize Validation Rules Before TypeScript Classes

Initially, I crafted all backend TypeScript classes and interfaces before integrating any validation mechanisms. Later, I realized integrating a dedicated validation library like Zod early on could streamline the process. Not only does this reduce redundancy—since you can derive TypeScript interfaces directly from your schemas—but it also minimizes the need for adjustments across multiple parts of your codebase.

Pro Tip: Incorporate schema validation at the outset to save time and ensure data integrity throughout development.

2. Keep Your State Management Simple and Focused

At the start, I stored various UI states—such as modal visibility and notification arrays—in a Pinia store. Over time, I shifted towards a more modular approach: managing UI-specific logic within composables using Nuxt’s useState, reserving Pinia for core data that needs to be shared globally.

This separation keeps your state store lean and easier to maintain, avoiding clutter and making your application’s data flow clearer.

Pro Tip: Use lightweight composables for transient UI states and reserve your global store for essential data.

3. Use Vue’s provide/inject for Cleaner Data Passing

Passing data from parent to child components using props is straightforward but can become cumbersome—especially with deeply nested components. While prop drilling is common, Vue’s provide and inject features allow for a cleaner, more maintainable way to share data across component hierarchies.

Additionally, defineExpose can help in scenarios where child components need to send data back to parents without overloading props.

Pro Tip: Incorporate provide/inject when passing data across multiple component levels to simplify your code and improve traceability.