This is a small React project to make it easy to visualize possible upcoming staffing scenarios and plan for multiple possible futures at once.
It does not have a database (maybe a future enhancement?) and uses Airtable for quick and dirty data storage. This means you'll need to make sure that your Airtable set up has the same tables and coluumns that the code expects.
- Project setup
- Deployment
- Notable dependencies
- Helpful examples or links that pointed me in the right direction
- TODOs (prioritized)
This is a monorepo with a React app in the root and a Node Express server in the server directory.
We are using a single package.json to manage package dependencies for both applications. React dependences are in devDependencies since the React app is built and served by the Express app. Regular dependencies are for buildtime and the Node server.
nvm use
yarn install
Please check the corresponding .env.sample to make sure you have all values defined. Examples can be found in 1Password Tandem General vault. If you need to add env vars for the React app, be sure to prefix with REACT_APP_.
The secret keys kept in your .env variables can be any string you want. The longer you make them, the more secure they are.
- Your Account ID: https://forecastapp.com/YOUR-ACCOUNT-ID-IS-HERE/schedule/projects
- An Access Token: create one here
To test your Forecast variables, you can run the following cUrl request
curl -i \
-H 'Forecast-Account-Id: ACCOUNT-ID'\
-H 'Authorization: Bearer ACCESS-TOKEN'\
-H 'User-Agent: https://www.npmjs.com/package/forecast-promise' \
"https://api.forecastapp.com/whoami"
- Create an API key
- When viewing API documentation for your Base, the id is in the URL: https://airtable.com/YOUR-BASE-ID-IS-HERE/api/docs#curl/introduction
This project uses concurrently to start the server and client at the same time. If either process fails, both will be terminated.
yarn start
To start the server and the client separately (for finer control and troubleshooting), you can run the following commands in separate terminal windows.
To start the client,
yarn start-client
To start the server,
yarn start-server
Currently being deployed to the tandem-staffing Heroku application manually.
git push heroku main
- DayJS: Since Moment is no longer recommended, using an alternative date library in both the client and server
- React Calendar Timeline - For all the timeline functionality
- React Date Picker - For choosing project start and end dates
- React Select - For easily stylable dropdowns
- TailwindCSS - For utility first CSS
- postcss-cli and @fullhuman/postcss-purgecss - For creating small production CSS files (only packages Tailwind styles actually used)
- reakit - For accessible, composable components
- tabler-icons - For consistent iconography
- faker.js - For mocking data for testing
- react-google-login - For OAuth from the client
- forecast-promise - Forecast doesn't have a supported API so we're using a small (unsupported) Node package which wraps Forecast and provides a slim API for us to use
- axios - For making http requests from the Node server
- jsonwebtoken - For managing JWT in auth flow
- google-auth-library - For Google OAuth on the server