Quatro Web Client App

https://app.usequatro.com

📄 General technical documentation: https://github.com/usequatro/quatro-docs

Project status

In 2022, Quatro's team decided to stop the project. Check out this blog post to learn more: What a B2B PM Learned About Building Consumer Products.

If you have a technical question or want to contribute, feel free to open an issue.

Technologies

This project was bootstrapped with Create React App. All code can be found in /src.

Libraries used:

• React.
• Redux for global state management (imeplement with Redux Toolkit)
• Material-UI for UI components and styling.
• Firebase
  • Firestore for listening and persisting updates in realtime. Watch this tutorial.
  • Hosting for serving the web client and its build assets.
  • Functions for serverless backend functionality. See the functions repository.
  • Storage for profile pictures.
• React Router for navigation.
• Date-fns for date and time manipulation.

Integrations of the frontend:

• Google Calendar API

Local development

While the dev Firebase project is still up and running, anybody should be able to clone this repository and play with it in their localhost. You can also create your own Firebase project with the services mentioned above, and configuring your .env.local variables.

1. Clone the repo.
2. Clone the file .env.development into .env.local and adapt it as needed, e.g., remove the Mixpanel ID to disable tracking.
3. Run npm install
4. Run npm run start. (For HTTPS, needed in some edge cases, run HTTPS=true npm run start)

For linting and formatting, make sure you have ESLint and Prettier enabled on your code editor.

To work with your Firebase instance, use its CLI to toggle between them with firebase use [env]. Check active environment with firebase use.

Connecting Google Calendar in local development

On Google Cloud Platform, the Quatro dev project isn't verified, according to Google's policy, because it's for testing purposes. That means that to connect Quatro to Google Calendar, we need to add your email address to the list of Test Users within the Google Cloud Platform project. Feel free to open an issue asking for it, or hit me directly via social networks. If there's a way around this that we don't know, please let us know!

Deployment (Only core contributors)

Continuous deployment is wired with GitHub Actions:

• Merging into main or release/* branches will trigger a deploy to https://dev.usequatro.com with .env.development variables.
• Tagging with vX.X.X will trigger a deploy to https://app.usequatro.com with .env variables. Use GitHub Releases to produce the tag and release documentation.

For more details, see the workflows folder.

The FIREBASE_TOKEN is a refresh token generated with the Firebase CLI, via firebase login:ci, and stored as a GitHub secret to Actions can use it. Renewing it will be necessary sometimes.

There's a slack integration configured (see notifyDeploy.sh) to notify the Quatro #deploys channel in Slack.

Releases

We use GitHub Releases to document release notes, as well as triggering a new version deployment.

1. Go to the GitHub Releases page.
2. Click "Draft a new release".
3. Set a tag version 1 number above the last tag. Use patch increases for bug fixes and improvements, and minor increases for new features. Major increases are only for visually major changes that mean "a new Quatro".
4. Summarize the changes in the Release title
5. Add bullet points for all changes in the release and links to their pull requests in the description. Example.

Manual deployment

First, make sure you have an .env file. This file contains production environment variables. Ask another contributor for a copy.

npm run build-and-deploy