Map in Meteor: used to organise social events globally, and list resources on a street sleeper map
JavaScript CSS Other
Clone or download

README.md

Focallocal logo

This is the base branch for the new react-based fl-maps.

Contribution Guide

The project is based on Meteor and React. (try a todo-list tutorial if you've never used one of them)

Setting Up The Development Environment

  1. install meteor

https://www.meteor.com/install

  1. create a fork of this repository and then

    git clone https://github.com/your-github-username/fl-maps

  2. Set up git

    • git remote add upstream https://github.com/focallocal/fl-maps
      // make sure there are 2 remotes (origin that points to your fork and upstream for the original repo)
      git remote -v
    
    • every time you start working on a new feature, run: git pull upstream master which ensures you are always working with the most updated version of the project.

    • create a new branch git checkout -b new-feature-name

  3. obtain the most recent settings.json file from slack, its pinned in the #meteor-maps thread, and place it in the project's folder

    • settings.json has a property named 'mapType': 'gatherings' , you can change 'gatherings' to 'btm' to work on Focallocal or Brighter Tomorrow
  4. run the project

    meteor npm install
    npm run start // see notes below if it fails to run
  5. make changes

  6. run tests (npm test or npm run test-watch)

  7. if all the tests have passed, run

      git add .
      git commit -m 'description of what has changed'
      git push origin your_working_branch_name
    
  8. go to github and create a new pull request from your fork (make sure it's against the fl-maps/master branch)

** !if you encounter any errors related to sass-loader, run the following command! **

meteor npm rebuild node-sass --force

Currently you'll see a Compiled with warnings. message, ignore it.

Working On Issues

Issues can be found on our Trello board which gives a more visual representation of progress than Github. The two currently active lists on Trello will be the 1st version (example v0.1) reading from left to right, and also the Quick Bug Squashing List: Trello and not github (use github only to open issues!).

*if you decide to work on an issue please click 'members' and add your name to it, then move it into the 'sprint' queue. You can also use filters to see Meteor only issues (missions). (Don't forget to move it into the 'complete' list when finished, and also close the issue in Github.

Outside Software

The map utilizes Discourse for its forums and SSO. It will likely also use Discourse Messaging for notifications/users setting how often they receive notifications. The idea has been floated of also using it for users profiles, but that needs more discussion.


Guidelines

The first thing you should know is that this is not a typical meteor app:

Writing Components

Our project is based on a library called reactstrap which provides several react-components which are based on bootstrap. That means that usually instead of writing plain html tags, you'll be able to just use one of the components provided by reactstrap.

for example, instead of writing a button element like this

// plain html

<button className='primary'>My Button</button>

you can check on the documentation of reactstrap if it provides a button component, and since it does, you can just use

import { Button } from 'reactstrap'

<Button color="primary">primary</Button>

Google Maps Component

We use the react-google-maps package for anything related to google-maps. if you need to work with it - please follow it's docs https://tomchentw.github.io/react-google-maps/

Select Component

We use the react-select package for select elements, you can learn how to use it here: https://deploy-preview-2289--react-select.netlify.com/

Packages

The following is a list of the packages that you should be familiar with:

#You don't need to master them, learn them when you need to use them.

Meteor Packages

Npm Packages

Please make sure you are familiar with those packages before attempting to use them

Coding Style

This project uses the standard coding style guidelines (enforced by eslint-standard-config)

Please ensure your text editor is configured to use a linter so it can warn you about an incorrect code

Gotchas

  • React-hot-loader will only hot-reload for changes that are made inside the component. This is the default behavior but I've added this note just to make sure you are aware of this.

  • Both of the maps (gathering and brightertomorrow) are using the same code base - we differentiate their strings by using different i18n files for each.


Core Design Considerations

Goal for users: Posting something new onto the map

Platform goal: Growing a positive and active community focused on the subject chosen for that map

When users visit the map the should feel: Connected to a Community

The platform should be:

  • positive

  • action focused

  • welcoming and cheerful

Vision for the Maps Platform

We are building two maps together to ensure the platform remains focused on the Core Design Considerations, rather than wondering towards one specific issue. This keeps community at the center of our build, and ensures the map can become a useful open source platform for others later

Upon reaching v1: Our development of the Brighter Tomorrow Map will slow, the platform will be released as open source for others to use. The Focallocal.org map build will continue and specialize to better integrate with the other areas of the Focallocal.org platform

Design Constraints

The Orange main menu and its text 'Focallocal' are used in all projects built by the Focallocal Public Happiness community, so members can easily identify the project, and to maintain the positive and cheerful atmosphere in all related projects.

Two Maps

We have two maps based on the same codebase at the moment. We're keeping the code merged until v0.3 as it helps to keep them both focused on their core ethos 'community connection', and enables them both to launch at the same time. The Homelessness map, and the community hub that will push it out to help people around the world.

Map 1 - The Brighter Tomorrow Map focuses on reducing homelessness through community connection.

Map 2 - Focallocal.org focuses on connecting people to take action where they live and improve well-being, that includes by building projects like The Brighter Tomorrow Map, which is our flagship project

In GitHub you'll find two main branches 'master' and 'fl-sleeper'. Any differences between the two are stated in our language plugin i18n. All text visible to users should be set in i18n so it can be changed easily between the two (at some point in the future we'll probably turn this into a user friendly backend).

When code you are working on is/needs to be different in the two maps, the code to change can be found in i18n. This is generally text, links and images. (search i18n in the project to find its folder).

Other Areas of Focallocal.org

Focallocal.org is building towards a decentralized community where anyone can join to work on projects and take action to build a friendlier happier and safer world around them. Its a hub for our volunteer community to coordinate, collaborate, and begin to grow. Its also not very good right now (i built most of it (Andy)) and it is fragmented.

What it is, is a minimum functional platform to support a community who will redesign and improve it to meet their needs as they grow; its also a pool of skills, like marketing experts, graphic designers, etc, to contribute to both maps, and many other Public Happiness projects built by our community. Anyone joining in one of our projects to create a happier world is a member of the Focallocal Community and you're all also welcome to improve other areas of focallocal.org - it's your platform