DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Mike Landers
Mike Landers

Posted on

Labs Week 5: A Review

And that's a wrap!

Training Bot

Lambda Labs has been an absolute wonderful experience and I couldn't have asked for a better team to work with.

The last week of our project was all about polishing and getting the app finalized. Last week I thought that this would be a pretty easy week. I was surprised as we went through the week there was more and more work to complete. They either seemed to be small styling issues or a realization that we should have written an entire part of the app another way. I guess that just comes with writing version 1.0 of an app. Just need to get something out the door and then build on it.


This week the big item I worked on was setting up our app to disabled the add team member button or save button when editing a team member if the phone number isn't a full 10 digit number. Due to the way I had originally setup the phone number format it I wasn't able to do the validation of the number on the front end. I did enjoy writing the following regex to disable the button if no required phone number was present.

  let addDisabled = false;
    if (
      /^$/gm.test(this.state.teamMember.phoneNumber) === true ||
      (/\+1 \(\d{0}/gm.test(this.state.teamMember.phoneNumber) === true &&
        /^\s*(?:\+?(\d{1,3}))?([-. (]*(\d{3})[-. )]*)?((\d{3})[-. ]*(\d{4})(?:[-.x ]*(\d+))?)\S*$/gm.test(this.state.teamMember.phoneNumber) === false)
    ) {
      addDisabled = true;
    }

The first part checks to see if the phone number string is empty and if so disabled will be true. The second part checks for the form string to be there but empty. The last one checks that all 10 digits have been entered.

I'm sure there is an easier way to do this and may go back to it later to simplify and get proper phone validation on the front end. Alex was able to get validation for the phone number on the backend so that when they are sent to Twilio it doesn't crash our server.


This last week had it's challenges. Looking back though I have a feeling what we experienced was pretty common. We felt really good going into the week and during the week it just felt like one thing after another was cropping up. From styling issue caused by a mix of Material-UI and Styled Components to changing a component key to something that wasn't original that caused a list item to duplicate. I will say that is the first time when mapping over an array a key causing an issue. I think mostly because I either forget to add a key and ignore the warning or the item I'm mapping over includes an id, which this one didn't.

Looking back over the last 5 weeks I'm extremely proud of the work our team put in to making this app. Many learning experiences from reading others code the entire planning process for an application of this scale.

Thanks to Nate for our apps amazing video.


Training Bot

Training Bot


GitHub PR's

Code cleanup #155

mlanders avatar
mlanders commented on Apr 18, 2019

Cleared all notifications in console and on the yarn start.

Chrome dev tools audit: 100% Accessibility, 100% SEO, 93% Best Practices


Profile pricing & restricted pages #144

mlanders avatar
mlanders commented on Apr 17, 2019

Updated pricing page and pages that are restricted when logged out such as https://trainingbot-dev.netlify.com/home/


Pricing page & phone number regex #137

mlanders avatar
mlanders commented on Apr 17, 2019

Forgot to create a new branch for these.

  • Landing page links to pricing page.
  • Pricing page includes a basic chart
  • When adding a phone number to a new team member the add member is disabled until a valid number is entered or none is added.
  • When editing a team members phone number the save button is disabled unless a valid number is entered or none at all

phone numbers formatted on notifications page #136

mlanders avatar
mlanders commented on Apr 17, 2019

Phone numbers on notifications dashboard are now formatted


GitHub Repo

Training Bot

Training Bot

A single page application using the Twilio API to send automated text and email notifications. Training Bot assists team leaders by sending automated notifications with custom content to their team

Demo

Here is a working live demo: https://trainingbot.netlify.com

Site

Dashboard

The central location of our App. Here you can see all of your team members, training series, and outgoing/sent messages.

Team Members

You'll store all of your members here. This information will be used to send the notification to that specific member

Training Series

Training Series contains all of your content and assigned members

Profile

The profile section is where you can view/delete your account as well as upgrade your account.

Mobile support

Training Bot is compatible with devices of all sizes and all OS's.

Usage

Development

  • Fork the repository
  • Create a new branch (git checkout -b improve-feature)
  • Make the appropriate changes in the files
  • Add…

πŸ’¬ Training Bot API πŸ’¬

Introduction

Training bot allows managers of teams to send notifications to their teammates on a predefined schedule.

Table of Contents

Overview

What is Training Bot? πŸ€–

Training Bot is a learning application that lets a team leader create a series of trainings and deliver them at a scheduled time via text or email to assigned learners. The user will be able to add members and assign them to a scheduled set of trainings with a start date. Each training will have a title, text body, and link. They should be small…

Top comments (0)

Super Useful CSS Resources

>> Check out this classic DEV post <<