Giter VIP home page Giter VIP logo

opencrisisboard's Introduction

logo

OpenCrisisBoard

OpenCrisisBoard (OCB) is a lightweight forum application based on ReForum that enables social-backed, accesssible, long-form and short-form communication around crisis-related topics. OpenCrisisBoard is most useful when deployed in small communities, supported by local government as administrators and moderators. It allows users to log in with verified social media accounts to have meaningful discussions around relevant topics, in addition to offering services such as volunteering.

Application Features

  • Users can log in with verified social accounts (Facebook and Twitter only, no email or account sign up allowed for social proof reasons)
  • Users can post a discussion
  • Users can reply their opinions regarding discussion
  • Users can favorite discussions
  • Users have their own profile page
  • Admin can create new forum categories
  • Admins have a lot of power over every users discussions and opinions

Documentations

New Discussions

home view

Unlimited Boards

home view

Login with Facebook or Twitter (It attaches to your post to avoid spread of misinformation)

home view

Admin View (Forum Board Creation/Deletion)

admin view

Deploy with Heroku

Deploy

In order to deploy to Heroku you will need to create a Heroku account, during deployment you will be prompted for a series of keys:

To add map functionality you will need to obtain keys from Google (this is the only required key needed to deploy)

To have social login you will also need keys for Twitter and/or Facebook and/or Github:

You need to grab the following information from the application.

  • Client ID
  • Client Secret
  • Callback URL

The Callback URL is the domain where Twitter or Facebook or Github will redirect the user after a successful login. You can use a domain name or local host. But you need to append the URL with the path /api/user/authViaTwitter/callback or /api/user/authViaFacebook/callback.

  • So, the complete url will look like: https://TheNameOfYourApp.herokuapp.com/api/user/authViaTwitter/callback or https://TheNameOfYourApp.herokuapp.com/api/user/authViaFacebook/callback or https://TheNameOfYourApp.herokuapp.com/api/user/authViaGitHub/callback

Deploy via Docker

The entire application is built to deploy with docker compose, you can edit all of the below environment variables in the file docker-compose.yml. The file looks like this:

version: "2"
services:
  web:
    build: .
    ports:
    - "8080:8080"
    depends_on:
    - mongo
    environment:
    - PORT=3030
    - DBURL=mongodb://localhost:27017/OpenCrisisBoard'
    - FB_APPID=[FB APP ID HERE]
    - FB_CBURL=[FB CALLBACK URL HERE]
    - FB_SECRET=[FB SECRET HERE]
    - TW_APPID=[TWITTER APP ID HERE]
    - TW_CBURL=[TWITTER CALLBACK URL HERE]
    - TW_SECRET=[TWITTER SECRET HERE]
    - GH_APPID=[GITHUB APP ID HERE]
    - GH_CBURL=[GITHUB CALLBACK URL HERE]
    - GH_SECRET=[GITHUB SECRET HERE]
  mongo:
    image: mongo
    ports:
    - "27017:27017"

If you are already running mongodb, simply remove the mongo: section and expose the port mongo is running on to 27017 on the image:

ports:
    - "27017:27017"

Then once you're all setup, simply run docker-compose up to launch the full forum

Deploy on your own server

Please make sure you have following software installed in your system:

  • Node.js > 6.0
  • NPM / Yarn
  • Git
  • MongoDB

First you need to clone the repository:

$ git clone https://github.com/crisisboard/opencrisisboard

Then you have to install the necessary dependencies using either NPM or Yarn:

$ npm i
$ yarn

Then, ensure the mongodb service is installed and running locally. There are multiple ways of doing this, but this guide should help if you don't know how to do this.

Since the app currently uses Twitter, Facebook, and Github authentication, we need to configure a Twitter and Facebook application and/or GitHub. You can register a new application from these links:

Twitter Developer Portal

Facebook Developer Portal

GitHub Developer Portal

We need to grab the following information from the application.

  • Client ID
  • Client Secret
  • Callback URL

The Callback URL (CBURL) is the domain where Twitter, Facebook or Github will redirect the user after a successful login. You can use a domain name or local host. But we need to append the URL with the path /api/user/authViaTwitter/callback or /api/user/authViaFacebook/callback. So, the complete url will look like: https://localhost:8080/api/user/authViaTwitter/callback, https://localhost:8080/api/user/authViaFacebook/callback, or https://localhost:8080/api/user/authViaGithub/callback

Additionally to add map functionality you will need to obtain keys from Google (this is the only required key needed to deploy)

Google Developer Portal

Now, we need to configure the credentials inside of the codebase. You can either edit the credentials file directly in config/credentials.js or add the details to your environment variables when you run the application:

module.exports = {
  DBURL : process.env.DBURL_URI || process.env.DBURL || 'mongodb://localhost:27017/reforum',

  // facebook details
  FB_APPID : [FB APP ID HERE],
  FB_CBURL : [FB CALLBACK URL HERE],
  FB_FIELDS : ['id', 'displayName', 'picture.type(large)', 'email', 'birthday', 'friends', 'first_name', 'last_name', 'middle_name', 'gender', 'link'],
  FB_SECRET : [FB SECRET HERE],

  // twitter details
  TW_APPID : [TWITTER APP ID HERE],
  TW_CBURL : [TWITTER CALLBACK URL HERE],
  TW_SECRET : [TWITTER SECRET HERE],

  // github details
  GH_APPID : [GITHUB APP ID HERE],
  GH_CBURL : [GITHUB CALLBACK URL HERE],
  GH_SECRET : [GITHUB SECRET HERE]
};

OR

FB_APPID='[FB APP ID HERE]' FB_SECRET='[FB SECRET HERE]' FB_CBURL='[FB CALLBACK URL HERE]' npm run start:dev

We need to provide all the information here. You can notice that we need the database url here too. My local MongoDB url looks like:

mongodb://localhost:27017/OpenCrisisBoard

Now we are ready to run the application. You can run either run the development environment of the application which will include Hot-Reload for JS codes using Webpack and the Redux dev tool extension, or you can run the production edition. The default port for developer edition is 3030, and for production is process.env.PORT.

To run the app in development environment:

$ PORT=3030 npm run start:dev

To run the app in production environment:

$ PORT=3030 npm run start

Now, if you visit http://localhost:3030 (if you ran the dev), or the production URL, you will see that the application is up and running. Congratulation! But, wait a minute, it's showing you Sorry, couldn't find the forum. That is because, we didn't create any forum yet. You can now sign up via github and then visit the admin panel with the url http://localhost:3030/admin. The application is currently configured in a way that, the first user will become the admin for the system.

Here we can create new forums and that forum will be displayed in the application. The first forum will be used as default forum.

Path for Future Work

  • Add search functionality
  • Add unit tests for both backend and frontend
  • Ability to change the name and logo of the site from admin panel.
  • Make the installation process more interactive
  • Add multiple theme support.
  • Add geolocation support

License

MIT License. Do whatever you want to do. :-)

A minimal forum application built with the following technologies:

Conclusion

Any pull request, issues and contribution is very appreciated.

OpenCrisisBoard:

Pim de Witte

Alex Taylor

ReForum (what the project is based on):

Provash Shoumma

opencrisisboard's People

Contributors

aaoyekanmi4 avatar apruner avatar edencoder avatar fabiosantoscode avatar justlask avatar kauereinbold avatar pimdewitte avatar proshoumma avatar tgdn avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

opencrisisboard's Issues

Install unit test framework for frontend, get started on writing unit tests

At this point, the app doesn't have a test framework installed for frontend unit tests. Let's get this installed and some quality tests written for our react components.

I recommend that we setup unit testing with Jest and Enzyme. Here's a good tutorial to follow that can greatly help with getting these tests up and running: https://scotch.io/tutorials/testing-react-components-with-enzyme-and-jest

Let's focus on react component tests first.

Add geolocation support

This seems like an issue with a lot of scope, that can probably be broken up into separate issues. Unsure of the details right now.

SMS sign up (SMS verification)

As a user, I should be able to sign in via only a mobile number and SMS. This type of account will likely be tied into SMS updates automatically.

How can I help?

Saw this posted on helpwithcovid.com and signed up to volunteer for the project. How can I assist?

Geolocation board view

As a user, you should be able to view a board from a text-first approach and a map-first approach for different use cases. For instance, if you are on a board focused on delivery grocery to elderly, you will want to see where these requests originate from before you scroll through all the requests.

We're suggesting a UX similar to airbnb - although we have no direct UX mockups at this time. Ideas welcome.

Security issue: Admin check in backend is done via field in request

Currently, the admin checks in the Admin backend API are done via a flag in the request. This is obviously not secure as requests can be hijacked and have their contents changed.

Instead, what we need a utility that looks up the user in the database and checks their role string (or role flag, or whatever) to ensure it's that of an admin. This would be much more secure.

Post editing and enhancements

Users should be able to edit posts and control how they post, such as including images, lists, blocks, etc.

  • Priorities:
  • Link unfurling (Itay working on this)
  • Image Posting

Implement search filtering for posts

Frontend search functionality would be great so that users can filter posts for certain keywords.

The implementation details are yet to be fully determined, but this will certainly involve building a stateful search bar component and functionality to filter the posts (via a substring search or some similar algorithm) based on the string entered into the search bar component.

TODO here:

  • UX design mockup for search component
  • Build search component
  • Build substring search filter functionality
  • Unit testing for search component

Add multiple theme support

Implement multiple theme support in some way. This could range from anything simple like a light/dark theme toggle, to a theme file extension system. I figure we should opt for something on the simpler side since this seems like a non-essential feature of the app.

SMS based updates

As a user, you should be able to sign up a relative or someone you care about to SMS updates, either on the full board, or on individual threads.

Install unit test framework for backend, write first few unit tests

Our backend is also in need of unit tests. Let's install a test framework so we can test our api routes, utilities, and other backend functions.

I recommend that we (like the frontend) use Jest so we have a common test environment on both ends of the app. We can also use Supertest for our endpoint-specific tests.

Here's a guide that might be helpful in getting started on this one: https://dev.to/nedsoft/testing-nodejs-express-api-with-jest-and-supertest-1km6

Expand admin panel capabilities (name and logo changes)

Admin users should be able to change the name and logo of their OCB site deployment from the Admin panel view so that they better fit the community that uses the deployment.

TODO for this issue:

  • UI/UX mockup
  • API implementation
  • Build frontend component
  • Unit testing

Search Address and display the search result on the map

As an user that can create a Discussion
I want to search for an address and see the results on the map
so that I will be able to confirm the correct location

  • Scenario 1: Searched addresses should display a list of possible options
    Given that a user is creating a Discussion
    when type the address wanted in the search box
    then a list of options will be available to select.

  • Scenario 2: Address selected should appear on the map
    Given that a user has selected an address
    when a blue pin appear on the map
    then it will be possible to see the location.

  • Scenario 3: Wrong location on map should be able to research
    Given that the user saw the wrong position
    when the user research the address on the search box
    then another blue pin will appear on the map and the previous one will disappear.

  • Scenario 4: When user click on the map should catch the address selected
    Given that a user is creating a Discussion
    when the user click on the map
    then a blue pin will appear on the map and fill the address the search box.

  • Scenario 5: Wrong location on map should be able to reposition the pin
    Given that the user saw the wrong position
    when the user drag and drop the blue pin to another location
    then the new address will be filled in the search box.

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.