Asher Luzatto for Mayor
Asher Luzatto for Mayor is a campaign website for Los Angeles Mayoral Candidate Asher Luzatto. The site was initially designed and developed by another developer and I was brought on to convert the site from a simple static HTML site into a site that will eventually need server side rendering for the user engagement planned for future versions.
Individually Designed and Developed
- Gatsby
- Contentful
- Netlify
- Instagram Graph API
- Mailchimp API
Project Purpose and Goals
The purpose of the site is to provide its visitors with information on the campaign, enable them to sign up for the newsletter, to contribute ideas, and to volunteer to join the campaign. In total the site is 34 pages and has 5 separate forms. The goal was convert the project over to react and to utilize the component based approach of react to simplify the conversion.
Tech Stack: What and Why?
I decided to go with Next.js for this build as it provided a great framework for a project like this, that would eventually need to have server side rendering. I also chose to use styled components again as it is now my preferred means of writing my css.
For the Backend and Deployment, per the other developer’s request we used Firebase. It provided an easy plug and play approach to a backend, but had its challenges as well. I used firebase as a place to store page content, user input from forms, and store files submitted by users. I built API endpoints using Next.js and Node. I also used Firebase Cloud Functions to deploy the NextJS server that is required for Next projects.
The site was also built with the following libraries, features and APIs: sendinblue API, google analytics, next-optimized-images, and dynamic component loading.
Challenges and Resolutions
Two chanllenges I had with this project was deploying the NextJS server to Firebase and getting the next-optimized-images library to work in deployment. Their is limited information on how to deploy a NextJS Server on a third party server because Vercel the creators of next encourage you to use their own server. After a lot of reconfiguring and 30 different variations of deploys I got the Next server to finally work, with the end resolution being that the server function folder required all of the npm packages that the actual project included.
After getting the project deployed none of the image optimization that worked in the development environment was working. This is due to the fact that the next Img component only works with deploying the server to Vercel. I came across next-optimize-image as an alternative, and now all of the images are optimized for different screen sizes during build time.
Key Takeaways
This was a great project that really pushed me to the edge of my frustration as a programmer. It taught me the important lesson of adding more time to my initial time estimates, and to build a couple things with a framework before taking it into a professional setting. This project also gave me a chance to get a really good grasp of NextJS as a framework, and I will be using it again on future projects.
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