svg

Blog articles

ARVX Dev Log #1: Laying the Foundation

Yesterday I kicked off **ARVX**, my property analyzer app, and focused on putting the core pieces in place. The goal wasn’t to build features yet — it was to give myself a clear starting point with a stack, roadmap, and skeleton. --- ## Choosing the Tech Stack I decided to build ARVX with **React Native (via Expo)** and **Tailwind CSS**. I'm using VS Code for my IDE. - **Expo** makes it painless to build and test on both iOS and Android. I especially like the Expo Go app so I can view what my app looks like live. However, I do want to figure out an emulator option for my IDE. - **React** keeps the component-driven workflow I’m comfortable with. - **Tailwind CSS** gives me consistency in styling without overthinking design at this early stage. I'm using Nativewind. This combo feels flexible enough for a side project but also powerful enough to grow into something real. --- ## Roadmap: The First Version To avoid feature creep, I wrote down the core screens ARVX needs: - **Dashboard** – properties list & quick stats - **Analyze** – property analyzer form - **History** – saved analyses & past offers - **Profile** – user profile & settings Keeping it small means I can actually ship something usable before layering on extras. --- ## Naming the App I landed on **ARVX** as the name. Short, bold, and modern — it fits the energy I want this app to have. --- ## Setting Up the Skeleton I structured the app with navigation and screens in place: app/ \_layout.tsx # root navigation wrapper modal.tsx # global modal (future use) (tabs)/ # bottom tab navigation \_layout.tsx # tab bar definition index.tsx # Dashboard analyze.tsx # Analyzer form history.tsx # Past analyses profile.tsx # User profile assets/ # logos, splash images Right now, it’s just placeholders and routing — but it already feels like the app has a shape. --- ## Takeaway Day one was about just doing it: picking a stack I like, naming the project, and laying out the skeleton. With these basics in place, I’m excited to start wiring up real functionality next. After I figure out the logo of course. ---

ARVX Dev Log #2: Tools, Themes, and Design

Yesterday was about organization and polish — making sure ARVX not only looks good but also stays on track as it grows. --- ## Project Management with Jira I set up a **Jira board** and broke my work into **user stories and tasks**. Having the roadmap is great, but this step made it actionable. Now I can see exactly what’s next instead of keeping it all in my head. It’s already making the project feel more structured. --- ## Working on the Logo in Figma I jumped back into **Figma** to keep refining the ARVX logo. I ran into a snag: figuring out how to _flatten an effect_ so the design exports the right way. It’s a small detail, but details matter when you want your app to feel professional. Once I crack this, I’ll have a logo I can carry across the app and marketing. --- ## Tailwind Theming Setup To avoid hardcoding values, I **set up custom theming for Tailwind** — colors, fonts, and spacing. This way, ARVX has a consistent look and feel, and I can scale the design system as new screens and features come in. It’s a small upfront effort that’ll save a ton of time later. --- ## Splash Screen Research I also read through **Expo’s splash screen documentation**. I found a Figma template guideline that lines up with Expo’s requirements, which is perfect because it means I can design the splash screen right in Figma and export it cleanly when I’m ready to implement. --- ## Takeaway Day two was about tightening up the workflow and setting the stage for smoother development. Between Jira tasks, Tailwind theming, and design exploration in Figma, ARVX feels like it’s moving from “idea” to “real product.” Next up: I’ll continue to tackle the logo & icon design + work on getting a splash screen set up.

ARVX Dev Log #3: Tools, Themes, and Design

Over the weekend, I finished creating all of my icons and logos for ARVX. Today was mostly focused on **reading Babel documentation** to troubleshoot **Expo/Babel errors** related to `.plugins` not being recognized in `babel.config.js` and preparing my Android development environment. --- ## Babel & Expo Documentation I spent time diving into **Babel configuration issues** in Expo. The specific error I was encountering was: [ERROR] .plugins is not a valid Plugin property Reading the docs helped me understand **how to structure the Babel config correctly for Expo Router** and NativeWind, and why previous attempts were causing build issues. --- ## Android Emulator Setup I downloaded **Android Studio** and started setting up the **Android emulator**. Running `npx expo run:android` led to a **Gradle SSL download error**, which seems related to **Java version compatibility**. My next steps are to read more about **Expo + Java version requirements** so I can get the emulator running smoothly. --- ## Takeaway Today was mostly **research and environment setup**. I’ve got all my icons/logos ready, and now I’m focusing on clearing technical hurdles so I can run ARVX on Android and start working on the skeleton. Next up: resolve the **Gradle SSL error**, verify **Java compatibility**, and get the emulator working for local development.

ARVX Dev Log #4: Gradle Fix & SDK Troubleshooting

Today I finally resolved my **Gradle build issue** by switching from **Java 21 to Java 17**. It turns out that Java 17 is the recommended and supported version even for the most recent Expo SDKs, so this fix lined everything up correctly. I also followed Expo’s documentation on **converting from Expo Go to a development build**, which felt like a big step toward getting ARVX closer to production-level structure. --- ## Gradle Issue Fixed The Gradle error was directly tied to Java version mismatch. After installing Java 17 and updating my environment variables, `npx expo run:android` finally started working as expected. This was a huge blocker, so clearing it out feels like real progress. --- ## Current Focus: Android SDK Now I’m tackling my next obstacle: an **Android SDK mismatch error**. Gradle is complaining about missing or misaligned SDK versions, so I’m digging into Android Studio’s SDK Manager and double-checking my environment variables. This part of setup is tedious, but once it’s stable, I’ll have a much smoother workflow. --- ## Takeaway Every hurdle gets me closer to having a fully working **local Android build**. Fixing the Gradle issue was a milestone, and now it’s about ironing out the Android SDK setup so I can keep building with confidence. Next up: resolve the **SDK mismatch** and continue shaping out ARVX’s skeleton for mobile.

ARVX Dev Log #5: First Android + Web Build

Today was a milestone—I got **both my Android build and Web build running with skeleton styling!** After a week of troubleshooting Expo, NativeWind, and Babel configs, it feels great to finally see the app **running on the Android emulator** and styled consistently across web. --- ## Android + Web Builds Running `npx expo run:android` successfully launched my app in the emulator for the first time. Seeing the first tab screen load with proper skeleton styling was a huge step forward. On the web side, I was able to align styles so both platforms look nearly identical. Tailwind (via NativeWind) is really proving to be a strong choice for managing consistency across platforms. --- ## Skeleton Styling With skeletons in place, I now have a clean **visual framework** for the app. The goal isn’t polish yet, but structure—making sure layouts, spacing, and base components are consistent. This gives me a solid canvas to refine the **glassmorphism + brutalism theme** I want for ARVX. Once the style system feels cohesive, layering in functionality will be smoother. --- ## Takeaway & Next Steps Today was a big **"first working build" moment.** Seeing the app styled across both Android and Web makes everything feel stitched together. **Next up:** - Refine the **glassmorphism + brutalism theme** so components look unified. - Finalize the design system (colors, transparency, typography, shadows). - Once styling is solid, shift focus to **logic, APIs, and backend integration**. By balancing design first, then functionality, I’ll have a strong visual foundation that makes development faster and more intentional moving forward.

ARVX Dev Log #6: Back to Expo Go + Google Places Progress

This week I made the call to move back to Expo Go—and wow, what a difference. Development feels way faster and smoother, without the constant native bundle issues that come with custom builds. I also started honing in on my styling and layout, turning my skeleton screens into real components. So far, I’ve built a reusable Address Input for both web and mobile, plus the Analyze Deal button. Having these in place gives the UI some life again. ## Debugging the “Welcome to Expo” Mystery One of my biggest hurdles this week was getting stuck on the “Welcome to Expo” screen. After days of frustration, I finally traced the issue back to the dotenv library. Turns out, Expo doesn’t play nice with that setup. It already has its own built-in environment variable system that’s way simpler and more reliable. Big lesson learned: always read the docs before trusting Google, Stack Overflow, or AI threads. --- ## Google Places API Breakthrough After clearing that hurdle, I finally made real progress integrating the Google Places API. I started with the well-known react-native-google-places-autocomplete library, which works decently on web—but not so much on mobile or with the new Places API. A deep dive on Reddit led me to a newer package: react-native-google-places-textinput. It’s designed specifically for the latest Places API—and guess what? It actually works! ![Google Places API search results](../../../public/images/places-api-screenshot.PNG) --- ## Takeaway & Next Steps Seeing the search bar finally pull live data feels like a breakthrough. My next focus is refining the layout since the search results currently overlay another component—but that’s an easy fix compared to where I was a week ago. Key takeaway: development gets so much easier once you simplify your tools and understand them deeply. Expo’s built-in features continue to prove that less setup = more momentum. **Next up:** - Fix overlapping search dropdown. - Add loading states and error handling. - Begin connecting search results to the deal analyzer logic. Every small fix adds up—and this week, it finally feels like I’m moving forward again.

ARVX Dev Log #7: Deal Calculations Finally Clicked

This week was a big one. I finally got the deal calculations component working right, and honestly, that’s the piece I’ve been most excited about. It’s the core of everything — the part that actually breaks down whether a property makes sense as an investment or not. Getting it to calculate correctly for both financed and all-cash deals was the real challenge, but once it clicked, it all made sense. Now that the math logic is solid, the app feels like it’s starting to come alive. It’s cool seeing the numbers update instantly and knowing users will be able to make faster decisions without needing a spreadsheet. For other updates, I created a useContext setup and added some new state variables to better handle the data flow. I also built out my repair selection page, which connects nicely to the deal analyzer. Plus, I spent a bit of time cleaning up the layout and making the overall styling more consistent across screens. Blocker of the week was the VirtualizedList warning again — this time because I had the Google Places input nested inside my own styled container. The library doesn’t really play nice with custom styling yet, so it throws that warning when you try to make it look your own. Not a huge deal, just something I’ll need to revisit once the library updates or I switch to a more flexible setup. Next up is setting up my database with Supabase. I chose it because it’s basically a full backend in one — no need to spin up a server or add a bunch of middleware. It’s open source, has a built-in Postgres database, and even includes auth and storage. Plus, there’s an Expo library ready to plug and play, which makes integration super straightforward. This week felt like progress in the right direction — things are starting to connect and actually work together the way I imagined.

ARVX Dev Log #8: Backend Architecture Finally Makes Sense

This week was all about backend architecture, and honestly? It was the week everything started to click. I finally understand how subscription-based databases actually work. Not just copying code from tutorials, but really getting it. Building out the full authentication system with Supabase taught me more about database security, user management, and data modeling than months of reading ever could. What I Built This Week I implemented a complete authentication flow with a "try before you buy" experience – users can explore the property input form and select their exit strategy before being asked to sign up. Once they hit "Analyze Deal," that's when the signup modal appears. It feels natural and doesn't force people to commit before they even know what the app does. The database architecture was the real learning curve. I built out tables for properties, analyses, and user subscriptions with proper Row Level Security policies. That last part was crucial – making sure users can only see their own data while keeping property info public. Getting RLS policies right took some trial and error (hello, 42501 errors), but understanding the difference between INSERT and SELECT policy syntax was a game changer. I also implemented the subscription tracking system that counts unique addresses instead of total analyses. This means free users can update repairs or change strategies on properties they've already analyzed without burning through their 3-per-month limit. It's how I'd want it to work if I were the user. Built out the History and Profile pages too, plus started laying groundwork for property photos using Edge Functions to keep API keys secure. The whole system is starting to feel cohesive. Blockers RLS policies gave me more trouble than I expected. Turns out there's specific syntax for INSERT policies (WITH CHECK) versus SELECT policies (USING), and mixing them up blocks database operations entirely. Took a minute to debug, but once I understood why it works that way, it made perfect sense. Also hit some React useEffect infinite loops that were causing the app to crash. The fix was understanding dependency arrays better – don't include state setters that the effect itself modifies. Another one of those things that seems obvious in hindsight. The biggest conceptual blocker was just wrapping my head around how subscription periods, usage tracking, and database triggers all work together. But that's also what finally clicked this week. What's Next I'm wrapping up the core functionality before integrating the property data API. That means making sure authentication, subscription limits, and the analysis flow all work smoothly together. Once that foundation is solid, adding real property data through an API will be straightforward. Feels good to be at this point. The app is moving from "prototype with features" to "actual product with architecture."

How AI is Revolutionizing Web Development: A Developer's Guide to the New Era

Artificial intelligence is rapidly transforming the way web developers approach building websites and applications. From automating repetitive coding tasks to generating UI components, AI tools are giving developers more time to focus on creativity and problem-solving. Tools like **GitHub Copilot**, **ChatGPT**, and **AI-assisted design platforms** are not just novelties—they are becoming essential parts of the modern development workflow. These technologies help with writing boilerplate code, suggesting optimizations, and even debugging issues faster than ever before. As more developers integrate AI into their stack, the potential for faster project delivery, cleaner code, and innovative user experiences increases exponentially. Staying updated with these tools is no longer optional; it's a competitive advantage. While some fear AI will replace developers, the reality is that it **augments human creativity**, allowing developers to focus on higher-level problem-solving and UX design. For web professionals, embracing AI means working smarter, not harder, and delivering more impactful digital products. --- ## The Current AI Landscape in Web Development The AI revolution in web development extends far beyond simple code completion. Today's developers have access to an ecosystem of intelligent tools that handle everything from initial wireframing to deployment optimization. **Claude**, **v0 by Vercel**, and **Cursor** represent the next generation of development assistants, capable of understanding context, generating entire components, and even explaining complex architectural decisions. These tools don't just write code—they understand intent and can suggest best practices while adapting to your specific project requirements. The integration goes deeper with specialized platforms like **Framer AI** for design-to-code workflows, **Midjourney** for generating custom graphics and prototypes, and **CodeWP** for WordPress-specific development tasks. Each tool addresses specific pain points that have traditionally consumed hours of developer time. --- ## Practical Applications: Where AI Makes the Biggest Impact ### Code Generation and Boilerplate Reduction Modern AI can generate complete React components, API endpoints, and database schemas from natural language descriptions. Instead of writing repetitive CRUD operations or form validation logic, developers can describe their requirements and receive production-ready code that follows established patterns and conventions. ### Intelligent Debugging and Code Review AI-powered debugging goes beyond syntax errors. Tools like **DeepCode** and integrated AI in IDEs can identify performance bottlenecks, security vulnerabilities, and architectural issues before they reach production. This proactive approach to code quality significantly reduces technical debt and maintenance overhead. ### Automated Testing and Documentation Perhaps one of the most time-consuming aspects of development—writing comprehensive tests and documentation—is being revolutionized by AI. Tools can now generate unit tests, integration tests, and even end-to-end test scenarios based on your existing codebase, while simultaneously creating detailed documentation that stays synchronized with code changes. ### Design System Integration AI is bridging the gap between design and development by automatically generating design tokens, component libraries, and style guides that maintain consistency across large applications. This ensures that design decisions are properly translated into code without manual interpretation errors. --- ## The Skills Evolution: What Developers Need Now As AI handles more routine tasks, the developer skill set is evolving toward higher-level competencies. **Prompt engineering** has emerged as a critical skill—the ability to communicate effectively with AI tools to achieve desired outcomes. This involves understanding how to structure requests, provide context, and iterate on AI-generated solutions. **AI tool orchestration** is becoming equally important. The most effective developers are learning to combine multiple AI tools in workflows, using each for its strengths while understanding their limitations. This might involve using one tool for initial code generation, another for optimization, and a third for testing. **Critical evaluation** of AI output remains essential. While AI can generate functional code, developers must still understand architecture, security implications, and performance characteristics to make informed decisions about what to accept, modify, or reject. --- ## Challenges and Considerations The integration of AI into development workflows isn't without challenges. **Code ownership and accountability** become complex when significant portions of an application are AI-generated. Teams need to establish clear guidelines about code review processes, testing requirements, and documentation standards for AI-assisted development. **Dependency management** takes on new dimensions when AI tools suggest libraries, frameworks, or patterns. Developers must balance the efficiency gains from AI suggestions with long-term maintainability and team expertise. **Security and privacy** concerns are paramount, especially when using cloud-based AI tools with access to proprietary codebases. Organizations need clear policies about what code can be shared with AI services and how to maintain confidentiality while leveraging these powerful tools. --- ## The Future of AI-Augmented Development Looking ahead, we're moving toward a future where AI becomes an integral part of every stage of the development lifecycle. **Predictive development environments** will anticipate developer needs, suggesting relevant code snippets, identifying potential conflicts, and automatically optimizing performance based on usage patterns. **Natural language programming** is evolving rapidly, with tools becoming capable of understanding increasingly complex requirements and generating sophisticated applications from conversational descriptions. This doesn't diminish the need for developers—it elevates their role to that of architects and product strategists. **Collaborative AI agents** will soon work alongside development teams, participating in code reviews, suggesting architectural improvements, and even contributing to technical discussions with contextual awareness of project goals and constraints. --- ## Practical Steps for Integration For developers ready to embrace AI-augmented workflows, the path forward involves strategic adoption rather than wholesale replacement of existing processes. Start by identifying repetitive tasks in your current workflow—these are prime candidates for AI assistance. Experiment with different tools to find those that complement your development style and project requirements. Many AI tools offer free tiers or trial periods, making it possible to evaluate their effectiveness without significant investment. Establish team guidelines for AI usage, including code review standards, quality gates, and fallback procedures when AI suggestions don't meet requirements. This ensures consistency while maximizing the benefits of AI assistance. --- ## Conclusion: Embracing the Augmented Future The integration of AI into web development represents more than a technological shift—it's a fundamental reimagining of how we build digital products. Developers who embrace these tools while maintaining their core competencies in problem-solving, architecture, and user experience design will find themselves at the forefront of this transformation. The future belongs to developers who can effectively collaborate with AI, using these powerful tools to amplify their creativity and impact while focusing on the uniquely human aspects of building great software. Rather than replacing developers, AI is creating opportunities for more ambitious projects, faster iteration cycles, and ultimately, better user experiences. As this technology continues to evolve, the developers who adapt and integrate AI thoughtfully into their workflows will not only remain relevant but will lead the charge in defining what's possible in web development. The question isn't whether AI will transform your development process—it's how quickly you can harness its potential to build the next generation of web applications.

The Rise of Serverless Architecture in Modern Web Development

Serverless architecture is transforming the way developers build and deploy web applications. By offloading server management to cloud providers, developers can focus entirely on writing code and delivering features faster. Platforms like **AWS Lambda**, **Vercel Functions**, and **Netlify Functions** allow developers to execute backend logic without provisioning servers. This results in reduced infrastructure costs, automatic scaling, and simplified maintenance. --- ## Benefits of Going Serverless 1. **Cost Efficiency**: Pay only for the compute you use instead of maintaining idle servers. 2. **Scalability**: Automatically handle traffic spikes without manual intervention. 3. **Faster Development**: Developers can focus on feature-building rather than server setup. --- ## Real-World Use Cases Serverless architecture shines in use cases like API endpoints, real-time data processing, chat applications, and event-driven workflows. Companies are leveraging this approach to accelerate time-to-market while maintaining high performance and reliability. --- ## Challenges and Considerations While serverless provides many benefits, developers must consider cold starts, vendor lock-in, and monitoring complexities. It's important to evaluate the trade-offs and architect applications accordingly. --- ## Conclusion Serverless is not just a buzzword; it's a paradigm shift in web development. By embracing this architecture, developers can deliver faster, reduce costs, and build more scalable applications.

The Power of Microfrontends: Scaling Large Web Applications

As web applications grow, managing large codebases becomes increasingly challenging. **Microfrontends** provide a solution by breaking a monolithic frontend into smaller, independently deployable pieces. Each team can develop, test, and release features autonomously while maintaining a consistent user experience. Frameworks like **Module Federation in Webpack 5**, **Single-SPA**, and **Qiankun** enable developers to stitch together multiple microfrontends seamlessly. --- ## Benefits of Microfrontends 1. **Independent Development**: Teams can work on separate modules without interfering with each other. 2. **Scalable Deployments**: Updates to one microfrontend don’t require redeploying the entire app. 3. **Technology Flexibility**: Different microfrontends can use different frameworks or libraries if needed. --- ## Best Practices - **Consistent Design System**: Maintain a unified UI across all microfrontends. - **Shared Libraries**: Avoid duplicating common dependencies to reduce bundle size. - **Robust Communication**: Use events or shared state management carefully to coordinate modules. --- ## Challenges Implementing microfrontends comes with its own complexities, such as routing, testing, and inter-module communication. It’s essential to plan architecture and governance before adoption. --- ## Conclusion Microfrontends are empowering teams to scale large web applications efficiently. For developers and organizations, embracing this architecture allows for faster delivery, independent deployments, and flexible technology choices—without sacrificing user experience.