A NextJS PWA project that fetches information from a Google Sheet and then dynamically updates the latest lockdown restrictions in Bangladesh for easy view of the general public.
https://istomorrowlockdown.com/
Client: NextJS, Chakra UI
Analytics: Google Analytics
Deployment: Vercel
- Dark theme and Language Switcher
- Progressive Web App (PWA) enabled
- Dynamically generates the table fetching from Google Sheets API at server side
- Easy CMS solution of Google Sheets
- Mobile Responsive
- Create a Google API Service Account to set up access to the backend data fetching. A helpful guide has been provided in the acknowledgement section.
- Set up the sheet similar to the provided
Is Tomorrow Lockdown - BackendExcel file inlibsso that the project can run smoothly. - Provide the relevant environment variables in either your production solution's environment or in a .env file.
- For Google Analytics support, receive your Google Analytics Tag and replace
YOUR-G-TAG-HEREatpages/_app.jsandpages/index.js. - Modify and experiment with the code to get your desired output.
To run this project, you will need to add the following environment variables to your .env file
GOOGLE_SHEETS_CLIENT_EMAIL - Your Service Account email address generated by Google APIs
GOOGLE_SHEETS_PRIVATE_KEY - Private Key for your Google Sheets Account
SPREADSHEET_ID - Unique ID of your spreadsheet found in the URL of your Google Sheet
To deploy this project run
npm run build
npm run start- Connecting NextJS to Google Sheets provided support in enabling Google Sheets access.
- The project was able to switch between languages with support from the article - Language Support in Next JS.
Contributions are always welcome!
Kindly generate a pull request with your contribution.
If you have any feedback, please reach out to me at [email protected]