A Gatsby site built to support local Springfield, MO area restaurants and businesses.
Prerequisites
Only thing you should need is the Gatsby CLI installed locally on your machine. This will make local development with Gatsby much simpler.
Get started by running the following commands:
$ git clone [email protected]:tpage99/local417eats.git
$ npm install
$ gatsby develop
Visit http://localhost:8000/ to view the site
Gatsby is awesome and you should experience hot reloads on save. Only instance that would be necessary to stop and restart local server are changes to config or GraphQL queries/schemas.
This project uses several environment variables for development. You will need to create a .env file in order to put your keys in place. Reference the gatsby-config file to determine what environment variables are required. Once hosted, these are added to the backend through Netlify's build processes.
Current environment variables required to function properly:
- Google Maps API
- Algolia Search
This project seemed like a good use-case for Tailwind CSS. Here are some helpful resources for integrating and using Tailwind CSS in a Gatsby site:
- Tailwind CSS docs
- NY Studio 107 blog post was overly complicated. What ended up working much better was this YouTube video which primarily referenced Tailwind CSS docs...not sure why I didn't start there
This project uses the Google Maps API on the individual restaurant "eats" views to display where the restaurant is located. Imported via an iframe through their embedded API which includes a button to open in Google Maps. Other positive, is free! Check out the docs for more info.
API keys and other items managed from Google Cloud Platform Dashboard.
Decided to use Algolia for search (?Maybe?). Mainly because they have a free tier and will help speed up development. Not to mention it's a well-liked service with plenty of features.
- Remove emotion in favor of styled-components
- Originally installed emotion for Tailwind CSS but not worth the extra bulk
- Styled-components is bulkier, but does come with icons. Tradeoff seems to be worth it for quicker development
- Consider using Google Custom Search
- https://developers.google.com/custom-search
- Why don't more people use this? Supposed to be all client side. Maybe write a Gatsby plugin?