A fun little side project for creating polls on the fly. The goal was to make a PWA utilizing the JAMStack architectural pattern. You can find the blogposts I wrote on creating the basics of this application as well as more info on JAMStack here: part 1, part 2, and part 3.
A lighthouse report for www.fastpoll.co can be found here. Keep in mind your results may vary. Try running the test multiple times if you get differing results.
- [x]: The application works offline. *With the exception of non-cached dynamic data.
- [x]: Prompts users to save the application to their home screen for devices that support that functionality.
- [x]: Statically generate the shell of the application and dynamically pull in the data.
- [x]: Implement a backend and authentication on a static website.
- [x]: Cache static assets via the service worker spec so that time-to-first-paint upon revists is almost instantaneous even on slow and flaky connections.
- [x]: Make use of the PRPL Pattern (thanks to Gatsby.js) in conjuction with the App Shell Model.
- [x]: Create a blazing fast progressive web application using React.js and several other modern front-end libraries that also performs incredibly well when it comes to SEO.
- Gatsby.js - A react.js framework used for statically generating websites.
- Firebase - A back-end as a service framework. I use firestore and their auth services in this application.
- Netlify - A global CDN and a continuous deployment solution for static websites.
- Styled Components - A react-specific css-in-js solution.
- Redux - Flux inspired client-side state management.
- Jest - Testing platform.
- Prettier - Code formatting.
- ESLint - Javascript linting. I'm using a customized version of Airbnb's ESLint rules.
Clone the repository and run npm install.
- For development, run
npm run dev. - For a production build, run
npm run build.
You can find the other scripts in the package.json.
If you want to depoy the application, you'll have to get your own firebase web API keys and update the config object in ./src/services/firebase.js. You can find out how here.
If you know why or how to fix any of these issues, please let me know how I can go about that or create a pull request. Thanks.
- I'm unable to use async-await in src/ directory. During the
Building static HTML for pagesprocess when I build the application for production an error is thrown. See issue #1. - All pages depend on firebase.js since my provider is wrapping the application in gatsby-browser.js. Directly importing it in the ./src directory throws a webpack error. See issue #2.