karleenmsrichards / final-project-gp2

My Final Group Project is BookMe which is a website that connects experts in various areas of work to customers. Experts signs up for a subscription, then adds their google calendar to their profile so that customers can book an appointment.

Hi, I'm Karleen 🙋🏾‍♀️!

I am very passionate about programming and I have a meticulous eye. I am also enthusiastic about UX/UI, AI technology and Product Management.

Check out my projects 💼!

PORTFOLIO

Let's Connect ⛓

✉️ [email protected]

Tech Stack

My Stats

final-project-gp2's Issues

Optional Task: Add npm audit for security scanning

Concepts

• Look up this web page https://github.com/sonatype-nexus-community/auditjs
• NPM audit scans nodejs for security issues in packages
• This is similar to eslint but instead of style errors it returns a list of npm packages with security issues

Sub Tasks

• Install auditjs locally https://github.com/sonatype-nexus-community/auditjs#installation
• Run a security scan
• If any security issues are found please report to the team
• We will need to make new tasks to fix the security issues
• If no issues this task is done

Create ORM Doc

• For postgres we will use a managed instance https://www.elephantsql.com/plans.html

Epic: Landing Page - Contact Us Link

Given I am a user
When I go to the landing page
Then I should see a Contact Us Link with a link to the Contact Us page

Authentication Spike

Spike Story to investigate options available for App authentication. Time boxed activity terminating on 24 July 2023

Google Calendar Integration Spike

Epic: Landing Page -Search Component

Given I am a user
When I see the landing page
Then I should see a search section.

(It's included Location / Date / Time / Service and arrow button)

Epic: Landing Page -LogIn Button

Given I am user
When I see the landing page
Then I should see the login button prominently and easily on the site.

As a potential client, I want to easily navigate the service provider website landing page to quickly be able to find the login button on the top right as I am used to

Authentication Spike

Epic: Landing Page -Experts Loves By Customers

Given I am a user
When I see the landing page
Then I should see a section for highlighting experts which I can trust them.

As a small business owner, I want the landing page to highlight the service provider's expertise, certifications, and awards, so I can trust that they have the necessary skills and qualifications to meet my business needs.

Task 1: Farzaneh - Sequelize

Sequelize Data Model
Database user role
Data Migration

EPIC: Landing Page - View Landing Page

Given I am an unauthenticated User
When I navigate to the landing Page
Then I should see the landing page

Tech Details:

• Setup a react project (use KArleen's repo)
• Set up the CSS framework
• Deploy it
• Get some base text to show
• Favicon

Decide on frontend CSS Framework

• Tailwind
• Bootstrap
• Material UI

Task12: Front End static grid showcasing various services

Based on the mockup . static 6 images with text.

Task: Send JWT and email to node

Tech:
Create a function that sends user email and jwt token to the node.

Epic: Embedding the Scheduling

This epic needs to be determined and crosschecked against the outcome of the first 2 epics #40 #39

Choose a team name

Epic: Landing Page - Hero Image

Given I am a user
When I see the landing page
Then I should see a hero image with title and text on it.

Spike Story for Google Meet Usage For Project

Spike story with time boxed research activity terminating 24 July 2023 on utilisation of Google meet integration into the APP for automated meeting ID generation on a booking/ reservation made by client/customer

Task: Sign Out Button and Send Token to Node

Given I am an authenticated user
When I click the sign out button
Then I see a sign out message

Tech:
Create sign out button and functionality to sign out users
This will delete the apiToken in localstorage.
Create a function that sends jwt token to the node.

Task1: Karleen- Authenticate with Google

Feature: User Authentication and Login with Google

Scenario: Unauthenticated user clicks sign-in button and fails Google sign-in
Given I am an unauthenticated user
When I click the sign-in button
And I am unable to successfully sign in or create an account with Google
Then I see the homepage

Scenario: Unauthenticated user clicks sign-in button and successfully logs in with Google
Given I am an unauthenticated user
When I click the sign-in button
And I am able to successfully sign in or create an account with Google
Then I see the dashboard

Scenario: Authenticated user returns to the webpage and remains logged in
Given I am an authenticated user
When I leave the webpage
And I come back to the webpage
Then I am still logged in

Technical Task:
Authenticate with Google
Receive the token
Save the token in the browser
Configure redirect url to dashboard

Epic: Landing Page - SSL Certificate Link

Given I am a user
When I go to the landing page
Then I should see a link to the SSL Certificate

Epic: Landing Page - Tabs

Given I am a user
When I see the landing page
Then I should see some Tabs in the header such as Find / Book / Pay which are links to their page

Epic: Landing Page - Header Component

Given I am a user
When I see the landing page
Then I should see a header.

Currently we are incorporating a login button on the top right and a logo on the top left of the Header

Edit home Button

Home button showed the dashboard button even when logged out. the dashboard button should only show when the user is logged in

Epic: Landing Page - Categories Link

Given I am a user
When I go to the landing page
Then I should see the categories link with a link to the categories

Epic: Landing Page- Footer Element

Given I am user
When I see the landing page
Then I should see the footer at the bottom which gives me information about contact, about the company, terms and conditions, how my data is used, where your company is located, any associations you are a part of.

As a potential client, I want to easily navigate the service provider website landing page to quickly do my due- diligence to understand if I trust your website

Epic: Landing Page - Call to action

Given I am a first-time user
When I go to the landing page
Then I can see the call to action button.

Epic: CYF Day 1 Tasks to do. Miro Board

Day 1 Tasks. Part of the CYF requirements

Epic: Authentication Journey- Display Authentication Home Page

Given: I am an unauthenticated user
When: I go to the home page
Then: I see the authentication page with Google

Given: I am an unauthenticated user
When: I am on the Google authentication page
And: I authenticate with a valid Google account
Then: I go/ redirected to the website Dashboard

Given: I am an unauthenticated user
When: I am on the Google authentication page
And: I authenticate with an invalid Google account
And: I cancel
Then: I get redirected to the authentication page.

Based on Google authentication, we may get Name, email and contact telephone number. to be finalised.

Epic: Becoming a Service Provider

Given: I am an authenticated user
When: I am on the dashboard
Then: I can see the button for "Sign Up as a Provider"

Given: I am an authenticated user
When: I click on the sign up as a provider
Then: I can select the Subscription Level on the Subscription Page and confirm button

Given: I am a subscribed user and chosen the subscription
When: I am redirected to the Supplier Profile Form where I can fill the required fields
And: I can see the button for "connect my google calendar" and I authorise
Then: The calendar is added and after clicking submit can access the full functionality of the app.

Create Miro Value to Effort matrix in Miro

Project Mock-Ups

Site Mock Ups Provided by PO

Home Page

Search Results

Supplier Dashboard

Checkout Page/ Booking Page

Customer Dashboard

Task1: Tony- Node JS Server

Create the user end point
check the token is valid. if not send it to the unauthorised page
add the routes
swagger

Epic: Landing Page - Facebook Link

Given I am a user
When I go to the landing page
Then I should see Facebook icon with the link to Facebook page

test

test

#13 Decide on Frontend CSS Framework
#2 Authentication Spike

Task 11: Front End Hero Component

Create the hero element with the text as mentioned in the mock ups. Currently not doing the search component.just the hero

Authentication Spike

Epic: Landing Page - Locations Link

Given I am user
When I see the landing page
Then I should see the locations link with a link to all locations.

As a potential client, I want to easily navigate the service provider website landing page to quickly find the services offered and understand how they can address my needs.

Epic: Landing Page - Trust indicator secirity badge icon

Given I am a user
When I go to the landing page
Then I should see a trust indicator security badge icon

Integrate Google Calendar

Spike Story for Integrating Google Calendar. A time box exercise terminating EOB 24 July 2023

Task1: Hengameh- Create React Library for handling a user

Make a function to check if user has logged in or not. Simple unstyled component that gives feedback to the user like "You are logged in"/ "log in"
reading the session token from the store
making it is secure

Create wiki with key Agile concepts

Google Doc made here

https://docs.google.com/document/d/1fzoRQ0ApU7pUGBMRNHQr6-B39PrkwfBh-9JtM1hNFPo/edit?usp=sharing

Epic: CYF Day 1 Tasks to do. Miro Board

Day 1 Tasks. Part of the CYF requirements

Investigate Security and Compliance

Epic: Landing Page - Twitter Link

Given I am a user
When I go to the landing page
Then I should see Twitter icon with the link to Twitter page

Task 10: Front End Header Component

Edit the header component to add
Logo
Find
Book text
and edit the sign in button to say SignUP/ SIgnIN instead

Optional Task: Add eslint into github actions

Concepts

Github Actions: Everytime you push code to github it run tasks and gives you the results.

• Look atn this article for mayve 30 minutes https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions it is deep, we just need the overview
• Look up the linux concept of $? see https://shapeshed.com/unix-exit-codes/
• Basically every terminal command returns a code which you access from the terminal with echo $?
• 0 is good, any other number is bad
  YAML: An alternative to JSON

Google these concept and try and get an understanding

What to do

• Make new folder named .github/workflows in the root folder
• add a new yaml file called eslint.yaml

on:
  push:
name: example
jobs:
  lint:
    name: run lint
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: install dependencies
        run: npm install
      - name: run lint command
        run: npm run lint

• go to this link https://github.com/karleenmsrichards/final-project-gp2/actions/new
• the eslint will run on this page every time you push to any branch
• The above code may not work

Notes

Any questions add here

Create Sequalize Prototype

Sequelize Repo: https://github.com/Tony-devops/test_sequalize
Please clone

Epic: Landing Page - Review

Given I am a user
When I see the landing page
Then I should see reviews from previous clients.

As a potential client looking for credibility, I want to see testimonials and case studies on the landing page to understand the experiences of previous clients and the successful outcomes they achieved.

Decide on AWS Serverless or Nodejs