/ysm

Front-end for Your Story Matters.

Primary LanguageJavaScriptMIT LicenseMIT

Your Story Matters (YSM)

Your Story Matters (YSM) is a digital companion for survivors of sexual assault launched in 2019. Formerly called YANA (You Are Not Alone) and funded by Nesta and the UK Department of Digital, Culture, Media and Sport through the Tech to Connect Challenge, YSM has curated content including recovery, moving through trauma, accessing justice through the law, stories of resilience, and allows survivors the option to create an account and save their journey.

Get Involved

If you would like to help Chayn and receive special access to our organization and volunteer opportunities, please visit our Getting Involved guide. We'll get back to you to schedule an onboarding call. Other ways to get involved and support us are donating, starring this repo and making an open-source contribution here on GitHub, and supporting us on social media!

Our social medias:

Website - Chayn

Twitter - @ChaynHQ

Instagram - @chaynhq

Youtube - Chayn Team

LinkedIn - @chayn

YSM Frontend

GitHub Actions CI workflow badge

A NextJs VueJS app with PWA mode enabled and Jest unit testing.

This repo serves just the YSM frontend, find YSM's backend code here: https://github.com/chaynHQ/ysm-backend

Currently in active development.

How to Contribute:

Before making a contribution, please follow our Contributing Guidelines in CONTRIBUTING.md.

Happy coding! ⭐

Development

Technologies Used:

  • Next.js - framework for React.js, a JavaScript library for building component-based user interfaces
  • Vue.js - model–view–viewmodel frontend JavaScript library for building user interfaces and single-page applications
  • Firebase - user authentication and analytics
  • Rollbar - error reporting
  • Mailchimp - marketing and email automation
  • Heroku - build, deploy and operate staging and production apps
  • GitHub Actions - CI pipeline

Prerequisites

  • NodeJS v16+
  • Yarn v1.21+

Run local backend:

See ysm-backend for instructions. You will need to run this in the background for the frontend to be functional.

Install dependencies

yarn

Create .env.local file

Include the following environment variables in a .env.local file.

You will need to gather the following tokens from Firebase.

If you're an official Chayn volunteer loading up the frontend, please get in touch with the team for access to the environment variables.

NEXT_PUBLIC_ENV=local

NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=
NEXT_PUBLIC_FIREBASE_KEY=
NEXT_PUBLIC_FIREBASE_DOMAIN=

# VARIABLES BELOW ARE OPTIONAL
NEXT_PUBLIC_ROLLBAR_SERVER_TOKEN= # rollbar for error reporting
NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN=
NEXT_PUBLIC_ROLLBAR_ENV=
NEXT_PUBLIC_MAILCHIMP_API_KEY= # mailchimp for email automation
NEXT_PUBLIC_MAILCHIMP_SERVER_PREFIX=
NEXT_PUBLIC_MAILCHIMP_AUDIENCE_ID=

If creating new environment variables:

  • Check if the new environment variable must be added the ci.yml file.
  • Note that new environment variables must be added to Heroku before release to production. Please tag staff in your issue if creating new environment variables.

Run locally

Start the app in development mode (with hot-code reloading, error reporting, etc.):

yarn dev:url

Run unit tests

yarn test:unit

To have your unit tests running in the background as you change code:

yarn test:unit:watch

Formatting and linting

yarn lint

To lint and fix:

yarn lint:fix

Formatting and linting is provided by ESLint and Prettier (see the relevant configs for details).

Workspace settings for VSCode are included in this folder.

Build the app for production

yarn build

License

This project uses the MIT License.

YSM 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 may require subscriptions.