Coder Social home page Coder Social logo

erikplachta / calendari Goto Github PK

View Code? Open in Web Editor NEW
4.0 4.0 2.0 5.96 MB

MERN SPA PWA Scheduler Concept App using GraphQL

Home Page: https://calendari.erikplachta.com/

License: MIT License

HTML 0.86% Shell 0.08% CSS 13.34% JavaScript 85.72%
apollographql graphql mern mern-stack

calendari's Introduction

calendari's People

Contributors

dependabot[bot] avatar erikplachta avatar mmlawton15 avatar nicavulcan avatar

Stargazers

avatar avatar avatar avatar

Watchers

avatar

Forkers

mmlawton15 nicavulcan

calendari's Issues

P0: Build MVP Models

Build Models with MVP in mind, making non-necessary values as the default value of NULL

@mmlawton15 is going to tackle this upfront

TODOs

  • User
  • Business
  • Appointment
  • Appointment_Type

Schema Notes

  • User

    • Anyone that can sign into the app.
    • Schema:
      • _id
      • name_first
        • String
        • Required
      • name_last
        • String
        • Required
      • username - What your name previews as to others
        • String
        • Required
      • emailEmailRequiredUnique
        • password_salt - Their unique password salt created at time of user creation
        • Required
        • String
      • password_hash
        • Required
        • String
        • Their password after being salted
      • verified - User has verified their account
      • date_Created - Account created
        • DateTime
        • Auto-Generated
      • date_Login - Last Login
        • DateTime
        • Auto-Updated on login
      • user_calendar - Association to users calendar
        • Array
          • Type Internal / Google
          • Name
          • DateTime - availbiliy
      • Appointments - relation to appointment data type
        • Array
          • Type Internal / Google
          • Name
          • DateTime - availbiliy
      • business_id - Association to business
      • account_id - The state of their account
      • user_type_id - Association to user type

  • Business

    • A Business is the parent of all users. A business has a primary account associated with it, contains Appointments, Contains Users, and contains a Calendar for managing Appointments based on user.
      • _id
      • name
        • Internally your name
        • String
        • Required
      • brand_name
        • What customers see
        • String
        • Required
      • business_logo
      • Settings
        • All account specific options
        • Obj
        • Relation
      • Configuration
        • Unique system-specific options
        • Obj
        • Relation
      • Appointments_Type
        • Array
        • Relation
      • Appointments
        • Array
        • Relation
      • Users
        • Array
        • Relation
      • admin_user_id

  • Appointment

    • All Existing Appointments
    • Schema:
      • id
      • user_id
      • business_id
      • Appointment
        • Obj containing appointment details
        • Name
        • Duration
        • Date
        • Start Time
        • End Time
        • Universal time-zone
      • Client
        • Obj containing client details
        • Name
        • Email
        • Phone
        • Summary
        • timezone
      • status
        • Scheduled
        • Completed
        • Canceled

  • Appointment_Type

    • id
    • user_id
    • business_id
    • Appointment_Details
      • Obj containing appointment details
      • Name
      • Email
      • Phone
      • Summary
      • Duration
      • Date
      • Universal time-zone

P03: Signup Form Validation

Add Validation to the form values within the Client

  • Unique Values
    • Business
      • brand_name
      • User
        • username
        • email
  • All inputs have proper messages / instructions
  • Focus to proper input on load

P03: BUG: Cannot Create New User/Account

After downloading the most up-to-date main/develop branch content, I was unable to create new users.

Issues

1. Typo

When trying to create a new account, the mutation ADD_USER, GraphQL was throwing an error regarding the mutation ADD_USER and value busienss_brand_name

Problem/Resolution: busieness_brand_name and should be business_brand_name according to server/model/user.

  • Fix typo in Client mutation ADD_USER
    • Change busienss_brand_name to business_brand_name
  • ISSUE: VARIABLE NAME MISMATCH: Trying to use

2. Variable Mismatch

User Model value name of business_brand_name and Business Model value name of brand_name is creating conflict between the CLIENT and the SERVER preventing a user from being created properly.

  • Update CLIENT to use variable brand_name for mutation ADD_USER
  • Update SERVER to request brand_name in place of business_brand_name
  • Test: Good

Phase 0: Build Project Framework

Draft content

Notes below are subject to change, incomplete, and not a true representation of the idea.

Phase 0: Build Project Framework

All Basic Project Requirements are Completed, allowing for clear workload division.

This is completed when...

1. Repo is Setup

  • 1.1 GitHub Created
  • 1.2 Everyone has access
  • 1.3 Pushed framework

2. All project-requirement App framework is built in the App

  • 2.1. Model / MongoDB
    • Models Defined
    • Config Setup for Local DB
  • 2.2. Controller / Server
    • Node Server
    • GraphQL connected to models
      • Schema
        • index.js
        • resolvers.js
        • typedefs.js
    • Config > connection.js
    • Utils
      • auth.js
    • GraphQL connected to models
  • 2.3. View / Client
    • MVP React App
    • Utilities Onboarded
      • mutations.js
      • queries.js

P04: Client/Business Page - Send Email of Specific Schedule Link

When a User is signed in to their account, they are able to send an email to a Client containing a Direct Link to a specific scheduler. When that link is selected, the Client is able to fill out the details.

  • Add Page for Selecting Appointment Type
  • Add ability to send email to a Client

P0: Build Server Schema with MVP for GraphQL

GraphQL is onboarded for the Server in collaboration with the Schema

@NicaVulcan is managing this one

See #14 for context on the schema

TODOs

  • User
    • typeDefs
    • resolvers
  • Business
    • typeDefs
    • resolvers
  • Appointment
    • typeDefs
    • resolvers
  • Appointment_Type
    • typeDefs
    • resolvers

P03: Client/Appointment Management Page

When an Appointment exists in the Database, then the Appointment page can be used to verify or manage an existing appointment.

  • Loads after the appointment creation is finalized
  • Can be loaded via the URL at any-time
  • Contains appointment payload
  • Can be pulled via the API

@ErikPlachta Concept Notes 👇🏼

Props (business, appointment_id)

  • business: Takes business_id or business_name to validate the appointment ID
  • appointment: Take appointment_id, to validate with business_id
export default function Appointment(business, appointment) {
  //-- Can be the busines_id or the business_name
  const business_Id_Name = business;
  //-- The ID of the specific appointment for the business above.
  const appointment_id = appointment;

  return (
    <div>TODO:: ADD CONTENT</div>
  )
}

Logic concept

  1. Take URL Params and run an API Call
    1. Check for business in database
      1. business can be business_id or business_name
    2. Check for an appointment_id in database
  2. Evaluate Accordingly
// if arguements not provided
  if(!business_id || !appointment_id){
    re-direct to page stating does not exist
  }

  // if business_id or business_name do not exist
  if(!business_id || !business_name) {
    re-direct to to business does not exist page
  }

  
  // if the busines_id or business_name contains the appointment ID, return page to manage
  if( ( business[business_id].appointments ) contains appointment_id || business[business_name].appointments ) contains appointment_id ){
      - return page with appointment to either verify, cancel, or re-schedule
  }
  
//-- if it got here somehow, re-route to app homepage

P0: Model Framework Concept

@ErikPlachta writing out the Schema Design Idea WIthout Concern for MVP to get the Idea out.

Notes below may be incomplete, inaccurate, and are draft quality at best. Not meant for anything beyond a strategic conversation.

  • System
  • Business
  • User -
  • User_Account - All Users have an Account Type associated with them.

Schema

System

Log

  • id
  • type
  • payload - The message to be logged
  • date_time
  • user_id
  • business_id
  • appointment_id
  • calendar_id
  • calient_id

Log_Type

  • id
  • name
  • description

Ideas

  • Business_Log
    • A broad collection of activities related to Businesses for internal admin-related purposes. As events happen the System automatically will record them here.
  • Appointment_Log
  • User_Log
    • A broad collection of activity related to users for internal admin-related purposes. As events happen the System automatically will record them here.

Business Related Specifics

Business

A Business is the parent of all users. A business has a primary account associated with it, contains Appointments, Contains Users, and contains a Calendar for managing Appointments based on user.

  • _id
  • name
    • Internally your name
    • String
    • Required
  • brand_name
    • What customers see
    • String
    • Required
  • business_logo
  • Settings
    • All account specific options
    • Obj
    • Relation
  • Configuration
    • Unique system-specific options
    • Obj
    • Relation
  • Appointments_Type
    • Array
    • Relation
  • Appointments
    • Array
    • Relation
  • Users
    • Array
    • Relation
  • admin_user_id

Appointment

All Existing Appointments

Schema:

  • id
  • user_id
  • business_id
  • Appointment_Details
    • Obj containing appointment details
    • Name
    • Email
    • Phone
    • Summary
    • Duration
    • Date
    • Time_Start
    • Time_End
    • Universal time-zone
  • Status
    • Scheduled
    • Completed
    • Canceled

Appointment_Type

Schema:

  • id
  • user_id
  • business_id
  • Appointment_Details
    • Obj containing appointment details
    • Name
    • Email
    • Phone
    • Summary
    • Duration
    • Date
    • Universal time-zone

User

Anyone that can sign into the app.

Schema:

  • _id
  • name_first
    • String
    • Required
  • name_last
    • String
    • Required
  • username - What your name previews as to others
    • String
    • Required
  • email
    • Email
    • Required
    • Unique
    • password_salt - Their unique password salt created at time of user creation
    • Required
    • String
  • password_hash
    • Required
    • String
    • Their password after being salted
  • verified - User has verified their account
  • date_Created - Account created
    • DateTime
    • Auto-Generated
  • date_Login - Last Login
    • DateTime
    • Auto-Updated on login
  • user_calendar - Association to users calendar
    • Array
      • Type Internal / Google
      • Name
      • DateTime - availbiliy
  • Appointments - relation to appointment data type
    • Array
      • Type Internal / Google
      • Name
      • DateTime - availbiliy
  • business_id - Association to business
  • account_id - The state of their account
  • user_type_id - Association to user type

User_Account

All Users must have an Account Type. Used for tracking user Account Types like memberships, trial accounts, closed accounts, and things related to this.

Using a DB to hold this information to ensure it's easy to access, manage and update. Won't be changed a lot but contains vital info.

This is all data we would seed, not filled in by users. Eventually, we'd want to have a front-end we can use to manage the app if it were a legit business. For now, seeding from the CLI is good.

  • _id
    • MongoDB
  • account_type - Contains name for account type
    • String
    • Required
  • summary
    • String
    • Required

Examples of Types of Accounts

  • Active Free - No customization. All user experience has our app branding 100%.
  • Active Basic - Limited options. Some custom branding.
  • Active Premium - Full customization. Little to no branding from our App._
  • Trial - Basic account for x days
  • Closed - Trial expired, sub ended
  • Suspended - We banned username

User_Type

Role-specific permissions.

Similar to User_Account, holds data for the app to access. And can be managed by CLI for now.

  • _id
  • name
  • summary - explaining what it is
  • systemFullAdmin - Can do everything
  • systemUserAdmin - Can edit all business data
  • systemUserAdmin - Can edit all user data
  • systemBot - Performs logging and automated things related to non-critical systems
  • business - Can edit user-specific business info
    • bool
  • appointment - can edit business-specific appointment info
    • bool
  • user - can edit business-specific other users info
    • bool
  • calendar - Can view the calendar and appointment details

Examples of User Types

  • Internal
    • Bot
      • Automated events that bots would perform, like messages to customers with accounts
      • system: true
      • business: false
      • appointment: false
      • user: false
      • calendar: true
    • SysAdmin
      • App owners accounts
  • External
    • Owner
      - Owner of business account
      - Full business admin rights
    • Manager
      - Has permissions to control all things except for business.
      - business: false
      - appointment: true
      - user: true
      - calendar: true
    • Employee
      - business: false
      - appointment: false
      - user: false
      - calendar: true
    • Client
      - Customer making appointments
      - No account Creation happening here just log of details

user_calendar

  • id
  • type
    • internal
    • external/google
  • name
    • internally
  • display_name
    • to customer
  • date_time
    • Array
      • Days of week
      • Start / End Times

P0: Define Concept and User Story

TODO

  • Erik write
  • Reviewed with Team
  • Mary to review and then add to readme on #13 then close this Issue

Overall Concept

An online appointment management system that automates Creating, Updating, Canceling, and overall communication to our customers and their clients. Our customers have a unique login, URL, and the ability to customize their availability, appointment types, Business Name, and overall styling to create a unique customer experience that fits their needs.

User Story

When a User wants to provide an Online Scheduling solution to their customers

  1. WHEN a User creates an account, THEN they're able to define their business details, and availability for appointments.
  2. WHEN a User creates an appointment type, THEN they are able to define all of the appointment details.
  3. WHEN an appointment type is created, THEN it can be published to make it available to a public URL.
  4. WHEN a User's customer schedules an appointment from the shared link, THEN the User's customer selects their appointment type, fills in the details, and approves the appointment.
  5. WHEN a Users customer finishes the appointment, THEN User and their customer are sent an email confirmation.

When a User Creates an account

  1. Users can create new accounts for their business to simplify online management.
  2. WHEN User creates a new account, THEN can use Google to signup or fill in the basic information manually.
  3. WHEN you sign in, THEN you're routed to your Business Management dashboard
  4. WHEN account configuration is incomplete, THEN your Dashboard will guide you to a resolution.
  5. WHEN setting up your account, THEN you will be required to do the following before your Scheduler will become availble.
    1. Confirm your Business Details
      2. Verify your Business Name as it appears to a customer
      4. Define your Business Hours
      6. Define your Business Contact Phone Number
      7. Define your business Contact Email
    2. Setup your Calendar ( optional )
      1. User has the option to link to Google Calendar
      2. User has the option to NOT have a calendar
      • When customers request appointments, an email is sent off the request with no calendar association.
    3. Setup your Appointment Details
      1. Define global Date-Time availability
        • Affects all appointments by default unless otherwise specified.
      2. Select at least 1 Appointment
        • User was presented with a few basic templates.
        • When selected, the user can define the dynamic details of an appointment.
  6. Optionally, you can also do the following
    1. Configure your User Account
    2. Create new Users

P0: Client - Build Hardcoded Data Payloads

P0: Client - Build Hardcoded Data Payloads

To build hardcoded JSON payloads for each component to allow quick and easy testing without needing the server to be configured.

@ErikPlachta handling this one.

  • Business
  • User
  • Appoitnment
  • Appoitnment_Type

P0: Build API Framework

All API Framework for App is Built and Functional with

Scheduler

https://www.appname.com/s/:BusinessName/

A Public URL

These are public URLs to allow scheduling with people.

Each users must choose a unique Business

https://www.appname.com/s/:BusinessName/:AppointmentId

To scheduler an appointment you need to use the users Business URL.
These are the links to share with their customers to make appointments
AppName.com/s/id:BusinessName/
root businesss scheduler page
AppName.com/s/id:BusinessName/id:type
unique business type

F: Add Testing. Then onboard CI. Then CD.

When branches pushed to develop and main, CI execution runs to verify integrity of all tests

Testing - jest.js

  • Login
  • Signup
  • Schedule
  • User CRUD
  • Business CRUD
  • Others?

CI - evaluate.yml

  • Develop
  • Main

CD - deploy.yml

  • On a test environment
  • On live environment

Phase 4: Polishing App

Phase 4: Polishing App

Overall cleanup, adding features that feel like they're "missing", simplifying, and making the app feel complete.

P03: Login updates NAV with brand_name for Scheduler and Business

When a user is logged in, the navigation is updated with direct links to the business VIA the business brand_name

  • Update JWT to pull brand_name from a User on login
  • Update NAV to populate links with this value
  • Verified integrity locally: good
  • Verified integrity on the cloud: good

NOTE: The resolution was made possible via the work on #66

P05: Model - Users have unique Password Salts

When user accounts are created, a unique Salt is Generated for them to hash their password. That unique Salt is stored in the User Model.

  • Add password_salt to user model
  • Add a hook to create this before creating password_hash
  • Add logic in password_hash hook to grab THIS salt to generate it instead of the one in .env

We can use bcrypt for this.
Originally posted by @ErikPlachta in #21 (comment)

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.