hatchways / team-carbonara

A scheduling assistant for setting up one-on-one meetings, built with ExpressJS and React.js - Inspired by Calendly

Calendapp

Calendapp is a web application inspired by Calendly to allow users to schedule meetings more easily. We also utilize Google Calendar API to ensure there are no conflicts in your schedule.

Now deployed on heroku at calendappy.herokuapp.com

Tech Stack: MongoDB, Express.js, React.js, Node.js

Contributors: Raymond Lo, Jenny Kam

---

Getting Started

1. Clone or download repository

2. Run npm i in both client and root directories to install packages

3. Create your API Keys and .env files - See client and server sample.env for more instructions

   • client/.env file
   • .env file

4. To start the two processes, run npm start in the client directory, and npm run dev in the root directory

---

Demo

1. Login or Register with your Google Account. As a new user you will enter your availability to be scheduled for meetings (ex.9am-5pm, Mon-Fri) and to create a unique url to be shared with potential meeting attendees.

2. Share the unique link for a meeting type with others so they can schedule an appointment.

3. People who want to meet with you will be able to schedule an appointment. Appointments will be added to the invitee's and your google calendar, and an email notice will be sent to you.

---

Extra Features

1. Subscribing will allow users to create multiple event types, in addition to the default 60 minute meeting.

2. Create new meeting types after subscription

3. Cancel appointments. The event will also be removed from your google calendar and guests will be notified.

team-carbonara's Issues

FE: Onboarding Pages

There are 3 pages to onboarding

/profile_settings -> unique url and timezone

• check for uniqueness to continue
• storing timezone in UTC

/confirm -> confirmation of successful connect
/availability -> setting availability hours and days

Set up: Email API

Sendgrid

FE: Dashboard Skeleton

Create the skeleton for the dashboard page

• navbar
• main content

BE: Appointment Model

Create Appointment Model

Appointment

• meeting_id
• name
• email
• time (datetime)
• timezone

IN: Dashboard

Integrate user's meetings controller

BE: Availability Controllers GET /availability

Create a route that:

• Loads availability for given day (GET /availability?day=2342343243)
• Returns a list of available slots

Google Calendar API

• /freeBusy timeMin, timeMax

Each date you select, it’ll load the appointment slots available

[
{start_time: 2323234, end_time: 234234},
{start_time: 2323234, end_time: 234234},
{start_time: 2323234, end_time: 234234},
...
]

Add environment variables to CI/CD pipeline

Add environment variables to GitHub Actions or CircleCI

https://help.github.com/en/actions/configuring-and-managing-workflows/using-environment-variables
https://circleci.com/docs/2.0/env-vars/

BE: Modify User Creation route

on Creation of user, create an initial Meeting for a 60 min duration (this is default)

creating custom meeting time feature

IN: Email Confirmation

Send email confirmation after success of appointment. This may be dependent of ticket: #39

IN: Onboarding

After the onboarding routes for the backend and onboarding frontend is done, integrate

Setup: Stripe API

https://stripe.com/docs/api/customers/create

https://stripe.com/docs/payments/checkout/subscriptions

Set up a dev account and use the appropriate API keys set up for the app.

From the upgrade page, when user is directed to this checkout page, they will be able to upgrade their account

BE: Appointment Controllers

• CREATE /appointment -> Create an appointment
  • meeting_id, name, email, time (datetime), timezone
• GET /appointments -> list of appointments for logged in user

FE: Confirm Appointment

When time is selected, confirm time and schedule (create appointment BE)

• Not in mocks, create a dialog for confirmation

• Email

• Name

• Confirm button

FE: Scheduler Calendar UI

Frontend

• Block off unavailable days
• Preselect the next day
• Block off time that is unavailable for the user (appointment time slots blocked off state)
• When time is selected, confirm time and schedule (create appointment BE)

FE: Signup / Login Pages

• create two front-end react routers (login and signup)
• There is no landing page - redirect to signup

Add name to server/.env

Implement copy link button

Add name to server/.env

FE: Gating Features based on user type

Gating feature: creating new calendar
Standard: you only get the default

• You shouldn’t see “new meeting” button
  Premium: you can create as many calendar as you want
• FE: If not premium, hide new meeting button

Setting MongoDB

FE: Upgrade page

Upgrade your account

Ignore some information from the mocks. Instead have two blocks:

1. FREE STANDARD (this is by default) no need for payment
2. PREMIUM ACCOUNT (payment) -> leads to Stripe checkout page

IN: Unsubscribe Stripe

BE: Meeting Model

Create Model for Meeting

Meeting

• user_id
• duration (15, 30, 45) -> these are in minutes

BE: User Controllers

• GET /user/:id/is_unique?url=<> -> checks if url is unique amongst other users

• UPDATE /user/:id -> updates user information

Create README file

IN: Past Appointments

Past Appointments (Events)

Setting up Vault

Implement delete event type

BE: Meeting Controller

• CREATE /meeting -> Create a meeting
• GET /meetings -> list of meetings for logged in user

be: tokens fix

store tokens and expiry time from src/App.js user.getAuthResponse()
check gcal api requests

Add name to server/.env

Create final confirmation page

IN: Creating Appointments

After confirmation of appointment on FE, actually create the appointment

Add sample.env

BE: Signup / Login OAuth2

• https://developers.google.com/calendar/quickstart/js
• https://cloud.google.com/nodejs/getting-started/authenticate-users
• https://dev.to/risafj/beginner-s-guide-to-oauth-understanding-access-tokens-and-authorization-codes-2988

---

• Create User when authentication is success
• Save access token as session

FE: New Event Dialog

New dialog that allows you to create a new meeting for a specific duration

Frontend: Change timezone on calendar

On calendar view, have the ability to change your timezone.

On change, it should re-render the time availability based on the selected timezone.
For example, by default if my timezone is EST, then I see an available slot for 9am.
If I change it to PST, then it will rerender and now I see an available slot for 6am

How do i run this for server side?

When i run the client npm i then start i get an error after attempting to login (i get a proxy error between 3000 and 3001 local host.) I am not sure how to do the server part because their are no server folders. Thank you