Tag: MySQL

Categories
Client Projects Featured

Credit Platform

Hey everyone today, I’m demoing this financial services platform. We built for a company called Millennia Tax Relief in Los Angeles under the pseudonym, Old Dominion Financial Services. As you can see, we have odfs.app here which is not the permanent address. ( clicks in browser url address bar ) So if I go in here and type in staging, we have two different domains for development.

Let’s go and log in. Okay. Actually it’s not that one. I think it is this one. ( uses login screen to authenticate ) Yeah. It’s been a while since I worked on this. So what you fail to see was actually a DocuSign integration because I had already logged in prior, but before it hits this, it’ll normally hit DocuSign and you end up logging in to DocuSign as a prompt, and then there’s a redirect from DocuSign to the web application. That being said the way this works is that there’s applications for credit here and there’s five different states pending, approved, signed, completed, or rejected. I created an initial flow diagram in going through this flow with the client, basically you go to the credit application you create an application there. And then from there, someone at the company would have to approve it. If it looks good, when it is approved, then what happens is a DocuSign contract is sent to the client. They sign it, a DocuSign web hook comes over to the software end here and then it’s marked signed. And then someone at the company either finalizes that after manual processes on their end, that just can’t be automated at this stage, and it would be marked completed. And there you have it.

So, let’s see here, there’s different actions. You can actually download a PDF here which would show the information here so you can see kind of the details. What else is going on? You can edit the application, you can add a co buyer, there’s a billing form. So you click here. ( clicks on billing form action application popup ) It’s already been submitted. Okay. Since that one has already been completed, let’s go to one that is pending. It would have to be, actually would have to be signed. Yeah, here, let’s check this one. Yeah. So the billing form on this one there’s a Stripe integration here, so this is secure through their API and you’d either enter in your bank account or your card details here. So let’s go back and check out a credit application, what that’s looking like. So I do want to actually go through all of this. It takes quite a long time, but to do this, you have to go through all of these these steps here and enter in your monthly payments. And why not? I’ll just do it as fast as possible here.

( Starts filling out lengthy loan application form )

And entering like APR calculates Calculations. Okay, great. Yes. Continue. As you can see the next step pops up and gets filled here and I’ll just fill that with a plugin, cause I have some, some plugins for filling forms, but they don’t work entirely a hundred percent. Let’s see. There was a certain formatting on there. And if you haven’t used it before, you get used to it, let’s go California. Well blah, blah. Yeah. Here yeah, yeah, yeah, yeah. Okay. Is my email in here? I really gotta make sure the email is correct. Because the point of doing this is that I will get a contract to my email and that will be next to show. Okay. Okay. Tests tests, or blah, blah, seven years. Okay. Checking. Okay. And that’ll populate this dropdown keep going through no co buyer, continue. Okay. Terms and conditions. Here’s a bunch of these conditions here. And then we’ll just say that it’s authorized by the seller because, hypothetically, I would not be the buyer and the seller at the same time, but just for this demo, you can see that it was added. And at the top here we have account number 65. Okay. Which is pretty handy. Let’s go over to, email here ( checks gmail account ) and in my inbox I think I would be, oh right. I have to go through the steps, almost forgot. So I would have to actually approve this. So it’s now been approved and see that it hit the back end and it’s now updated the state. So when it’s approved, it should send me a contract.

Oh, bam. Is this it? Nope. Not yet. That’s actually a new device log in. ( Docusign contract email appears in gmail ) So here it is though, amazing, review document to sign application 65, beautiful. You know, this type of stuff is very powerful for a business. So let’s review the documents. I’ll have to blur some of this out just because it pertains to my client’s details and that is their personal information. And not necessarily kosher, I suppose you’d say to share. So I’ll actually have to just blur almost all of this out. So yeah. There’s two pages to this. Okay. For the sake of the video and blurring, I’m just not going to really scroll on this, but if I do go down to the very bottom, I can sign it. And then from there, after signing it and hitting finish, it’ll with a web hook mark it as signed. I’m not going to go through that whole rigamarole. I know it works because, you know, we worked on it and built this thing.

So let’s just go over to Stripe and check out some of the potential payments here. So let’s make sure we go to some that have been completed and get those account numbers. So we have about a 64, 60, 30, 6, 12, Maybe like yeah… 60 – Guy, A Richie. I like that name. ( goes to Stripe dashboard ) So if we go to payments here and go to research what about 60? Let’s see what comes up here. I’m not sure If I actually have paid for all of them because in testing, there’s different stages of testing and it’s not entirely the same flow as it would be in production. So let’s actually go to customers and go to subscriptions. And if we go to subscriptions and search 60, what about Guy… it’s actually been like a bit awhile cause we had worked on this and then pivoted over to, to another project. So that’s why, let’s see. What about Michael? Yeah. Okay. So a lot of subscription action going on here. Let’s find a Charlie Brown, a Emmanuel T Busher what about him? Let’s see Busher. That’s what they’re going to come up. Let’s see. So yeah, Emmanuel T Busher so you can look it up via the last name, but as far as I recall, we were also able to index this via the account number. So currently I’m actually a little bit surprised. I know that Stripe has worked on their platform. Oh yeah, here you go. ( finds customer by application index number ) So you just hit 12, you put it in there and if it exists, you can hit that. And there’s Emmanuel T Busher. So there you have it, $10 is just this testing amount.

But very powerful there, you can see that we have DocuSign contract agreement, web hooks. We have Stripe web hooks going on. We have the Stripe payments very powerful stuff here, guys. So anyone who’s interested in a software like that, you know, if I’m not currently tied up in many other roles, you know, feel free to hit me up for some kind of side freelance down the line. Currently I’m maxed out, but that would be in 2021, however, 2022 might be a different story. So always be on the lookout. Thanks everyone. Bye.

Categories
Client Projects Featured

Legal Shield

Hi everyone,
Today I am going to be talking about a client of ours named LegalShield. We are currently working on the automation of several of their applications. This is the initial application and it is essentially a marketing blitz. Most people who are in business completely understand the importance of marketing. Increasing the efficiency of a solid marketing program really helps to improve and contribute to the overall growth of a company. You can do outstanding work and really help people but unless they know who and what you are, they most likely will not use your services. 

( Screen Change – LegalShield Business Solutions Screen ) 

So let me explain what LegalShield is for context purposes. This is their main website here and the banner headline is “Affordable Legal Help for All”. That’s something I really like because I know many people in the world and specifically many Americans here cannot afford legal coverage. It is important and very helpful to have a company that can offer affordable legal services to the community. I feel good working with LegalShield, suffice it to say. So, I will now explain some of the areas of improvement of their software applications. 

( Screen Change – Logging into Admin Dashboard Screen ) 

This is the Marketing Blitz here and I am going to log into the Admin panel first to set the Blitz and then show what it looks like for users. By the way, you can see the LegalShield building in the screen background. 

( Screen Change Upcoming Scheduled Blitz Sessions ) 

We have three options that are available when a blitz is not currently active. These are the Blitz Scheduler, Managing Admins and also statistics. I will connect with the Scheduling part last. 

( Screen Change – Current Blitz Admins ) 

Please check out the Admin Panel. I am logged in as an Admin under my backend developer account. You have different columns here which include Master Admins which has the highest level of privileges and can delete other Admins or create new Admins. You can also create a new Admin via this handy pop-up menu. You can filter, use a variety of pop-ups, delete, create a master and of course edit. Those are the main options available which as you can see are all pop-ups. 

( Screen Change – Current Blitz Statistics ) 

Blitz Statistics is an important feature because it can be used to increase and optimize efficiency by using the available metrics. Previously, the metrics were not automated in this fashion and this is really a step up for LegalShield. We can implement this type of strategy and functionality for many businesses. We do custom development and most things you can conceive of – we can do. So there is deletion – this is a test blitz and let’s just delete it. 

( Screen Change – Prospecting Blitz ) 

We have sorting capability on the columns. Let’s click thru one so you can see everyone’s names here. I will have to blur the names out because of privacy rules. You can sort the columns based on appointments and the entire header row. Pretty useful tool considering they give prizes to the top performers. 

( Screen Change – Upcoming Scheduled Blitz Sessions ) 

Let’s check out the Scheduler and make a test blitz. So we go in here and insert Test Blitz and add the date which is Friday. Happy Friday everyone! It is almost 3:30 so let’s do it for two as it is already active and then lets keep this to the end. It is in 24 hour time notation just to avoid confusion. It’s a little bit extra math but I am sure everyone can handle it. So there it is and you can see 2:55 PM to 3:55 PM. 

( Screen Change – Login – Test Blitz is Active ) 

So, if we go into the login and refresh this and say we are a user, you now have the name of the blitz which is active and ending in 26 minutes. All of the time functionality is adjusted for everyone’s time zones for storing and showing the data which is a very important function that can actually be more complex than people would assume. So, let me join the blitz. As you can see, this is my personal data that can be automatically populated. How did we do that? We take the IP and store the user’s prior logged in details and automatically send that to the front end and pre-populate it. We have this drop down menu which is a State and Province supporting candidate as well and you can see it is actually a search drop down menu where you can search and see how that works. 

( Screen Change – Welcome to Group Prospecting Blitz ) 

So, let’s join the Blitz as this is what it is all about right here. As you can see it is a Marketing Blitz. So, imagine a big leaderboard here and you have a moderator that can put in comments which includes the time that it is ending. Please note that all of this works and is fully supported on mobile devices. So, nothing can go below zero which really improves efficiency. There is also a gamification aspect to this and I think this will also improve the overall experience for the marketing staff. Previously they would work from home making calls and just writing down what they did. This on the other hand, is more of an interesting event which has a bit of excitement and challenge to it. I know if I was doing marketing, I would prefer this versus the standard alternative.

( Screen Change – Test Blitz is Active, Ending in… ) 

( Logging as Admin – Upcoming Scheduled Blitz Sessions ) 

( Moderator Comments ) 

So let’s check out comments. Let’s say I am logging in as an Admin after the blitz has started. At the same time the managed users and managed comments function is enabled. So, let’s start with comments and show you comment one, comment two and comment three. Please note that Josh is my backend developer and for ease of operation we have the Admin Account in his name. 

( Screen Change – Welcome to Group Prospecting Blitz – User Facing Side ) 

If we go to the user facing side, we have comments one, two and three and you can see that Josh is also added. The way we worked this out, is similar to a giant room essentially via Socket IO so the Admins are connected to the room and its OK if they are in the Leaderboard as it shows everyone that they are present, despite not working on calls or appointments. This is an intended function. As you can see comments one, two and three and let’s say we delete comment two. You can see only comments one and three appear on the screen. 

( Screen Change – Current Blitz Users ) 

Also, here is an interesting and fun function. As you can see, the screen shows the people who are active in the Blitz right now and this is my account which is located on the user-facing side. I do not want to block by email or IP address because I do have to work on these items as well as others but let’s say we want to delete the user. Now deleting a user will essentially delete the user from the database and remove them from the Blitz. So watch what happens on the screen when I execute that action. If I click and delete the user is gone. Now it is a white screen because I have been deleted or kicked out of the Blitz. No Blitz for me today! So, that would be what would happen should someone be banned or permanently blocked – they would be seeing only a white screen. 

( Screen Change Affordable Legal Help for All ) 

In summary, as you can see, this is the marketing software we do for LegalShield. We also have other software we are planning to develop with them and look toward partnering with LegalShield as a long term client to help improve their overall business, bottom line and essentially the value that they bring to the lower income option in this aspect. In other words a more affordable or economical option for people so they can receive helpful, high quality and affordable legal advice. So, feel free to visit www.legalshield.com if you need any type of coverage or legal plan that is available from their website. 

Thank you everyone and please contact us should you require high quality and timely custom web development. Thank you for your time.

Categories
Client Projects Featured

Strain Connect

Hi Guys, 

Today I’m going to be demoing an old screencap of an applicable prototype for a startup called Stain Connect. Strain Connect was a cannabis recommendation engine for branded, lab-tested cannabis products. Let’s check it out.

(filling out login)

I built this with View and View X. Nowadays I’m a React guy and I probably wouldn’t go back to View, especially with View X. I really don’t like that state management. There are some good things about it, but there are also a lot of gotchas that you avoid in React and Redux. 

(cursor hovers over features as he explains)

So, as you can see there’s a couple of user-submitted choices here. The App revolves around 3 data points. Those three data points are then mapped to a Cartesian coordinate system that’s in 3D, along three axes, and then based on that it’s able to recommend products, kind of your standard data modeling recommendation engine. As you can see here are some products. 

(showing Admin Dashboard)

Part of the clickable prototype was the admin dashboard, where you could enter the products with the lab data, sorted by brand and then you as well could have a user dashboard. You will see near the end there, there were no users in this video, but you were still able to edit them. 

Something like this is really helpful for startups or people just developing concepts. Sometimes it’s a lot easier to spend $1000 to $1500 bucks and build out an idea and then iterate upon it for your business, rather than spending $5000 or $10,000 and then realizing, later on, that “Oh, this really wasn’t that great an idea”.  Sometimes those “iterable” prototypes are really helpful and I do recommend if you are a startup, creating one of those vs. just relying solely on a pitch deck is very helpful. This was a progressive web app to potential investors who could put it on their phones as well.

Categories
Client Projects

Holy Kitchen

Holy Kitchen

Hey Guys,

Today I’m going to be demoing this screencap of a custom PHP website with an admin panel for a restaurant called Holy Kitchen. Most people think it is an Indian restaurant, but the owner is actually Nepali. It’s in my local neighborhood. They’ve changed their name to Bon Apeteka, because I believe they are trying to be a little bit more secular in this day and age, but the food is still traditional and fantastic.

(background video starts)

So let’s check out the website right here.

(starts scrolling down)

So, I started with their logo. I got this great copyright-free video for the background. As you scroll down you just have the menu there, that you can add to the cart. You have a nice little full-width banner there. Just some Indian/Hindu flare.

(highlights menu items)

If you add to the cart, it will pop up on the right there. You can keep adding, and of course, the math is done. You go through the different sections on the left.

This is all mobile responsive as well.

(starts adding and subtracting menu items from the cart)

In this screencap, I don’t have it recorded for that, but if you can just imagine the menu going above and just everything stacking more or less. So as you can see, when you empty out the cart it just vanishes there.

(switches back to the main page)

On the top left, you click through to the logo, and it goes to the admin panel for the restaurant owner. You log in and it’s pretty straight forward here.

(starts scrolling down)

So we have all the corresponding categories for the items that they sell, and you simply edit/remove, and then if you want to add you just click on the plus.

(clicks on the plus, a window pops up)

So I think the icons are really straight forward there. The overall UI here is pretty simple. You know it’s a back end here, so on this one, we don’t have to be super aesthetic about it. This didn’t use a component framework. It’s pretty much just raw HTML, CSS, and PHP. Sometimes we just like to keep it really simple and light when there are not too many pages on a website.

(moves cursor to the right)

So if you want to log out, you just got to the right there.

(clicks on log out)

Hit Log Out, and then you’re back to the admin panel. Let’s just finish up on the video here and close this video out. Thanks for watching. If you guys need a custom PHP website or an admin panel for a restaurant like this. Feel free, we can build that for you. Just drop us a line anytime.

Thank you.

Categories
Client Projects

News Poll

Hi Guys, 

Today I’m going to be talking about News Poll. Which was a polling question software we ended up building for a client by the name of Lemuel Lewis. He had a third party solution going on, but he wanted his own because sometimes the original would go down. 

He had this whole conglomerate of websites, literally hundreds and hundreds of websites, of which he was generating a bit of revenue on each from advertising. So this was one of the kinds of gimmicks that would generate people to come vote. It was a thing that he would integrate into a lot of these websites. So there was a client-side script and an admin panel. There were six requirements in this project. 

  1. Create new poll-in questions with an admin panel. 
  2. Each one needs its own unique color.
  3. You’d have to see the results nationwide while hovering on a state. 
  4. Allowing a client-side script that would be deploy-able on hundreds of other websites.
  5. Preventing users from submitting multiple votes.
  6. Allow for pulling of old news poll data, like CSV. 

So let’s check out the video. 

(starts filling in fields)

Okay, so this is the basic admin panel that we put in here. When you click through here you’ll be able to see. 

(clicks through to a map of the United States)

Yeah, so what we’ve gone and done is we have the visual representation of what a person would see on the website after they vote. So it’s an exact duplicate except the client-side script doesn’t use UX. So that one is just straight Javascript, and then this has an actual framework, but I like this because there is 2-way data binding, as you can see. 

(enters question into field)

So if you put that question in and save it, it will update, and then because of how the client-side scripts are fashioned it will update across every single script. 

(highlights the styles)

The styles are injected with a function vs. including them. So you won’t have to actually upload another file to all these websites. As you can see, you just save tee poll question 

(switches to CSV data box)

and then there is also going to the CSV data, where you can pull up old votes and just copy them out.

(hit accept)

Just like that. 

(switches to client-side view in another browser window)

Okay so if you jump over here is the client-side view. Then there is when you click through. That’s the old question and you refresh, 

(refreshes screen)

and then you can see that’s it’s updated with the new question that we just saved. And if you refresh on this one you will see the new result here. 

(new results appear with refresh)

So, let’s see if we refresh because you just voted… and there you go. When we deploy this onto the servers you click through and it changes. I’ve just set this up for demonstration purposes so you can see. But yeah, it was a fun project. It’s always great to have more experience in D3 and a little more experience in View, so if you need infographic or any sort of data visualization for you business we can solve that problem very well for you. Thank you. Bye.

 

Categories
Our Software

Wordza

Wordza was a web application I built with Vue.js + Vuex after having traveled around Ukraine for over a month. I’ve always had an interest in the Russian language since I was a child. I found the Cyrillic alphabet fascinating with it’s classic communistic block typeface and similar looking characters to the Latin alphabet. In my travels I realized that if I knew English, Spanish, and Russian that I would be able to speak to someone almost anywhere in the world.

With that ideal in mind, I began searching for language learning software! I soon found out that if you know the 1,000 most commonly used words in a language you can roughly understand the gist of 60% of what is said. This was a powerful concept in my mind. I would seek to learn the top 1,000 most commonly used words followed by grammar and natural conversation practice.

I was unable to find flashcard software that suited my three basic criteria:

  1. Allow for my own custom submitted word lists in addition to containing the top 1,000 most commonly spoken words.
  2. Automatic speech of the word or phrase by a native language sounding speaker via text to speech (TTS).
  3. Speech recognition of my spoken word and matching of my pronunciation with that of the text to speech.

With that discovery, Wordza: Language Flashcards was born!

I was pleasantly surprised to learn that some browsers, at the time of writing Chrome and Android browser, supported text to speech and speech recognition in the Web Speech API.

Text to speech functionality plays off this…

[code]
playTTS() {
let utterance = new SpeechSynthesisUtterance(this.$store.getters.currentWord);
utterance.lang = this.$store.getters.currentLang;
utterance.voice = speechSynthesis.getVoices()[18]; // Russian Voice
speechSynthesis.speak(utterance);
},
[/code]

While speech recognition is like this…

[code]
recordAudio() {
// Reset Match Status
this.recording = true;
this.speechMatch = null;
this.speechWord = “…”;

window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;

this.recognition = new SpeechRecognition();
this.recognition.lang = this.$store.getters.currentLang;
this.recognition.interimResults = false;
this.recognition.maxAlternatives = 1;
this.recognition.start();

this.recognition.onresult = (event) => {
const word = event.results[0][0].transcript;
this.speechWord = word;
this.recording = false;

if (word === that.$store.getters.currentWord) {
this.speechMatch = true;
this.playCorrectBeep();
} else {
this.speechMatch = false;
this.playIncorrectBeep();
}
}
},
[/code]

Post in progress come back later!