hypefi / fl-maps

Map in Meteor: used to organise social events globally, and list resources on a street sleeper map

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

2. create a fork of this repository and then

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

3. 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

4. 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

5. run the project

   meteor npm install
   npm run start // see notes below if it fails to run

6. make changes

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

8. if all the tests have passed, run

     git add .
     git commit -m 'description of what has changed'
     git push origin your_working_branch_name
   

9. 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:

• We favor imports statements over global variables

• And also npm modules over meteor's packages (as much as possible)

• We replace meteor's built in compiler with meteor-webpack.
  this allows us to take advantage over many great webpack-based tools like react-hot-loader among others..

• We use jest as a test runner for most of the ui parts

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

• react-meteor-data - Get reactive updates from the server into components
• meteoreact:accounts - Automatic generation of user related forms
• mdg:validated-method - A powerful wrapper for meteor's methods

Npm Packages

• Reactstrap - React components for bootstrap
• React Router v4 - A router for react
• Simpl-schema - Schema definitions for our collections
• Uniforms - Automatic generation of forms in react
• NProgress - Display a progress bar between client-server requests
• react-google-maps - React components that wraps google-maps api
• Enzyme - A testing utility for react

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 mainmenu 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.

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