Virra Marketing

Planted: 2021

This project was my first production web app—a new marketing website for Virra Marketing and a web application to test new software services.

Stack: Language: JavaScript; Runtime: Node.js; Web framework: Next.js (React.js); CSS framework: Tailwind; Database: Firestore; Auth: Firebase Authentication; Storage: Cloud Storage for Firebase; Payments: Stripe; CMS: Sanity; Hosting: Vercel

Marketing Website

The marketing website was a redesign of the existing website. The existing website was built with Wix. The new website was built with Next.js and hosted on Vercel.

The team has since moved to a new website built with GoHighLevel for ease-of-use.

SaaS: Virra Match and Virra Superfans

Virra was looking to make new software services available on the web.

Virra Match takes a Spotify song and returns Spotify playlists that match the song with contact information to help artists and managers find new playlists to pitch.

Virra Superfans takes an Instagram handle and returns the handles of the accounts that engage with it the most. The first use case is to help artists and managers find their most engaged fans. The second use case is to help artists and managers find the most engaged fans of similar artists.

The service works on a credit based system.

Stack decisions

Virra had already integrated with Firestore as a database. Next.js seemed a good option as a frontend framework, with its file-based routing, API routes, wonderful documentation, and large backing. Although admittedly, at the time I had not the comparative knowledge to articulate what the tradeoffs of Next.js are. Vercel, the company behind Next.js, was then the clear choice as a hosting provider.

Next.js leans towards client-side over server-side. The documentation goes so far to explicitly recommend fetching data client side. Vercel maintains a “React Hooks for Data Fetching” library called SWR for client side fetching.

Next.js provides an integrated file-based routing for creating API routes. Behind the scenes, Vercel utilizes AWS Lambda functions to handle the API routes.

Lessons

As the first production web app, I learned a great deal about web applications with this project. I dove into React and Node, with Next.js and Firestore as a helpful buffer in “serverless” architecture.

React had already moved to hooks and functional components. I never learned React with class-based components so I can’t compare the two. I can say that I looked at React with class-based components years earlier and felt no desire to learn it. I enjoy JSX and functional components, but the state management leaves a lot to be desired. I learned about the Context API and Redux, and chose not to implement Redux. With the Next.js App Router and frameworks like Remix today the landscape of React state management is changing.

It was fascinating to learn about some of the architecture behind Next.js on Vercel. While the runtime is Node, the production environment is AWS Lambda Functions, while the static pages are placed into S3.

I felt the pains of Firestore. I learned using a “schemaless” database with multiple developers across multiple projects is asking for pain. While it can be managed, given the choice, I would choose a database with a strict schema. I had to learn how to design a de-normalized schema. Designing a de-normalized schema is a skill in itself, and keeping it consistent across multiple collections is a challenge.