freecodecamp/meeting-for-good

A meeting coordination app for your team

Meeting for Good

A meeting coordination app for your team.

Get Meeting for Good running locally

---

Prerequisites

• NodeJS
• MongoDB

---

Quick Start Steps:

• Fork the repo to your own account
• Clone it to your computer: git clone https://github.com/[your_account_name]/meeting-for-good.git && cd meeting-for-good
• Run npm install
• Create a .env file in the root directory of the app with the following contents:

MONGO_URI=mongodb://localhost:27017/meeting-for-good
MONGO_URI_TEST=mongodb://localhost:27017/test
GOOGLE_KEY=[YOUR_GOOGLE_KEY]
GOOGLE_SECRET=[YOUR_GOOGLE_SECRET]
FACEBOOK_KEY=[YOUR_FACEBOOK_KEY]
FACEBOOK_SECRET=[YOUR_FACEBOOK_SECRET]
APP_URL= http://localhost:8080/
NODE_ENV = 'development'
AWS_ACCESS_KEY_ID='your AWS email user'
AWS_SECRET_KEY='your AWS  email pass'
EMAIL_FROM='default email from'
ANALYSE_PACK=false
LINT_CODE=false
GOOGLE_ANALYTICS_ID=[YOUR_GOOGLE_ANALYTICS_ID]
GOOGLE_ANALYTICS_DEBUG=false
OPBEAT_APP_ID=[YOUR_OPBEAT_APP_ID]
OPBEAT_ORGANIZATION_ID=[YOUR_OPBEAT_ORGANIZATION_ID]
OPBEAT_SECRET_TOKEN=[YOUR_OPBEAT_SECRET_TOKEN]
STATS_UPDATE_INTERVAL=[STATS_REFRESH_INTERVAL_IN_SECONDS (defaults to one hour if omitted)]

NOTE: The Google+ API and the Google Calendar API must be enabled when Google key and secret keys are created.

• Open a new terminal session and run mongod
• Run npm run serve from the app's root directory. This will start the app at port 8080 (unless overridden)

To build the app instead, run npm run build

---

Detailed local development installation steps

You'll need to have the latest version of Node.js installed. Either use your OS's package manager or follow the installation instructions on the official website.

This app uses MongoDB as its database engine. Follow these instructions to install it locally and start the MongoDB server on your machine.

Install git if it is not already installed. To clone this repository to your local machine, open a command line interface and navigate to the directory where you would like to the food-bank app directory to be in. Then run git clone https://github.com/freeCodeCamp/meeting-for-good.git

Move to the meeting-for-good directory and run the npm install command to install the application dependencies.

Type npm run dev to start the application in development mode. If all goes well, it will be available at http://localhost:8080

---

Contributing

We welcome pull requests from seasoned Javascript developers. Please read our guide first, then check out our open issues.

meeting-for-good's Issues

Stuck at a blank screen and unable to login in

This is the event - https://meeting.freecodecamp.com/event/593eb0d8769f8d68096037d1

Browser is ie11

I am asked to sign in with google, I am then redirected to https://meeting.freecodecamp.com/loginController# and shown a blank screen.

There is nothing logged in the console.

I have the same occur when using inPrivate browsing.

I am unable to use a different browser as this is my work laptop.

Normalize Environmental Variables

Currently the environmental variables are not consistent.

Some are in the form ALL_CAPS (this is the idiomatic Unix style) while some are in camelCase.

We should stay internally consistent and consistent with the rest of the Unix world and normalize all the variables in .env and their uses in the codebase to form ALL_CAPS

no event-owners can "archive" the event, em prevent to be displayed.

Add common propTypes for Events

We use a common library of proptypes. Add events type check and change the object at each one of the files that use this prop.

split Demo dialog at Availability Grid to a separated object

WE have a dialog at AvailabilityGrid.js that show how to interact with the grid. Its desirable to split that at a separated component/object

Not all hours of the day shown

My time zone is London/Dublin GMT+0. The availability map shows 1am - 5am, two thick vertical lines, then 4pm - 11pm.

My expectation is to be able to submit my availability for a 24 hour period.

As a user who created an event, I can change the event dates without completely deleting the event

One of the dates I selected in the event creation step isn't a good date for me. Instead of having to completely delete the event and restart the process, I want to be able to change the dates.

<hr> elements are misaligned on https://meeting.freecodecamp.com/

Create spinner between all views so people don't think the app crashed

Formatting Issue

The time selection is going 100% across the screen and repeating times across the day. I really liked the app when it worked before this change that happened just this week on the herokuapp.

I added a screen cap to show off the issue.

Hitting the notifications icon resets the grid

When you are on edit mode at grid, if you hit the notifications the app reset the grid.
That only happens at edit mode.

Email invites populated with "undefined"

User Feedback - My observations and suggestions for the app

A few days ago, Quincy suggested me to use this app so that we can fix on a time to do our video call. The following were my immediate observations, which I then shared with Quincy and he asked me to post a issue here as a feedback -

I think the app needs some UX improvements. I'm only allowed to enter my availability, not view what I or other participants entered. Would the app suggest a time on it's own by doing the calculations or would it just show the time slots for when each participant is free, so that we can organize the call for when all our time slots overlap? Where would that be displayed? Does it know that there are going to be five participants for this one or any amount of people can enter?

This is what it shows to me. I think we are missing out on some time slots here. You are in the PST right? The difference between PST and IST is 12 and a half hours.

If we consider 8 am to 12 am as the ideal time for meeting, anywhere from 8 am to 11:30 am and 8 pm to 11:30 pm for you should be the ideal time for meetup for us.

It should not be showing 12 am to 6 am as available options to me.

It should show 8 : 30 am to 12 pm and 8 : 30 pm to 12 am as the available options to me, from which I can select my free time.

So the way this could be done is, if we consider 12 am to 8 am as the ideal time to set a meeting, then for the first participant, we should provide the option of 12 am - 8 am, from which the participant selects his or her free time. After we get that free time, when the 2nd participant opens the app, we should calculate the time difference between the two timezone's (1st participant and 2nd participant) then subtract (if the 2nd participant is behind) or add (if the 1st participant is behind) that difference to the free time of the 1st participant. Then again from this result you'll need to remove the hours outside the slot of 12 am - 8 am. This will give us the hours for the 2nd participant within the 12 am - 8 am time slot from which s/he can select his/her free time.

Hope this is helpful to you guys :)

P.S. I'm from Hyderabad, India.

add icons at left side of the menu

Thats will be a nice touch like ? for about

cannot read property of participants of null

Seeing this currently on the server

Create OpBeat Release notification script

OpBeat Requires notification when a server is updated.

We should create a script that can be run whenever the server is updated. This script will need to require the .env environ vars using dotenv

Here is the actual URL that most be hit when servers are updated using cURL:

curl https://opbeat.com/api/v1/organizations/<organization-id>/apps/<app-id>/releases/ \
    -H "Authorization: Bearer <secret-token>" \
    -d rev=`git log -n 1 --pretty=format:%H` \
    -d branch=`git rev-parse --abbrev-ref HEAD` \
    -d status=completed

We should use something like Request or the http module to make this request as port of the script

For more info here is the associated docs: https://opbeat.com/docs/articles/get-started-with-release-tracking/

Add production tools

Add morgan for route logging in.
Add opbeat for route perfomance

Unable to see log in button on iPad

The login buttons were not showing on my ipad. When I moved to my laptop I could see them.

per one of me end user

Keys

What keys is it we need exactly both google and facebook have multiple apis.

Add a call for action button at landing page

We want the same look as www.freecodecamp.com call for action. at the same colors with
this words ''Login (it's free)" button that redirect to the login button of the navbar

Documentation for the code

Can any one help to document the project ?
I know that a lot of the code needs better explanations.

Adding a "donate" button to navigation

We're paying about $80/month for servers to run Node and the MongoDB cluster to run Meeting for Good, so anything donations people can give would be a huge help :)

Could you link it to https://www.freecodecamp.com/donate/?r=mfg

Travis should run on LTS versions of node

Currently Travis runs against Node 7 which is an experimental version of node. The travis config should be updated to test against Node 6 and Node 8 (which will be LTS very soon).

Npm postinstall fail Linux

Failure on Linux nj-car-devise 3.11.0-26-generic #45~precise1-Ubuntu SMP Tue Jul 15 04:02:35 UTC 2014 x86_64 x86_64 x86_64 GNU/Linux

npm -v 3.6.0
node -v v5.6.0
mongo MongoDB shell version: 2.0.4

/apps/sandbox/meeting-for-good(development) » npm install                                                

> [email protected] postinstall /apps/sandbox/meeting-for-good
> node tools/postInstall.js

/apps/sandbox/meeting-for-good/tools/postInstall.js:4
let args = `https://intake.opbeat.com/api/v1/organizations/${process.env.OP_BEAT_ORGANIZATION_ID}/apps/${process.env.OP_BEAT_APP_ID}/releases/ `;
^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Function.Module.runMain (module.js:447:10)
    at startup (node.js:140:18)
    at node.js:1001:3

Add google analytics hooks

We use react-ga https://github.com/react-ga/react-ga module as a provider for our analytics.
But we can improve our statistics, adding hooks for events, like new user, or new event created.
This is the ex : ReactGA.event({ category: 'User', action: 'Created an Account' });
Add this at the right place on each possible event.
PRs are welcome!

I should see others availability in the grid when joining an event

App currently shows grid with other users' availability only after submitting your own and joining the event. It would be useful to know this information as you add in your own availability.

Add statistics from the app at the landing page.

A good example https://lichess.org/ to left

OpBeat log

at my local env opBeat works. but when i try at heroku or at the production., stops login performance. The errors and the releases works.
Also i got:
GMT opbeat agent configured correctly { node: 'v8.1.2', agent: '4.14.0', org: 'xxxxxxx', app: 'xxxxx', instrument: true }
@BerkeleyTrue . Can you help ?

Prevent user to set a event with last then a hour of duration

Because of the way we construct the grid, if we get less the 1 hour for a event, the hour titles will not be displayed.

Tasks need

Hi, everybody.
Is this project completely done or there is some work for volunteers?

Cannot run app locally - parseQuery() error

Hey! I cant seem to get the app running. I keep getting this error:

There doesn't seem to be a parseQuery method in client.js. I've got the latest changes from development and did an npm i.

OS: Windows 10
Node: 7.0.0
NPM: 3.10.8

Events just joined do not show up on the dashboard until I toggle 'Past Events'

You should be able to drag both horizontally and vertically

Problem with project setup in Windows

add a better layout when Jump Hours at the grid.

My suggestion is something like |<->| as a new "cell" instead of double borders at the cell.

Create rectangle drag and select multiple times of day and dates on calendar

Can't unselect bars

There weren't any console errors.

add nodemon at webpack

WE need a setup at webpack that can recompile the server after we edit some file.

Create a startup script

The current startup script does not play well with PM2.
Create a start up script that requires no other commands to run the app.

// package.json
"start": "node ./build/app.js"

// At the top of app.js
import 'dotenv/config';

You should be able to select times from right to left as well

Send Quincy your SSH keys so he can add you to the server

@AkiraLaine @awesomeaniruddh

Refreshing the page toggles "Past Events" back to 'Off'

Chrome Version 58.0.3029.33 beta (64-bit)

GA ID not set during build process

The GA ID is injected into the client side files using webpacks Define plugin, but the build process does not call the dotenv process to load the ENV var's into the process. This results in an undefined GA ID, whether or not it is set in the .env file.

I should be able to modify dates on time picker page, too.

Horizontal Rules Not Centering

The horizontal rules on the home page were not centering when using the Chrome browser.

Chrome

Edge

I resolved the issue in PR #320

Bug in availability selection

Seems that after clearing a selected block the rangeSelected state on the AvailabilityGrid is stuck to true, then it's impossible to create new blocks or set individual blocks. Setting rangeSelected = false in react devtools after selecting the beginning of a new block fixes it.

Not mobile friendly

Not sure if this was a design decision, but the app is hard to navigate in mobile and there is information missing, i.e. who has submitted availability.

iPhone 5C, safari, latest iOS

Unable to use a different browser as this is a works phone

Integrate google calendar

As a user I can view my google calendar as a disabled cells at grid.

Correct padding on shifted grid on partial hours

Unable to select times on large grid

I am unable to select a time on this large grid: