Code Monkey home page Code Monkey logo

quarantine-hero's Introduction

QuarantaeneHelden

At quarantaenehelden.org we created a platform for people to support those in their community who might need a little extra help during this time of quarantine. The platform connects people who need help or cannot leave their homes, with those in their neighborhood who are able to run errands, deliver groceries, take pets on walks, and other tasks. On our website, you can register to ask for help or to provide help for others. Let's support those in our community!

A project brought to you with ❤️ and bootstrapped with Create React App.

Contributions

As a non-profit project run by volunteers we rely on the support of the open source community. We highly encourage contributions and we are trying to make this process as frictionless as possible. Therefore, we set up a test environment with a special instance of Google's Firebase and we elected two people to coordinate contributions, @tgraupne and @florianschmidt1994.

Everyone is very welcome to create issues, give feedback and contribute to the code base. If you'd like to work on an issue, please mention @tgraupne or @florianschmidt1994 in a comment and we will get in touch with you. We are constantly trying to maintain an up-to-date state of the project reflect in labels, reviews and comments.

Getting Started

This repository contains the source code of our website, and the following guide explains how to get started and what you need to improve and use this project. Our Firebase functions are hosted here: https://github.com/florianschmidt1994/quarantaenehelden-firebase-functions

You need the following libraries to get started: node, yarn, firebase cli. So please install them in an appropriate way on your host system. On macOS, you'd also need the Xcode command line tools.

Once you've installed those dependencies, run the following inside the project folder

yarn install

This will install all JavaScript dependencies.

Local web development

In the project directory, you can run:

yarn start

Runs the app in the development mode and automatically connects to our test instance of Google"s Firebase.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified, and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Backend development

The following steps will explain how to set up your own Google Firebase project to develop and test cloud functions. Those cloud functions, together with the Firebase document store firestore, provide the backend of our project.

DISCLAIMER: The free Spark plan of Google's Firebase is sufficient for development purposes.

First, go to https://firebase.google.com/, take a look at the Getting Started Guide there and create your own Firebase project. At this point, we hope you already have a Google account, because you'll need one.

Firebase Console

Once your project is created, you need to configure the following things:

  • create a firestore database
  • configure the access rules of your database for proper access
  • create a collection called stats with the document id: "external"

Setup Authentication, the method is Email and Password.

Now you can add a Firebase App to your project, more precisely a Web App. Once created, you can edit and download the specific configuration of your app. This configuration contains API keys, backend URLs, and so on.

Please update the firebaseConfig.jsx file in the src folder of this project, to connect your local instance with your specific backend.

Local Backend Setup

Even though the free Firebase plan is ok for development, it has its downsides. The following feature does not work with this plan: scheduled firebase function.

However, since we use it in production we need to comment out the following line of code:

// exports.sendNotificationEmails = functions.pubsub
      .schedule('every 3 minutes')
      .onRun(async (context) => {}

In general, local development should not use the email system, and if you'd want to use it, you'd have to create your own sendGrid account and API key. Hence, please also comment out:

// sgMail.setApiKey(functions.config().sendgrid.key);

and

await sgMail.send({
  to: receiver,
  from: '[email protected]',
  replyTo: {
    email: email,
  },
  templateId: 'd-ed9746e4ff064676b7df121c81037fab',
  dynamic_template_data: {
    subject: 'QuarantäneHelden - Jemand hat dir geschrieben!',
    answer,
    email,
    request,
  },
  hideWarnings: true, // removes triple bracket warning
});

Or even better, replace all email-related source code with proper logging.

Deployment

After those changes, you should be able to initialize and deploy your own Firebase function to your specific backend. Within the project folder, run:

firebase login
...

firebase init
...

firebase deploy
...

and follow the instructions.

With all that, you should be good to go. In case you missed something or some step was unclear, please create an issue in this repository.

quarantine-hero's People

Contributors

caopi avatar daangus avatar florianschmidt1994 avatar funtonia avatar hvonzimmermann avatar koiranos avatar mauriceackel avatar niconomaa avatar tgraupne avatar thepiwo avatar timjb avatar tinobo avatar yorickreum avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.