Git Product home page Git Product logo

team-beluga's Introduction

CalendApp

Contributors

Tony Fang & Josh Liu

About

A clone of Calendly whitch allow the logged in user set availabilities and unique links for different event types, and allow the other users book appointments with the unique links.

Stacks/Technologies

  • Front-End: ReactJs, Material UI, React Calendar
  • Back-End: Flask, PostgreSQL
  • Sevices: Oauth, Google Calendar, Stripe, SendGrid

Online Demo

Features

Login

login

Sign Up

signup signup

Oauth

oauth

Log Out

oauth

On Boarding

  • Allow users to set profiles (unique url, timezone) and available dates & times

oauth

Create Event Type

create_event

Up Grade Account

  • Subscribe with Stripe, remain all step in origin site (never redirect to Stripe)

upgrade

Book Appointment

  • Fully connected with Google Calendar for displaying free times and create events.
  • Calendar only show user available dates and times.
  • Notification email will be sent once appointment is booked.

book_meeting

Appointments

delete_meeting

Create Event Type

create_event

Installation

  • Install dependncies:

    yarn install

    pipenv install

  • Additional Requirement:

    client_secrets.json under /server/util/auth/ from Google with following:

    {
        "web": {
            "client_id": <Google Client ID>,
            "project_id": <Google Project ID>,
            "auth_uri": "https://accounts.google.com/o/oauth2/auth",
            "token_uri": "https://oauth2.googleapis.com/token",
            "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
            "client_secret": <Google Client Secret>,
            "redirect_uris": [
                <Google Redirect Urls>
            ],
            "javascript_origins": [
                <Google Accept Origin Urls>
            ]
        }
    }

    .evn under root / with following:

     FLASK_ENV="development", 
     SQLALCHEMY_DATABASE_URI=<DataBase URI for SQLAlchemy>, 
     STRIPE_API_KEY=<Stripe api key>, 
     GOOGLE_CLIENT_ID=<Google Client ID>, 
     GOOGLE_CLIENT_SECRET=<Google Client Secret>, 
     GOOGLE_TOKEN_URL="https://oauth2.googleapis.com/token", 
     GOOGLE_API_KEY=<Google API key>
     GOOGLE_REDIRECT_URL=<Google Redirect Urls>
    
  • Environmnet:

    Python 3.7

    node v14.16.0

Usage

  • Front-End:

    in /client

    yarn start

    • Running on localhost:3000
  • Back-End:

    in /server

    flask run

    • Running on localhost:5000
  • DataBase:

    in /server

    flask db migrate

    flask db upgrade

team-beluga's People

Contributors

joshl579 avatar fangyu3 avatar sina-jamshidi avatar

Watchers

James Cloos avatar John Sciutto avatar

Forkers

joshl579 fangyu3

team-beluga's Issues

FE: Signup / Login Pages

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

BUG: creating event type missing field issue

  • When creating an event type, if we don't change the color and submit, it would give a missing field error alert.
  • Rerender cards after adding new eventType
  • edit create eventType dialog url InputAdornment

BUG: Error occurs when creating a second event type

There is no issue creating the first event. However, error occurs when trying to create second event.

From the output of terminal it seems the user_id is missing when creating the second event.

sqlalchemy.exc.DataError: (psycopg2.errors.InvalidTextRepresentation) invalid input syntax for type integer: ""
LINE 1: ...es (user_id, title, url, duration, color) VALUES ('', 'asd',...
^

[SQL: INSERT INTO event_types (user_id, title, url, duration, color) VALUES (%(user_id)s, %(title)s, %(url)s, %(duration)s, %(color)s) RETURNING event_types.id]
[parameters: {'user_id': '', 'title': 'asd', 'url': 'asd', 'duration': 30, 'color': '#3E200B'}]
(Background on this error at: http://sqlalche.me/e/14/9h9h)

BE: Store Google Auth Token

  • Store a user's Google Auth token in the User model to enable API calls to Google
  • Store user's refresh token, to get a new auth token if necessary

BE: Appointment Model

Create Appointment Model

Appointment

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

BE: Set up sendgrid

  • Sign up with email (or test email)
  • test it out (create a service that sends an email and test that it works)
  • share credentials on Slack

FE/IN: Create PrivateRoute

Create a wrapper around <Route/> that checks if the user is logged in and also hits a route in the backend to make sure the token is valid.
If the user is logged in and the token is valid, we go to the <Route/> that is passed in.
If the user is not logged in or the token is not valid, redirect back to /login

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

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},
...
]

BE: Signup / Login OAuth2

*https://developers.google.com/calendar/quickstart/js


  • Create User when authentication is success
  • Save access token, maintain logged in state on refresh
  • look for Flask JWT libraries

  • create a JWT, store it in a (httpOnly) cookie

  • decorator on the backend that checks whether JWT is valid

  • private route make an API call to check if JWT is valid and get the user back

FE/IN: Stripe checkout

Checkout page that takes card information and upgrades user to selected plan.
Or doesn't take payment information and downgrades user to selected plan

FE: Create alert context

Use Material UI Snackbar on success or error with desired message.
We want to be able to use a function like:
showMessage(messageString, messageType)
For example:
showMessage("Login Failed", "error")
showMessage("Event type created successfully", "success")

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/IN: Auth cleanup and enhancements

  • When user is logged in /signup and /login should redirect to the dashboard
  • Make the onboarding show up only once (check if user has their URL filled out, if they have their availability set)
  • Add logout button into a menu when clicking user in Navbar
  • Make logout button functional (it needs to hit a logout route in the backend)

BE: Event Types Model

Create Model for Event Types

Event Type

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

BE: Appointment Controllers

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

FS: Display Appointments

Fetch all future/past appointments (for next/last 30 days).
Display them on the frontend. Maybe with headings for future/past
Show delete icon for future appointments

IN: Onboarding

Integrate the onboarding pages:

  • connect URL textfield with user controller to check if URL is unique
  • add field to user model for timezone
  • add appropriate fields to the user model for availability

BE/IN: Cancel appointment

Make a backend route to cancel an appointment

  • delete calendar event
  • send confirmation email

Once display appointments is done, integrate with frontend

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

Material UI templates

FE: New Event-Type Dialog

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

  • Check Event Types model to see what fields we need. Add "tag_colour" to model.

BE: User Controllers

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

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

  • we are not going to allow editing email (obviously because we're using OAuth with calendar). But we are going to let them edit other parts of their profile (such as availability)

BE: Event Type Controllers

  • POST /event-types -> Create an event type
  • GET /event-types -> list of event types for logged in user
  • PUT /event-types/:id -> Edit
  • DELETE /event-types/:id -> Delete

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.