dcsil / b2st-app

B2ST development app

Wellcome to B2ST!

Deployment and Production

• Deployed to Heroku automatically once CI is green on master, using github workflow heroku-deployment.ymml.

• Production is available with Heroku.

  • Client: https://b2st-app.herokuapp.com/

  • Server: https://b2st-server.herokuapp.com/

Demo Instruction

User Authentication

Sign up

• Click Register button on the top right.
• Type in your first name, last name, email address and password. make sure all fields are valid and all checkings are passed.
• Click Sign up, you will be redirect to dashboard page. Your email address will be shown on top right corner of the dashboard.
• If you already have an account, click "Already have an account? Sign in" to sign in.

Log in

• If you already have an account, Log in by type in your email, and the corresponding password.
• If logged in sucessfully you will be redirect to dashboard page. Your email address will be shown on top right corner of the dashboard.
• If you do not have an account, click "Don't have an account? Sign Up" to Sign up.

Log out

• If you are already signed in, Click on Log out button at the left side, you will be logged out and redirect to main page.

SMS

1. Pre: Get twilio credential if you want to test with your phone (Note: Twilio restrict trial account to send to unverified phone)
   • Go to twilio website and register for a trial twilio account, it should ask you to verify with your phone
   • Follow the instruction on twilio dashboard to get a twilio phone number
   • click on "messaging/service" on side bar, create a messaging service with your twilio phone number
2. In our repo, in "server/.env", fill up following environment variables:
   • TWILIO_ACCOUNT_SID: Account SID in your twilio account
   • TWILIO_AUTH_TOKEN: Auth Token in your twilio account
   • TWILIO_PHONE_NUMBER: My Twilio phone number in your twilio account info
   • TWILIO_MESSAGING_SERVICE: The messaging service sid you just applied with your twilio account
3. After you build and run the app, and logged in:
   • Go to Campaign page by clicking the side bar on dashboard
   • The first table is the contact table, you should saw a blank one.
     • Click on the "+" button to add a new contact linked to your account
     • You should saw a dialog pop up, on the dialog, fill up the name and the phone number of the contact
     • The phone number of contact is unique with each account and should be a real phone number
     • After fill out all the input, Click submit, If everything is good, you should see a green alert popup at left buttom
     • Click refresh to see the table updated
   • After having some contacts in contact table, you can click on some rows to select
     • Then, click on the "sendText" button, you will see a send text dialog pop up.
     • Fill out the message, and you can toggle with the "promotion code" button to decide if send the text with a random generated promotion code
     • Can also schedule a text in a range of 20 min after and 7 days from now
     • Click submit. If all texts send without error, you will see a green alert popup.
   • If you have sent some texts, you can click on "refresh" on the below table and should see some rows show up.

Stripe Authentication:

Note: Users do not need to create a Stripe account to make payment/subscribe. This section is only for developers!

• Create a Stripe account. The Stripe API uses API keys to authenticate requests. You can view and manage your API keys in the Stripe Dashboard.

• Test mode secret keys have the prefix sk_test_ and live mode secret keys have the prefix sk_live_. Use your API key by setting it in the initial configuration of stripe. The Node.js library will then automatically send this key in each request. You can update this API key by replacing /server/.env STRIPE_SEC string.

Revenue Model.

• After logging in, you will be redirect to dashboard page.
• By putting your mouse on the diagram, you will be able to check revenue for each day.
• You will see a default analysis with brand name “huawei”
• You can click on “add row” button to create a new row.
• The data provided to the machine learning model is currently based on the data we manually uploaded. We will make it dynamic after MVP level.

Plan Subscription

• You need to login as a valid user to subscribe our plan, If you are not, follow User Authentication section to register as our new user.
• Go to Dashboard, click on Plans button at the left navbar.
• Choose a desired plan. By clicking it, you will be redirect to a Payment page. This page is supported by Stripe.
• Check whether the email and the price is correct. If so, use 4242 4242 4242 4242 as test visa card to pay.
• By clicking Subscribe button, if this payment is success, you will be redirect to main page.
• Go to Dashboard, there will be an updated plan shown up on top right corner of you dashboard.
• You can change your plan at anytime by repeating the same process.

For developer

1. On macOs, install Docker/Docker Compose. Make sure docker daemon is running. If is LINUX, go to next step.
2. At root folder, run sh script/bootstrap. This will install the required dependencies for this app and run docker-compose up.
3. The web app should run at http://localhost:3000.

Project Setup

Front-end

We used CRA to create a React application in our /client directory.

Server

We setup a Node-Express server in our /server directory.

CI

We use Github Actions for our repo's CI, the setup can be found in ./github/workflows

Test

Run sh script/root and follow instructions. We are using Jest for testing our Javascript based app.

The tests are in: - ./server/tests for backend tests - ./client/src/tests for frontend tests

Datasets

We used datasets from Kaggle to train our marketing system which originated at the following links:

• https://www.kaggle.com/datasets/mkechinov/ecommerce-purchase-history-from-electronics-store
• https://www.kaggle.com/datasets/mkechinov/ecommerce-events-history-in-electronics-store

Other Details

• Configuration
  • Credentials are mostly provided by running script/bootstrap.
  • You can setup your own credentials in .env, or credentials will be copied from .env.example when setup.
  • For twilio credentials
  • Go to https://www.twilio.com/, sign up an account, create a message service
  • Fill in the TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN and TWILIO_PHONE_NUMBER, TWILIO_MESSAGING_SERVICE (provided by Twilio) in server/env
  • Add the phone you verified with twilio as TEST_PHONE in server/env
• Database
  • After setup with bootstrap, run docker-compose exec -it b2st-app_mongo_1 mongosh to access the local DB.

b2st-app's Issues

Homepage button and logout button now is the same.

Payment system

Server number should be wrapped into .env file

Add test for payment

• test for subscription page frontend and hooks
• test for sptripe api.
• test for plans' routes.

Business dashboard frontend component

Will setup frontend components of our business marketing dashboard, including:

• table, chart for campaign monitoring and promotion analysis
• login/signup
• profile page

Add test for sms and contact feature

• tests for sms route
• tests for contact route
• tests for sms page frontend and hooks

Some workflows have no defined timeouts or are not using ubuntu-latest

This repo has workflows that have no defined timeouts and/or are not using ubuntu-latest.

We use self hosted runners to avoid overage costs associated with GitHub Actions. However, we don't have a lot of workers to handle all of the load.
To ensure a single build doesn't spend hours and monopolize our workers, we limit each job to 20 minutes.
Please add a timeout to your jobs. We will disable your actions until you add them.

Your build may also be missing ubuntu-latest in the runs-on field.

Docs: https://docs.github.com/en/actions/learn-github-actions/workflow-syntax-for-github-actions#jobsjob_idtimeout-minutes
Example:

jobs:
  build:
    runs-on: ubuntu-latest # This is required
    timeout-minutes: 20 # Add this line here

Affected Workflows:

Workflow Path	Job	Re-enable
.github/workflows/gitjub-actions.yml	build-client	https://github.com/dcsil/B2ST-App/actions/workflows/gitjub-actions.yml
.github/workflows/gitjub-actions.yml	build-server	https://github.com/dcsil/B2ST-App/actions/workflows/gitjub-actions.yml
.github/workflows/heroku-deployment.yml	deploy-to-prod	https://github.com/dcsil/B2ST-App/actions/workflows/heroku-deployment.yml

frontend change with Login/Signup

Here are the current problems with our login/sigup frontend, violating 3.3.1 and 3.3.2 in WCAG 2.0 checklist Level A

• Lack input validation before sending request to server.

• The way error messages pop up is not very decent. Using MUI alert, or setting error prop in MUI input element will help.

• Hint text. It's hard for user to know how "complex" a password should be.

• Lack check for the checkbox

• Bad logout UI. Shoudl add to DashboardAppBar.

Check props of MUI input element, especially error, validator, and hintext.

Due is before Wed 11.30 11:59pm. But should complete subtasks stage by stage.

implement marketing system

Implement Machine Learning Algorithm to train on server, including predictions through API call

Fix Sentry recognition of missing datasets

    Haven't got dataset on my local so the orders chart doesn't show up and raised a server error. Others works fine.

Originally posted by @shang8024 in #64 (review)

Disabling GitHub Actions

Congratulations on finishing the course!

To make sure we have have workers for the next term, we have automatically disabled your repository's actions.

Feel free to make this repo public or fork to your own org, but we do ask that you leave a copy in the DCSIL org :)

This repo is nearing usage of GitHub Actions minutes

This repo is nearing the limit on Actions usage.

We have a limited number of GitHub Actions Runners. To ensure one team does not monopolize those workers we impose a monthly usage limit.
We impose a limit of 500 minutes per month.

You repo has currently used 313 minutes out of the allowed 500.
Once you reach 300 used minutes, we reach out to warn you that your workflows will be disabled at the 500 limit until the next month.

Please see if you can reduce your CI usage.
This could include caching, optimizing your CI flow, and pushing commits in bulk rather than 1 at a time (will run CI once for the batch instead of for each commit).

Plan differences should be showed at the front end.

setup Sentry

setup user authentication and authorization

setup local Mongodb

Add test for authentication

• test for authentication route
• test for login page frontend and hooks
• - [ ] test for signup page frontend and hooks

Some workflows have no defined timeouts or are not using ubuntu-latest

This repo has workflows that have no defined timeouts and/or are not using ubuntu-latest.

We use self hosted runners to avoid overage costs associated with GitHub Actions. However, we don't have a lot of workers to handle all of the load.
To ensure a single build doesn't spend hours and monopolize our workers, we limit each job to 20 minutes.
Please add a timeout to your jobs. We will disable your actions until you add them.

Your build may also be missing ubuntu-latest in the runs-on field.

Docs: https://docs.github.com/en/actions/learn-github-actions/workflow-syntax-for-github-actions#jobsjob_idtimeout-minutes
Example:

jobs:
  build:
    runs-on: ubuntu-latest # This is required
    timeout-minutes: 20 # Add this line here

Affected Workflows:

Workflow Path	Job	Re-enable
.github/workflows/heroku-deployment.yml	deploy-to-prod	https://github.com/dcsil/B2ST-App/actions/workflows/heroku-deployment.yml

Disabling GitHub Actions

Congratulations on finishing the course!

To make sure we have enough GitHub Actions minutes for the next term, we have automatically disabled your repository's actions.

Feel free to make this repo public or fork to your own org, but we do ask that you leave a copy in the DCSIL org :)

setup service.yml

This repo is nearing usage of GitHub Actions minutes

This repo is nearing the limit on Actions usage.

We have a limited number of GitHub Actions Runners. To ensure one team does not monopolize those workers we impose a monthly usage limit.
We impose a limit of 500 minutes per month.

You repo has currently used 313 minutes out of the allowed 500.
Once you reach 300 used minutes, we reach out to warn you that your workflows will be disabled at the 500 limit until the next month.

Please see if you can reduce your CI usage.
This could include caching, optimizing your CI flow, and pushing commits in bulk rather than 1 at a time (will run CI once for the batch instead of for each commit).

Fix LearnSoftware Bootstrap Error

Example of failure: https://learnsoftware.engineering/t/f2022/dcsil/teams/101/repos/238/bootstrap_checks/502

deploy web app to a production environment (heroku)

Improve CodeClimate Report

Fix code until grade of B at least is achieved overall for Code Quality.

Notes: we cannot skip rules to artificially enhance our score.

This repo is nearing usage of GitHub Actions minutes

This repo is nearing the limit on Actions usage.

We have a limited number of GitHub Actions Runners. To ensure one team does not monopolize those workers we impose a monthly usage limit.
We impose a limit of 500 minutes per month.

You repo has currently used 313 minutes out of the allowed 500.
Once you reach 300 used minutes, we reach out to warn you that your workflows will be disabled at the 500 limit until the next month.

Please see if you can reduce your CI usage.
This could include caching, optimizing your CI flow, and pushing commits in bulk rather than 1 at a time (will run CI once for the batch instead of for each commit).

Connect ML model to Frontend

Use API exposure of ML model to connect to frontend.

This repo is nearing usage of GitHub Actions minutes

This repo is nearing the limit on Actions usage.

We have a limited number of GitHub Actions Runners. To ensure one team does not monopolize those workers we impose a monthly usage limit.
We impose a limit of 500 minutes per month.

You repo has currently used 313 minutes out of the allowed 500.
Once you reach 300 used minutes, we reach out to warn you that your workflows will be disabled at the 500 limit until the next month.

Please see if you can reduce your CI usage.
This could include caching, optimizing your CI flow, and pushing commits in bulk rather than 1 at a time (will run CI once for the batch instead of for each commit).

Setup bootstrap script

upload test coverage to code climate

setup test infrastructure and CI system

Need to remove all tsx files

implement text sending and receiving

• integrate twilio

  • send text, receive text

• add function for regularly check incoming texts

• frontend page for sending text