FIRST STRING DIGITAL
First String Digital is a web app built with a Jamstack architecture. I built this application from scratch alongside my business partner & designer using React, Gatsby, GraphQL, Netlify, Weglot, and Stripe. This project has required a lot of heavy lifting and provided an immense learning experience both in launching an eCommerce solution as well as providing monthly & annual subscription options.
Tech Stack
React
Gatsby
GraphQL
Contentful
Stripe
Netlify
Weglot Localization Translation API
Project Purpose & Goal
First String Digital started out as a custom web development agency targeting the restaurant industry. Over the course of 3 phases, it has evolved to a SaaS product that provides pre-made web templates that can be custom branded for restaurants. The first phase of this project allowed users to select a monthly or annual option then contact us for a consultation by filling out a form. Many of our interactions are with both Mexican and American clients, so we integrated a localization API for our Spanish-speaking audience. With the option to choose EN (English) or ES (Spanish) on the site, our client base can learn about our services in the language most native for them. In the second phase, we added online payments so users could simply sign up and pay for services without having to contact us first. In the third phase of the project, we have moved the product to a SaaS model where we are adding subscription services, and a customer portal to manage subscription upgrades/ downgrades or cancelations.
Web Stack Explination
The Jamstack architecture style was chosen due to its light-weight nature and flexible use of APIs. I also love the flexibility of use with headless CMSs and the ability to separate the content from the presentation. This all lent itself to a workable microservice architecture. Gatsby is a static site generator (SSG) but to call it that almost sounds a bit misleading. We chose Gatsby because it is so much more than an SSG (allowing for dynamic runtime updates via APIs) and includes a plethora of easy-to-integrate plugins including GraphQL and Contentful. We chose Stripe as our payment processor because we felt it would better allow for the customizations we wanted and would scale better than other options available. Weglot was chosen as our translation service because they provided great live localization services and automated translations.
Lessons Learned
This project has been incredible as far as stretching my knowledge and growing my skillset. Not only did I increase my knowledge in basic React programming but dove deep into several challenges. I learned how to use React hooks, programmatically create Contentful content models, use GraphQL queries using the StaticQueryAPI from Gatsby, programmatically render rich text from Contentful content types, use React state management, and how to implement a custom checkout workflow with Stripe. All of this included learning about API integration and lots of refactoring as I continue to learn about better code structure and organization. The list goes on and I could talk about it for hours but feel free to check out the code.