Building leadistro

Welcome to the journey of building leadistro, a social media marketing campaign app with unified lead management solution. In this blog post, we will dive into the development process, highlighting the interesting challenges and major milestones encountered along the way. From initializing the project with turborepo and integrating Tailwind CSS to leveraging radix UI for component design and creating a mobile app with Expo React Native, join us as we share our insights and experiences in bringing leadistro to life.

! leadistro is still under development !

Initialized a git repository using turborepo

Turborepo and turbopack were launched fairly recently by vercel. Turbo is an incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust. This caught my eye because webpack as a bundler tends to be slower, whereas the rust powered turbopack would reduce a lot of issues with webapps.

Understanding T3 Stack

The core pieces are Next.js and TypeScript. Tailwind CSS is almost always included. If you’re doing anything resembling backend, tRPC, Prisma, and NextAuth.js are great additions too. tRPC delivers on GraphQL’s promise of seamless client development against a typesafe server without all of the boilerplate. It’s a clever abuse of TypeScript that provides an incredible dev experience.

The “T3 Stack” is a web development stack made by Theo from ping.gg focused on simplicity, modularity, and full-stack typesafety.

For seamless communication between the frontend and backend, we created API endpoints using TypeScript Remote Procedure Call (TRPC). This type-safe approach ensured robust and efficient data exchange while maintaining code readability and maintainability.

Leveraging radix UI for Component Design

UsingTo ensure a visually appealing and user-friendly interface, we turned to radix UI for its comprehensive set of pre-built components. Utilizing these components, we were able to design and implement a cohesive and consistent user experience across the leadistro platform.

Expo Dev Client Or React Native

This was the most difficult thing for me as i had already created an aplha version of my Application with pure react native cli using native android and ios modules. To use it for production i realised that i had to use expo for its plugins in the ecosystem and the easiness it provides. So switching took some time, Learnt Expo Router another file base router to navigate in an expo app, had some experience with nativewind which is tailwindcss for react native.

Implementing Firebase OAuth but something inside me tells not to

To enhance the authentication process, we integrated Firebase OAuth into both the Next.js web app and the Expo React Native app. This allowed users to securely log in and access their leadistro accounts using their existing credentials.

Provisioning a Single Postgres Database:

Also a major issue with my choice which was firebase for google OAuth, was that i could not use prisma or find a way to make use of firebase's nosql database. So i used Supabase for my postgres database. It had a new postgres extention which be extremly useful was PGVECTOR type

Training distroGPT for leadistro

To further enhance leadistro's capabilities, we embarked on training distroGPT specifically for leadistro. This AI-powered model would aid in automating lead management tasks, providing intelligent insights and recommendations to users.

Continuously Designing Components

Throughout the development process, I have dedicated my time to design and refine the leadistro as a whole. This iterative approach ensured a polished and intuitive user interface, maximizing user engagement and productivity.

Wrapping Up

With ongoing training of distroGPT and continuous component design, leadistro is poised to revolutionize lead management with its powerful features and user-friendly interface. Stay tuned as we further refine and expand leadistro to meet the evolving needs of businesses everywhere.