Sheet Metal Systems Inc.
Sheet Metal Systems Inc. is an Architectural Sheet Metal Business in Hollister CA that was looking for a new site to share their past projects and provide future clients with background on the type of service they offer. All fields of the site are able to updated with Sanity Headless CMS and the site features a map that features projects that are dynamically generated from the project being created in the CMS.
Individually Designed and Developed
- Gatsby
- Styled Components
- Sanity
- Netlify
- Mapbox API
Project Purpose and Goals
Sheet Metal Systems is a Architectural Sheet Metal Contractor that builds in the Bay Area. The business was in need of a new web site that represents the high level of work they do. The business wanted the ability to create pages via CMS and to update the content on all pages. My goal was to deliver a site that was lightning fast, showcased all the details of the business and their work, and had a smooth user experience.
Tech Stack: What and Why?
This was my second project built with Gatsby, and I traded out some parts of the stack to expand my knowledge. I used styled components and found it very comparable to Emotion CSS which I had used in the past.
For the Backend I wanted to try a new type of headless CMS. Sanity is CMS option that uses structured content versus a more typical page based approach that most CMSs use. This allows for more flexibility and reusability of the data. I again used Netlify for deployment as it offers easy integration with this stack and allows for web hook triggered deploys that I use for pushing code to git and publishing new content on the CMS.
The site was also built with the following libraries, features and APIs: Loadable Components, Sass, Recaptcha, Progressive Web App, and Mapbox API.
Challenges and Resolutions
My big challenge with this project was using the Mapbox API, an open source mapping tool with great docs and features, to create project points on the map from the project address entered in the CMS. I pulled the projects from CMS using GraphQL, converted the address to a decode using the OpenCage Geocode library, then created a new projects node on the Gatsby Project State. I then used the new projects node to pass all of the project data to the Mapbox API and then map-box can generate a marker with a small popup box that includes the project title description and link that can be opened when the marker is clicked.
Key Takeaways
I really enjoyed this project from start to finish. I worked really hard on designing this project with Adobe XD, and found the front-end development went much more smoothly due to all of the work done up front on the design. I also really focused on making components as reusable and as cleanly written as possible. Lastly I am very satisfied with the lighthouse performance of this site and this project has definitely set the standard for my lighthouse ratings going forward.
Let's Work Together
Whether you have a question, would like to work together, or just want to connect, feel free to reach out.
alex@aandres.dev