Hi All,
Ali here (https://prismic.io/hire-a-developer/ali-parandeh) :)
Recently finished a two-weeks website overhaul project for a client who wanted a custom form that accepts all sorts of CAD Drawing files.
Site is: https://www.fabricagegroup.com/
For the site iteself, the project required nested navigation and typewriter effect in the hero section:
Website Design
Here is what the full website looks like:
Typewriter effect:
Nested Tree Navigation:
Custom Contact Form
Prismic Integration with Google Cloud and Use of Slice Machine
Content Modelling
The content modelling experience was quite fun! The nested tree structure really took me for a ride to model its content but also the slice machine simulator was the highlight of the experience. Just look at that!
For each website section, we created a dynamic slice:
And to model the nested navigation tree, I decided to go for a dynamic slice alongside a navigation custom type similar to a page document.
Overall, we ended up with a content model that was like below. Global content like footer, navigation and homepage were built with custom type single document types whereas homepage and other landing pages had their own core repeatable types.
Prismic Previews
Then setup site preview in prismic for both local and production enviornments when updating content. This was going to be a static website so had to rebuild the site with a webhook on content updates but didn't want to wait several minutes to see changes. This is where prismic content preview both locally and on production would come in handy.
Deployment
Setting up Webhook Triggers
To get the site to publish changes from Prismic, had to hook a webhook to Google Cloud Build. This required setting up a cloud-build.yaml file in root of my project and configure Prismic to send events to the endpoint:
CICD Pipelines
Here I had to setup some manual and automatic triggers to rebuild the static site everytime there were code pushes or Prismic content updates.
On Google Cloud, I had to dockerise my NextJS and prismic application so that it can be redepolyed each time with the webhook or code push triggers:
Once the image was built, it pushed into a Google Cloud Artifact Registry (Docker Registry) and redeployed the service to Google Cloud Run:
Deploy Previews
To setup deploy previews on Google Cloud Run, I had to create yet another trigger on Google Cloud Build to deploy the new image built from a Pull Request branch on Google Cloud Run with a tag and --no-traffic flag so that the client can view the site.
Deployment Configurations
This is where environment variables came handly. It allowed the client to configure the form, their SEO indexability and update their API keys.
Custom Form - Integration with Airtable, Email automations and Google Cloud Storage
The last piece of the puzzle was the custom form below.
This had to be hooked to Google Cloud storage for uploaded files, create record entries in Airtable with attachment previews and submit email notifications with attachments to the client for direct response to the site visitors.
Airtable API would receive link to files stored in Google cloud storage and fetch a copy to preview within the table.
Then on record creation it would send an email to the client:
This whole setup was slightly complicated as the form had to upload the file to Google Bucket on submit, grab a signed link of the uploaded file and then send a record entry to Airtable.
Conclusion
Overall, this was a simple project but what made it interesting is variety of integrations and tools that had to be used to make the system work. For deployment, I could go with Netlify but decided to build my own deployment pipeline in Google Cloud for better control and cheaper hosting costs. You have more visibility of traffic and end up paying for hosting per request instead of the usual monthly charges that Vercel or Netlify provide.
Under the hood, they provide similar mechanisms but with CDN and edge functions. I would say if you're deploying on Google Cloud or other cloud providers, you can also attach a CDN or load balancer on the front to make sure you serve the site closer to your users (for instance for a e-commerce store type project.)
This was quite a fun project and challenge to build with Google Cloud and Prismic but if anyone have questions how to build their own integrations with this tech stack or need more details please feel free to leave a comment :). And, I hope you enjoyed this showcase / case study.
