Bloom is a remote trauma support service from Chayn, a global, award-winning charity designing open-source tools to support the healing of survivors across the world. Since 2013, Chayn has reached over 500,000 survivors worldwide with our trauma-informed, survivor-centred, and intersectional approaches in utilizing tech for social impact. Bloom is our flagship product; a free, web-based, secure support service designed to aid in the healing of survivors. Through a combination of online video-based courses, anonymous interaction, and 1:1 chat, Bloom provides tailored information, self-help guidance, everyday tools, and comfort to cope with traumatic events.
Explore Chayn's website, research, resources, projects, impact, and support services directory. đ
Chayn is proudly open-source and built with volunteer contributions. We are grateful for the generosity of the open-source community and aim to provide a fulfilling experience for open-source developers.
Please give this repository a star â and follow our GitHub profile đ to help us grow our open-source community and find more contributors like you!
Support our mission further by sponsoring us on GitHub, exploring our volunteer programs, and following Chayn on social media: - Linktree: https://linktr.ee/chayn - Twitter: @chaynhq - Instagram: @chaynhq - Youtube: @chaynhq - Facebook: @chayn - LinkedIn: @chayn.
By making an open-source contribution to Chayn, you have agreed to our Code of Conduct.
Happy coding! â
Visit the /docs directory for an overview of Bloom's frontend key concepts.
To run Bloom's frontend: install prerequisites, run Bloom's backend locally, configure environment variables, install dependencies, then run the app locally with yarn.
Before running Cypress integration tests, first populate your backend local database with test data (directions in Bloom's backend repo).
See Bloom's backend repo for instructions. You will need to run this in the background for the frontend to be functional.
Create a new .env.local
file and fill it with the required environment variables:
# Variables for building, unit tests, and integration tests.
# Provided variables are read-only and subject to change.
#====================================================================
# REQUIRED VARIABLES FOR LOCAL DEVELOPMENT
#--------------------------------------------------------------------
# CORE ENVIRONMENT VARIABLES
NEXT_PUBLIC_ENV=local
NEXT_PUBLIC_API_URL=http://localhost:35001/api/v1
NEXT_PUBLIC_BASE_URL=http://localhost:3000
NEXT_PUBLIC_PORT=3000
# FIREBASE AUTH AND ANALYTICS
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=
# CONTENT TOKEN
NEXT_PUBLIC_STORYBLOK_TOKEN=xB5HoaLRkYs8ySylSUnZjQtt
# FEATURE FLAGS
NEXT_PUBLIC_FF_USER_RESEARCH_BANNER=true
# REQUIRED VARIABLES FOR CYPRESS INTEGRATION TESTING
# SEE CYPRESS.MD FOR INSTRUCTIONS
#--------------------------------------------------------------------
# CYPRESS PROJECT
CYPRESS_PROJECT_ID=
# MAILSLURP
CYPRESS_MAIL_SLURP_API_KEY=
CYPRESS_INBOX_ID=
# LOCAL BLOOM USERS
CYPRESS_SUPER_ADMIN_EMAIL=
CYPRESS_SUPER_ADMIN_PASSWORD=
CYPRESS_PUBLIC_NAME=
CYPRESS_PUBLIC_EMAIL=
CYPRESS_PUBLIC_PASSWORD=
CYPRESS_BUMBLE_PARTNER_ADMIN_EMAIL=
CYPRESS_BUMBLE_PARTNER_ADMIN_PASSWORD=
CYPRESS_BADOO_PARTNER_ADMIN_EMAIL=
CYPRESS_BADOO_PARTNER_ADMIN_PASSWORD=
# OPTIONAL VARIABLES
#--------------------------------------------------------------------
# NEW RELIC TRACKING
NEW_RELIC_LICENSE_KEY=eu01xx6fc63a14eea79c367dfe82e702FFFFNRAL
NEW_RELIC_APP_NAME=bloom-frontend
NEW_RELIC_BROWSER_MONITORING_KEY=NRJS-0f9d5f21ee9234a45cc
# ANALYTICS
NEXT_PUBLIC_HOTJAR_ID=
NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=
# ADDITIONAL FEATURES
NEXT_PUBLIC_CRISP_WEBSITE_ID= # User messaging
NEXT_PUBLIC_SIMPLYBOOK_WIDGET_URL= # Booking session forms
NEXT_PUBLIC_ZAPIER_WEBHOOK_DEMO_FORM= # User data form webhooks
NEXT_PUBLIC_ZAPIER_WEBHOOK_SETA_FORM= # User data form webhooks
NEXT_PUBLIC_ROLLBAR_ENV= # Rollbar logging
NEXT_PUBLIC_ROLLBAR_TOKEN= # Rollbar logging
To configure the Firebase variables, create a Firebase project in the Firebase console (Google account required). For additional guidance on setting environment variables, check out our Chayn Tech Wiki Guide.
If creating new environment variables, please tag Chayn staff developers in PR / issue discussions to let us know. New environment variables may require being added to Vercel (required for production-level variables) and GitHub Actions (required for app to build and pass CI tests). Note: Environment variables that are exposed to the client/browser must be prefixed with NEXT_PUBLIC_
- see next.js docs.
FF_DISABLED_COURSES
: This feature flag is intended to remove courses from the users course home page. Note that this does not prevent the user from accessing the course completely - the user may still be able to access the course if they navigate to the URL.
In terms of use, the variable could be used to disable a course when it has not been translated to a particular language e.g. if the healing-from-sexual-trauma/
course is ready in English but not in French, then the course can be enabled in storyblok but still disabled in french. To do this, the the french url slug fr/courses/healing-from-sexual-trauma/
should be included in the environment variable. This means the course will be hidden in the French version of bloom but still visible to the English version of bloom. If multiple courses need to be disabled, the slugs will need to be separated by commas.
NEXT_PUBLIC_FF_USER_RESEARCH_BANNER
: This feature flag enables a banner which displays a banner message aimed to gathering users for Bloom feedback. It is intended to be turned on temporarily, for saw 1-2 weeks at a time. It links to an external form which users can fill out if they would like to take part in research.
Chayn staff can import all environment variables from Vercel. Ask the team for access, then proceed to the Vercel Environment Variable Import for directions. Environment variables are defined and stored in Vercel for each of the environments: development, preview and production. Read more about Vercel environment variables here. These environment variables can be imported using the Vercel CLI.
Download and login to the Vercel CLI:
npm i -g vercel
vercel login
Link the Vercel project to your local directory:
vercel link
# copy these answers
Vercel CLI 24.1.0
? Set up â~/yourpath/bloom-frontend? [Y/n] y
? Which scope should contain your project? Chayn
? Found project âchaynhq/bloom-frontendâ. Link to it? [Y/n] y
â
Linked to chaynhq/bloom-frontend (created .vercel)
Download the local environment variables files from Vercel:
vercel env pull .env.local
Install dependencies by running:
yarn
Start the app in development mode (with hot-code reloading, error reporting, etc.):
yarn dev
Go to http://localhost:3000
yarn test
To have your unit tests running in the background as you change code:
yarn test:watch
Linting and formatting are provided by ESLint and Prettier. We recommend VSCode users to utilize the workspace settings in .vscode/settings.json and install the extensions in .vscode/extensions for automated consistency.
Additionally, this application uses Pre-commit and husky to run formatting and linting before each commit is pushed. If an error is thrown when pushing a commit:
We strongly recommend maintaining consistent code style by linting and formatting before every commit:
Run linting:
yarn lint
Run lint and fix:
yarn lint:fix
Run format and fix:
yarn format
For testing the production build. This will be run automatically during deployments.
yarn build
Bloom uses Cypress to perform end-to-end (e2e) tests of platform. See CYPRESS.md for set-up instructions.
The develop branch is our source of truth, not main.
Testing the staging preview is helpful for making front-end design changes.
When a pull request is approved, squash and merge the pull request into develop
. Merging a pull request into develop
will trigger a deployment to the staging preview url. A new pull request Merge Develop onto Main
will be automatically created when develop
is ahead of main
This new Merge Develop onto Main
pull request will be aligned to the staging preview url and should be retested where multiple changes have been made - this may not be required where changes are unrelated and were all tested individually
When changes are ready to be released to production, merge the new Merge Develop onto Main
pull request. This will merge develop
into main
and trigger an automatic deployment to production via the Github <-> Vercel integration which aligns to the main
branch
Production url: https://bloom.chayn.co
Staging preview url: https://bloom-frontend-git-develop-chaynhq.vercel.app/
Example branch preview url: https://bloom-frontend-git-vercel-branch-name-chaynhq.vercel.app/
Using the preview urls means that your usage/testing doesnât impact our metrics. For example, if you signed up for a new account for testing on the live site, then we would count that as one more user who signed up. To prevent testing data mixing with user data, the preview urls usage data is not tracked.
You should be using the preview urls whenever possible.
To use the preview urls, navigate to them and click 'Get Started' in the homepage to create a new account with any email and password.
If you already have an account, please login using the email and password you already set. If it says your account it already registered and you canât remember the password, use the password reset flow. If you want to create multiple accounts, you can add a +1 to your email like <hello+1>@chayn.co and it will treat it as a new email address (but the emails still go to your inbox, magic â¨)
Our preview urls work almost exactly like our live website, except for:
You might want to use the live site if:
This project uses the MIT License.
Bloom and all of Chayn's projects are open-source.
While the core tech stack included here is open-source, some external integrations used in this project require subscriptions.