Repo for the eastlake community service tracker website
ehs-service.org
Status: Live at http://ehs-service.org
Please see CONTRIBUTING.md for how to run the website locally
Pushing directly to a branch should be blocked
All commits should be done through pull requests
All pull requests should be reviewed by at least one other person
Firebase Docs
Users get a emailed a link that allows them to sign in
No passwords are ever stored which prevents unintential misconfigurations
The user emails are automatically verified which prevents impersonation and binds the user to their lwsd email
Only users from lwsd will be able to acess the database, preventing outside usage/spam
Generates screenshots for website based on actions/screenshots/screenshot.py. Screenshots are automatically uploaded as artifacts for each pull request to verify any significant UI breaking changes and ensure compatibility across platforms.
Current platforms added to the config include:
iPhone 8 (Safari)
iPhone 8 Plus (Safari)
iPhone 11 Pro Max (Safari)
Samsung Galaxy S20 (Chrome)
You can access screenshots by going to the artifact section of a github actions run and downloading the zip file.
Authentication currently does not work with Netlify builds. If you need to test a feature that requires logging in, please run the site locally using the guide in CONTRIBUTING.md
Generates automatic preview builds for each pull request in order to demo for breaking changes. Once merged to master, netlify will automatically upate the live website to the preview build.
UI framework
https://reactjs.org/
Managment for the head element of the website (language tags, description, page title, etc).
https://github.com/nfl/react-helmet
https://github.com/Kiarash-Z/react-modern-calendar-datepicker
https://github.com/fkhadra/react-toastify
State managment library
https://redux-toolkit.js.org/
Utility CSS Library
https://tailwindcss.com/
Email link authentication and firestore database
https://firebase.google.com/
This is mostly likely due to a comment being placed above a return line, causing babel to transform it (incorrectly) and break syntax.
Tailwind config is located in tailwind.config.js. Tailwind css is generated by running yarn tailwind which converts src/styles/tailwind.in.css into src/styles/tailwind.out.css. This tailwind.out.css file is imported globally in index.js. For production builds, purgeCSS (built in to tailwind cli) will automatically tree shake unused css when building tailwind.out.css.
In order to ensure that needed css remains in the build folder, certain patterns must be followed when dynamically using css classes in react. These rules can be read at https://tailwindcss.com/docs/controlling-file-size/.
In short, do not do this:
<div :class="text-{{ error ? 'red' : 'green' }}-600"></div>Instead, do this:
<div :class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>