yorickreum / fast-poll

Fast Poll PWA

Fast Poll PWA

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.

A few key points I wanted to hit on this project:

• [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.

Notable tools used:

• 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.

Running the application

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.

Deploying the application

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.

Known issues and bugs

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 pages process 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.

A big thank you to Ted Kulakevich for help with the design.