AI in modern app development; catalyst and companion

Brief of the article

Launching a multi-country e-commerce app highlighted AI’s role as a transformative development ally. Faced with tight deadlines and evolving requirements, our team utilized AI to tackle complex UI issues, optimize workflows, and enhance productivity. Instead of replacing developers, AI acted as a creative partner, providing insightful solutions and boosting our confidence, showing that technology and human ingenuity can work in harmony.

We're on the verge of launching a full-fledged e-commerce app across 7–10 countries, and let me tell you, this journey has been nothing short of a thrilling rollercoaster—packed with unexpected twists, sharp turns, and countless learning moments that have shaped our approach and expanded our expertise along the way!

Since the launch of OpenAI's ChatGPT, industry discussions have been flooded with concerns: "AI replacing human jobs," "workforces shrinking due to AI," and even “AI's impact on IIT, leaving students unplaced." On the surface, these claims are compelling, raising anxieties across sectors like engineering, content creation, customer service, manufacturing, assembly, data processing, and more.

Yet, we’ve come to see things from a different perspective. But before we get into that, let’s take a quick look back for some context and history. Not into a history lesson? Feel free to skip ahead!

Origin of panic

The launch of ChatGPT by OpenAI in November 2022 set off a rapid surge in popularity, quickly gaining traction across industries. While Generative Pre-trained Transformers (GPT) had existed for almost a decade, OpenAI’s innovative model design, combined with strategic marketing and accessible deployment, made ChatGPT widely adopted in a way its predecessors weren’t. GPT models, trained on extensive datasets filled with text from books, websites, and articles, learn language patterns and generate responses by predicting word sequences rather than retrieving exact answers from their training data. Developing these models takes substantial computing power, with distributed systems running for weeks or even months to fine-tune their abilities. Although GPT’s progress had been steady, it was OpenAI’s public release of ChatGPT that truly ignited its broad adoption, sparking a flurry of interest as industries raced to integrate it into their operations.

The tech community was among the first to embrace ChatGPT as a powerful personal assistant, recognizing its potential to boost productivity and explore creative applications. Early adopters within this group used inventive prompt injection techniques to sidestep certain model restrictions, revealing both their tech-savvy skills and the ongoing challenge of securing AI. This phenomenon underscored that, even with concerns about AI replacing jobs, human ingenuity and creativity continued to shape and redefine interactions with this new technology.

Our Journey with AI: Beyond the Headlines

Our development team started with a small yet experienced group: two developers, a UI/UX designer, a product owner, and a product manager. Each member brought solid skills across various technologies, including Node.js, React, PostgreSQL, Next.js, and the libraries needed to support them. Confident in our initial approach, we launched into development with this stack and managed to produce a minimum viable product (MVP) within just 1.5 months—a testament to our team’s agility and familiarity with the tech. However, shortly after, a market study shifted everything. Research indicated that a mobile-first, app-centered product would be more successful, and this new direction required a fundamental overhaul. The timeline given for this drastic pivot? Only 2.5 months. We had to dismantle the MVP and rebuild nearly from scratch, incorporating an entirely different front-end approach.

After a couple of quick team meetings, we jumped into this fresh development phase without hesitation. Our original frontend, optimized for the web, had to be discarded. Starting with a new UI in React Native, we began building a mobile-oriented experience. But we couldn’t completely sideline the web experience, so we decided to implement React Native Web to serve both platforms. Setting up this complex environment presented new hurdles at every turn, with each configuration step inevitably disrupting something else.

It was uncharted territory for us. None of us had prior experience with these tools and frameworks, so we brought in a secret weapon: ChatGPT. The AI became an indispensable "pair programmer" that helped us troubleshoot and navigate each step, bringing insights and solutions on demand. With ChatGPT’s support, we were able to break down each challenge, implement fixes, and move forward, even without prior experience in this tech stack.

Our journey with ChatGPT went far beyond what we’d imagined—it wasn’t just a tool but a constant, reliable resource in overcoming unfamiliar terrain. Through this journey, we learned that AI could be much more than just a tool; it could be an active participant, pushing us to break boundaries and rethink how we approach new challenges in technology.

Starting point

If you’ve worked with React Native, you know how complex it can get to integrate both mobile apps and React Native Web. Adding Tailwind CSS into the mix can make it even trickier, creating a real challenge for developers. Still, we opted for Tailwind due to its speed in styling, even if it made web layout more challenging. To streamline things, we chose Expo, combined with Tailwind and a router. Expo ended up being a game-changer, helping us build more efficiently and saving us valuable time in multiple areas.

More problems!!

Looks great, doesn’t it? The design aimed to keep things straightforward for new users, ensuring an easy learning curve. Everything seemed to be on track—until it wasn’t.

Our CSS nightmare began when we decided a 30-70 width layout would keep things simple. Fast forward, and the inventory manager flagged 27 display issues on his laptop's web view. Fixing one device would break another. The mobile view became a battlefield where text, images, and badges crowded in, ignoring layout boundaries.

We tackled each issue as it appeared, only to see new ones pop up with every aspect ratio. Foldable devices? Don’t even ask. While Tailwind CSS enabled fast styling, it became a tangled mess of endlessly long class names, turning minor adjustments into major headaches. We ended up meticulously managing these class names in VSCode, formatting each line to keep it remotely readable.

AI to the rescue

The front-end team had reached its breaking point. We had two options: either push through and complete the app as it was or completely redesign it from scratch within a week. Half-jokingly, we thought of asking ChatGPT for help, expecting a few straightforward tips. Instead, the responses were too convoluted to even attempt.

Then, more screen designs began rolling in. We decided to upload these screenshots into ChatGPT, V0.dev, Claude.ai, and a few others. Surprisingly, the outputs worked! Not every time, but often enough to make a difference. Just as we were on the verge of giving up, the AI seemed to catch on to our problems—it felt like a collaborative process, as if the AI was learning alongside us. We laid out each UI issue, and it managed to solve about 70-80% of them. While a few elements remained stubbornly off, AI support significantly relieved the developers' stress. Those remaining issues? Well, some were "tweaked" into features.

We also noticed that when we provided screenshots, the AI often identified UI problems with impressive accuracy in logic and state management. Previously, developers might finish one screen per day with 20-25 components; that number dropped to 3-4 given the increased complexity. Despite this, the average number of functionalities in development was still rising. A few AI-generated solutions initially resulted in infinite rendering, but with minor adjustments, they worked beautifully.

So what did we do?

As we move towards an ‘agentic future’—where AI systems are increasingly autonomous—the quality, quantity, and accessibility of datasets will shape AI's success. AI entities may soon take on roles akin to Chief Data Officers within enterprises, driving the importance of revisiting how data is stored, processed, and leveraged for decision-making.

The solution:

Embrace Tailwind’s Responsive Utilities: Instead of relying on fixed layouts, we started utilizing Tailwind’s mobile-first approach with built-in breakpoints. This allowed us to set specific styles for each screen size (sm, md, lg, xl), keeping things consistent across devices.

<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5">

This ensures that the layout adjusts cleanly from mobile to desktop, without sudden breakage.

Use CSS Grid for Complex Layouts: We also switched to CSS Grid for parts of the app where Tailwind’s flex utilities weren’t enough. CSS Grid provides much more control over complex layouts, making it easier to adapt across devices.

.grid-container {
  display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 10px;
}

With Grid, we could easily create fluid layouts that work on mobile, tablet, desktop, and even foldable devices.

Componentize to Keep Tailwind Classes Manageable: Instead of cluttering our HTML files with countless Tailwind classes, we broke down the UI into reusable components. Each component had its own set of styles, reducing the complexity of our markup.

const Button = () => (
   <button className="bg-blue-500 text-white p-2 rounded hover:bg-blue-700">
   Click me</button>
);

Custom CSS for Unique Cases: For the few cases where Tailwind’s utilities didn’t quite cut it, we used a small custom CSS file to handle things like fine-tuning paddings or margins for foldable devices or weird gadgets. This prevented our Tailwind classes from ballooning out of control.

Lesson learned

Avoid relying too heavily on Tailwind CSS. It’s a powerful tool, but not a cure-all. When layouts get tricky, combining Tailwind with CSS Grid or custom styles can prevent alignment nightmares. And if your class names start resembling a novel, it’s time to pause, simplify, and modularize.

Ultimately, AI helped us fix around 70-80% of our UI issues, but it was refining our CSS approach that truly saved the day! Thanks to AI for highlighting that.

With the application close to completion, we decided to audit the code. Uploading each individual page wasn’t feasible, so we zipped the entire codebase (minus sensitive details like environment variables and APIs) and asked the AI to unzip and review it. The feedback was incredible—suggestions and fresh ideas surfaced that we wouldn’t have discovered even with years of experience. It felt like a turning point, and now our team feels empowered to take on even more complex projects. The confidence AI brought was unmistakable, and the team’s smiles said it all.

Conclusion

There was a time when technology was advancing so rapidly that people had to build systems from the ground up, learning everything with minimal guidance and diving into the electronics and bits at their core. Just look at Linux and Git—what started as side projects for Linus Torvalds now run on nearly everything, everywhere.

Today, tech continues to evolve at breakneck speed, but only a select few drive that progress, while most of us use it to create everything from the brilliant to the absurd. We've become a generation with shorter attention spans, influenced by the rapid pace of short videos and social media. But we believe AI might just help us reclaim focus, giving us more time than ever to build amazing things.

Thinking, "Conclusion already?" Yes, it feels like this story is turning into a TL;DR itself.

AI is here to stay, and it’s not here to replace us—not everyone, at least. For those who understand code and keep pushing boundaries, AI offers unprecedented growth opportunities. New roles and fields will emerge that we haven’t even imagined yet.

It will be a challenging journey, one where AI will serve as both ally and competitor. But if there’s anything humans thrive on, it’s a good challenge, and we’re ready to meet it.

As AI helps raise product standards to new heights, it sets an ambitious benchmark for quality. Developers who embrace learning, adapt to new tools, and push the limits of their skills will thrive with AI as a powerful partner in their pursuit of excellence. The future of development isn’t just about adapting to change; it’s about harnessing AI as an invaluable ally in our quest for greatness.

Author
Vishnu Prasad
Full Stack Engineer
7 min
October 27, 2024