DEV Community: Mike Landers

Gapful Numbers

Mike Landers — Wed, 04 Sep 2019 16:00:15 +0000

Simple code challenge in Python

First Community Project

Mike Landers — Mon, 22 Jul 2019 16:33:47 +0000

Over the past weekend I participated in my first community project with a bunch of devs I've never met before.

Saturday

Showed up around 9:30am at SkySlope. The organizers of the project first discussed the project and their idea of how we could organize around 20 devs across all aspects of the project. We had a small DevOps team who got the database setup on AWS and built the database structure using SQL.

I was on the backend team that handled building out the routes, logic, and sql queries. We had about 10 people working on the backend over the course of the weekend. Pretty early on we decided to use Node as the majority of the team knew it. A more senior dev in the group started to stand up a Loopback server but it ended up being a bit more complex for the everyone to learn and use in a weekend. The decision was made to switch over the Express as it's much easier to work with and get a 0.1.0 project up and running quickly.

The front end team was also a larger team of devs and UI/UX people. They created some great designs and started building out the application in React.

Sunday

Much smaller team showed up on Sunday. Backend team consisted of about 5 people. Early on we distributed the workload across the team to complete the routes and make sure all the GET routes were working. Near the end of the day we got some POST requests working and started to narrow down the GET SQL queries so they didn't return all data but rather just the data that was needed.

It was a great experience learning the terminology and structure that a larger company and more senior devs use. There wasn't much formality on code structure or how to commit but we got a good amount of work done. I plan on working on the project over the next few weeks in hopes we can get the project ready to use for the city.

Labs Week 5: A Review

Mike Landers — Fri, 19 Apr 2019 17:43:37 +0000

And that's a wrap! [Training Bot](https://www.trainingbot.co)

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](https://www.trainingbot.co)

GitHub PR's

Code cleanup #155

mlanders posted 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

View on GitHub

Profile pricing & restricted pages #144

mlanders posted on Apr 17, 2019

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

View on GitHub

Pricing page & phone number regex #137

mlanders posted 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

View on GitHub

phone numbers formatted on notifications page #136

mlanders posted on Apr 17, 2019

Phone numbers on notifications dashboard are now formatted

View on GitHub

GitHub Repo

training-bot / labs11-trainingBot-FE

Front-end repo for Training Bot, an app that allows training managers to send employees automated messages.

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…

View on GitHub

training-bot / labs11-trainingBot-BE

Back-end repo for Training Bot, an app that allows training managers to send employees automated messages.

💬 Training Bot API 💬

Introduction

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

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…

View on GitHub

Labs Week 4: A Review

Mike Landers — Fri, 12 Apr 2019 16:56:52 +0000

This week was all about the user experience. Started off on Monday with a hard discussion regarding the user experience and lack of flow through our app. We all stepped back and took off our developer hats and put on our user hats to finally step back and discuss how a user actually goes through the app. We brought a friend to do go through the app and talk their way through how they were using the app. This was the eye opening we all needed to help us refocus our efforts for the rest of the week.

I had a couple big winds this week. First is the profile page. With the help of Alex, it received a couple big updates. Fully responsive, a new pricing guide and a slick payment interaction

When you select a payment option it adds a nice animation and once the payment has been accepted it switches your plan in bot the guide and on the left on the profile card.

iPad	iPhone Large	iPhone Small

The second big win this week was making the main dashboard fully responsive. This required manipulating multiple components. Styles needed to be adjusted using Styled Components as well as Material UI styles.

Getting the dashboard fully responsive was a little challenging. Being able to get all three cards to adjust appropriately as you shrink the window down wasn't as easy as I had anticipated. At one point the cards were getting smaller but snapping to a smaller size and not being fluid. After some tweaking of styling across 4 components I was able to make all the cards fluid on the dashboard.

This week our team worked really well together. We took Monday off from coding to make sure we had our priorities straight in regards to the user experience. During that discussion we got to ambitious for the final two weeks and we had to refocus on what we could complete with the time we had left.

We took everything we learned from our user test on Monday and put those items into Trello. The discussion then moved on to refining some of the design decisions to help make them more uniform across the app. An example was our button styles and placements. Having multiple people build the app without a clear design guide we ended up with many different button styles and layouts.

Throughout the week each item we discussed on Monday started to come together. On Thursday we did another user test which better results but not perfect. Some bugs have popped up and some styles still need to be adjusted but we can see the finish line.

Next week will be a grind to get the last remaining items finalized and a video made for the app.

Profile

https://trello.com/c/HKgNRO2k/317-profile-pages-responsiveness-and-pricing-design
https://trello.com/c/1kpAa58k/336-loading-animation-should-just-be-on-the-payment-section-and-not-the-pricing
https://github.com/training-bot/labs11-trainingBot-FE/pull/108

Number of assigned displayed on training series

https://github.com/training-bot/labs11-trainingBot-FE/pull/102

Favicon & Loader

https://github.com/training-bot/labs11-trainingBot-FE/pull/99

Button design updates

https://trello.com/c/ZDf5cS4F/309-replace-all-buttons-with-text-buttons
https://github.com/training-bot/labs11-trainingBot-FE/pull/88

Pricing on profile start

https://trello.com/c/KgVd5ahx/302-pricing-info-on-user-profile-in-subscriptions-section
https://github.com/training-bot/labs11-trainingBot-FE/pull/88

Labs Week 3: A Review

Mike Landers — Fri, 05 Apr 2019 17:12:15 +0000

This week was dedicated to finalizing the features of our app as well as making it responsive. My main accomplishment was getting Stripe integrated into redux so it allows for a better user experience when subscribing a plan. This involved taking the Stripe integration I had built already and refactoring it to work through redux for better state management. If I had to do it again I would have preferred our team to decide on redux earlier but in the end it wasn't too bad.

One big challenge I faced was how to make creating a user with stripe and adding the Stripe customer id do our database and then sending that same customer id back to stripe when doing the first payment in our system.

After having our UI/UX meeting mid week we came to realize our main dashboard wasn't going to handle a lot of data well. We needed a way to have everything on one page without a huge long list or using infinite scroll. We decided as a team to use pagination. Having very little experience with pagination I decided to take on the task to push myself.

After doing a little research I was able to find a nice npm package, Material UI Flat Pagination. After a quick read of the docs I was able to add it into our project with relative ease.

This week our team work really well to make big decisions quickly in order to make our user experience better. From removing modals and making them full pages to allowing each individual to make their own design decisions for the section they are working on. As each team member worked on the components they all started to come together into a cohesive app. I would say the only real challenge our team faced as a whole was after having our UI/UX meeting. It shined a light on some of our design decisions and how they wouldn't work. We were able to overcome this by meeting right after and taking the feedback and putting it into our Trello board to accomplish during the remainder of the week.

Ready to take on week 4

If you've managed to make it this far make sure to check out my labs team on Twitter!

Nate | Leigh-Ann | Brandon | Alex

Labs Week 2: A Review

Mike Landers — Fri, 29 Mar 2019 18:05:12 +0000

What a week!

This has by far been the one of the more challenging weeks I've had at Lambda School. From feeling impostor syndrome in the beginning of the week to feeling great mid week and then getting stuck today.

This week I took on getting Stripe integrated into our project. Started out reading documentation and not understanding how it all fit together. This was the first time I had to integrated a front end, back end, and third party API. Understanding how all the pieces fit together has been the biggest challenges. Mid week I started to get a hang of things and by the end of the week started to refactor the code to add in redux.

This week one of my bigger accomplishments has been getting the front end to look decent while updating based on the state of the subscription.

When a user selects a subscription type the payment form appears. Upon entering their card info the back end handles registering the user with stripe if they aren't already and sending the Stripe user ID to our database. Then it takes the Stripe user id and subscribes the user to the plan and updates the user account type in our database to be reflected on the front end. I'm currently running into some promise issues while integrating redux to better handling the updating of state for the profile page.

My team has been nothing but incredible through the entire process. I've tried to be in our zoom sessions at all times to help out where I can. I think a big part of being a team player is being in the room there for when someone has an issue or wants to bounce an idea off you. I jump in on the discussions where I feel I have a valuable idea and listen to the discussions that are outside of what I know

Overall our team is fairly laid back and nobody has a strong opinion on design or technology decisions. If someone feels like taking on a task we all trust their decision and if something comes up we handle it as a team.This has made the entire process pretty frictionless. I do feel that I haven't been good personally about asking for help and rather just try and grind through something I'm not sure on. This is something I would like to work on in the final three weeks of Labs.

Labs Week 1: A Review

Mike Landers — Fri, 29 Mar 2019 18:05:02 +0000

As we complete the first week of Labs at Lambda School there is quite a bit to reflect on. As a team we planned out our project in the product canvas document and got both the front end and back end up and running.

During the first week I setup an AWS account and created a MySQL database running. Used MySQLWorkbench to build out the tables needed along with the foreign keys that it required. While I did spend most of my time troubleshooting AWS connection and table issues I was able to contribute to the front end. Once we had Auth0 setup I added the ability to logout via the profile page. For both the front end and back end I setup some of the environment variables that would be needed and setup the necessary variables on Heroku and Netlify to simplify deployment between local and web.

The ticket that i worked on the most this week was the setup of the database on AWS. Having never worked with AWS or MySQL, it was a great experience and would use it again. The following is a brief view of the MySQLWorkbench of the database.

Some of the issues I ran into early on was that i could access the database but nobody else on the team could through the workbench and we couldn't access it via the codebase. After doing research on the issue I realized it was a permission issue on what IP's were allowed to connect to the database. After digging through the AWS settings I was able to open it up to allow the other members to access it as well as the codebase.

Once the database was open this allowed the project to really start moving with seeding data and writing out components to display the data through API endpoints.

Our team as a whole did a great job with research and writing the project specification. I personally helped find a competitor (https://www.cronote.com/) and assisted with the writing of the epics/features and the user stories that go along with them. The biggest contribution was researching and investigation the database we would eventually use. We knew how to use SQLite and Postgres from previous projects at Lambda. I personally wanted to go outside of our comfort zone and use an industry tool like AWS to build our application on.

DEV Community: Mike Landers

Gapful Numbers

First Community Project

Saturday

Sunday

Labs Week 5: A Review

Code cleanup #155

Profile pricing & restricted pages #144

Pricing page & phone number regex #137

phone numbers formatted on notifications page #136

training-bot / labs11-trainingBot-FE

Front-end repo for Training Bot, an app that allows training managers to send employees automated messages.

Training Bot

Demo

Site

Dashboard

Team Members

Training Series

Profile

Mobile support

Usage

Development

training-bot / labs11-trainingBot-BE

Back-end repo for Training Bot, an app that allows training managers to send employees automated messages.

💬 Training Bot API 💬

Introduction

Table of Contents

Overview

What is Training Bot? 🤖

Labs Week 4: A Review

Labs Week 3: A Review

Labs Week 2: A Review

What a week!

Labs Week 1: A Review