Skip to content

Instantly share code, notes, and snippets.

@CleverProgrammer
Created February 7, 2017 22:41
Show Gist options
  • Save CleverProgrammer/644dec1b28fd52079d4255c464b62514 to your computer and use it in GitHub Desktop.
Save CleverProgrammer/644dec1b28fd52079d4255c464b62514 to your computer and use it in GitHub Desktop.
cfe_cleverprogrammer
# How TeamCFE Helped Me Make $21,765 From One Client, Build A Badass Web App, and Triple My Hourly Rates as a College Student in Under 2 Months
So, it was 1:20 pm on a Tuesday and I had just gotten back from my Intro to Differential Equations class which taught me about everything that had 0 application to my life. Just another day at college. It's weird how you can get by in school getting A's or B's without actually knowing anything. Anyways, as I step into my house with my black backpack still on – I get a phone call from somebody and let's just say his name was, err, Bob. Courtesy of NDAs.
## The Story of The Ultimate Call
So, Bob says that he just saw my independent software consultant ad on Craigslist. His company was looking for someone who could build software that could do the following:
- Send and track invoices
- Schedule jobs on a calendar with a beautiful GUI
- Register their employees and clients in a centralized database
- Host this on a web server
- Client portal with different access levels. For example the secretary should not be able to see company analytics when she logs in... like how much money company is making or how much each employee is paid
- A bajillion other things
[Now before I continue my story, let me just give you a little background on my skill set at the time of the phone call]
As a college student who was supplementing his computer programming knowledge by taking Coursera (M.O.O.C) courses on the side, working on only theoretical projects. I had ZERO G.U.I (Graphical User Interface) experience.
At the time I was going through the Principles of Computing Part 2 course on Coursera and building a puzzle game called **[FIFTEEN](http://www.codeskulptor.org/#user42_o75teaA4i9_0.py)** (only the logic because the course itself provides you with the G.U.I) .
<iframe src="//giphy.com/embed/l3q2NZ4AvfEHGaIIU" width="480" height="254" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="http://giphy.com/gifs/fifteen-coursera-l3q2NZ4AvfEHGaIIU"></a></p>
## Here's my shiny little certificate from Rice University
<a href="http://imgur.com/FBVfDT7"><img src="http://i.imgur.com/FBVfDT7.png" title="source: imgur.com" /></a>
[Okay, back to the story]
After 10 minutes of Bob yammering and listing out each skill that I **DIDN'T** have, he asked...
> *"Are you our guy?"*
Just between you and I, dear reader, I was NEGATIVE 100% their guy. They couldn't have called a worse guy for the job. Obviously my response SHOULD have been...
> *"Sorry, unfortunately I lack the skill set to complete this job and I wish you all the best on finding the right guy for the job! Thank you for your interest."*
But, that's not what I said. Being a 20 something year old I believed I could do anything. So, I told them
> *"Yes. I am THE guy. I am quite possibly the only guy who can do this
> job. When are you looking to get started?".*
I know... I'm an idiot.
But do you know why I would say something as crazy as that? Well, I was **obsessed** with coding. Plus the idea of getting paid to build something awesome sounded like an amazing challenge. A challenge that would help me **learn and earn**. Side-note: 99% of Craigslist ads for landing clients don't work so I was super excited to jump on it now that I got the chance!
We spoke on the phone for a few more minutes getting to know each other, scheduled an interview for 3 days ahead, and said our goodbyes.
Now, because I was ambitious and hungry to prove myself, I decided to build something for them **before** I even went into our first interview. I'm a huge proponent of the [Briefcase Technique](https://www.youtube.com/watch?v=NViqHCrljf8), popularized by Ramit Sethi, and I believe that you should put extremely strong emphasis on providing your potential client with **high value** before you ever speak with them about money. This is a very powerful negotiating technique because your prospect is salivating before any negotiation takes place. At this point, you can pretty much name your price.
Now providing value before-hand is a very good thing. But you know when it's NOT a good thing? Attempting to build a prototype when your skills ABSOLUTELY SUCK. This brought me one step closer to discovering TeamCFE and led to my first big mistake...
## The Story of the Nightmarishly Awful Prototype
That night I was up until 4 a.m building the first prototype. I had never written code before that could store information and retain it even after the code finished running. After much research, I realized the tools I needed for the job required me to know **SQL (Excel On Steroids) + Flask (Python Lightweight Web Framework) + Databases (Storing Information)**.
Side note: Why the hell does nobody ever explain that without databases almost anything you make is useless?
So, with a course I found on Udacity called [Intro to Relational Databases](https://www.udacity.com/course/intro-to-relational-databases--ud197), a lot of resourcefulness, and about 13 hours of straight learning new concepts... I was able to just learn enough backend development to create a local app that could register new employees. ([Learn Enough](https://www.learnenough.com/), I just gave you your next big idea – Learn Enough Backend Development to be Dangerous – you're welcome). That was the best feeling I ever had! It was an AWESOME moment in my life because I could see what I was missing and what things I would be able to build in the future with this new knowledge.
At this point, I bet you are excited to see my first prototype and make fun of it. Are you ready? I mean... Are really ready? Okay, be prepared to have your socks blown off and DON'T say I didn't warn you.
<a href="http://imgur.com/BNnp4vH"><img src="http://i.imgur.com/BNnp4vH.jpg" title="source: imgur.com" /></a>
**Some of the stuff is hidden due to sensitive information**.
Look at this beautiful app. Isn't it gorgeous? Okay so at the time, this was the most beautiful thing to me. It has a form, once you submit it, it registers that user in the database and displays it in an HTML table which I also just learned how to build. There is a dynamic count at the top left which tells you how many employees are registered at any given moment.
**What SQL helped with**
- Dynamic employee count
- Table sorted on most recently registered employee
**What FLASK helped with**
- Running app on local server (think of it like an infinite while loop running my app)
- Providing GUI for the app (point and click stuff)
**What DATABASE helped with**
- If you refresh the page or close the app and come back... everything is still there.
I was excited, I was proud, and in the heat of the moment I ended up sending him this hideous looking prototype at 2:23 am. Who **text messages** their potential employer **at 2:23 am** with an **awful looking prototype**? Me.
<a href="http://imgur.com/mXC8CEQ"><img src="http://i.imgur.com/mXC8CEQ.png" title="source: imgur.com" /></a>
The employer responded back in the morning and their reply went a little like this...
> *"The app seems to be a little rudimentary but we are SURE that this is rough rough ROUGH draft. But since we don't want the world's most beautiful app and our focus is on automating mundane tasks to save man hours... You are on the right track."*
Their response broke my heart! I thought to myself
> *"Rough draft? I am beyond my FINAL draft..."*
At this point I thought to myself that there MUST be a better resource out there for learning this and I need to build something mind blowing because I wasn't just going to sit here and give up. If there is ONE thing in life that I have never known and I will never be able to learn how to do... That's giving up.
## The Story of Finding TeamCFE and Upgrading My App
I learned online that the Django Python Web Framework could do a lot of the things I wanted to do with Flask but do it in an easier way. I started doing research on finding great Django resources. I recalled this video that I watched back when I was learning how to use API's: [Learn API Basics to Grab Data with Python](http://cleverprogrammer.to/cfe-api-youtube). I thought to myself, I really liked learning from that guy and he was one of the only people who had a practical video of connecting python to the real world and using it. 99% others are just purely theoretical. So, I thought let's go back to that channel and see if there are more videos I can learn from.
I discovered something awesome. I found out that this was not just a one off video but an entire YouTube channel called [CodingEntrepreneurs](http://cleverprogrammer.to/cfe-youtube) dedicated to practical Python knowledge and building web apps. As if this wasn't cool enough, I ran into one of their playlists: [Try Django](http://cleverprogrammer.to/cfe-try-django)! I used this playlist to improve my skills tremendously and afterwards found their website with all of the projects on there. When that happened, I immediately enrolled in their monthly membership and unlocked access to all of their projects.
### 6 Most Recent Projects at TeamCFE Out of 10
<a href="http://imgur.com/MhwPX5j"><img src="http://i.imgur.com/MhwPX5j.png" title="source: imgur.com" /></a>
Having access to these courses 3 days prior to interview was key for me. I thought that look, the clients only scheduled the interview up until this point and they were in no way expecting ANYTHING c]ompleted beforehand. But, I have already shown some initiative by building the first prototype – which wasn't the best but still more than expected and showed them my willingness to work on it – and so by making the app even better beforehand would completely blow them away at the time of the interview.
### The Course I Joined First at TeamCFE
<a href="http://imgur.com/W9ZSjQS"><img src="http://i.imgur.com/W9ZSjQS.png" title="source: imgur.com" /></a>
I had a two-fold reason for joining this course. 1.) It would help me with the app I was building for my client and 2.) I had always wanted to create video courses for my brand [ChessTastic](http://chesstastic.com/) where I taught beginners how to play chess through my YouTube channel. I eventually wanted to build courses that I could also charge people for.
During this course I ended up learning some amazing things and now I will show you how the Django skills I learned from TeamCFE translated into upgrading my app.
## Employee Registration Form 2.0
<a href="http://imgur.com/CisusQi"><img src="http://i.imgur.com/CisusQi.png" title="source: imgur.com" /></a>
Here is the first upgrade I made along with the specific code I wrote following TeamCFE's course...
## Employee Registration Form 2.0 + Code
<a href="http://imgur.com/4hNXeyJ"><img src="http://i.imgur.com/4hNXeyJ.png" title="source: imgur.com" /></a>
**Conceptual Breakdown of Client's Employee Registration Form**
- **Store employee's information**
- Assign **Color** (My choice. So, each employee can be color coded on the calendar later)
- They told me title choices should be limited (Technician, shop assistant, CEO, Manager, etc) so it made sense to make it a dropdown
- **Status** of a job could be active, canceled, or completed. (ex if a technician completes a job or if home owner cancels job)
- Rest is self-explanatory
**Technical Breakdown of Key Points (Nerd Alert)**
- **Full name** is `charfield` because it's string and we don't really care what they put in there
- **Zip** is ALSO `charfield`! Why? Not gonna be doing any math to it later so just store it as is and do NOT store it as integer or float.
- **Hire Date** & **Birth Date** are both `datefield` and also notice the juicy date picker widget I added.
- **Title** and **Status** are `charfield` but when you pass in `choices` parameter... They turn into dropdown menus which is so cool!
- **Color** is a color field :). [Django-Colorful](https://github.com/charettes/django-colorful) is an extension to the Django framework and it's open source so I just went to Github, installed it, and then imported that bad boy into my code.
Learning all of this and setting this up took me about 2-3 days of learning on my own. Just the amount of time I had before the interview... Remember?
## The Story of The Interview
It was a Friday morning and it was raining. Unlike most people, I love mornings and I love rain. This was both! I made sure that before I got to the office in my sexy grey 2010 Hybrid Honda Civic, to grab a double tall white mocha from Starbucks. I started my drive to my client while sipping on hot coffee and listening to John Sonmez's book on the importance of Soft Skills for Software Developers to pump me up for that interview.
So, I finally find the office which was located inside of a big dark building. I walk in meekly with a feeling of uncertainty, not sure how the interview is gonna go. They start telling me all their specifications for the job and what things they would like done.
Once we get past all those questions, they ask me what qualifies me to do this job and if I am even the right fit. This... This is MY time to shine. This is the moment I prepared myself for! I bust out my briefcase and theatrically pull out my laptop. At this point they had not expected me to have done ANYTHING on this app. This was supposed to be just the initial interview. But once I opened my browser and ran **their** app on a local server, with a working database, beautiful graphical user interface, thoughtful design, and ease of use... They were BLOWN away. Their next question was literally:
>"How much would you like to charge hourly"?
With TeamCFE's tremendous technical project building knowledge and my background in strong negotiation skills, I was able to land this client with triple my regular hourly rate. Pro tip: Try your HEART out to get an hourly rate if you are trying to work as a independent software consultant. Why? I'm glad you asked...
## Job Specifications Are a Lie
Almost everything they had in their original requirements for me before giving me the job, we ended up modifying it one way or another. Also, as time progressed... The project seemed to grow exponentially. It was weird, the more we worked on it, the more things we ended up adding to the to-do list of the project.
This is the reason why you should never try to agree to a flat rate because you will ALWAYS be overworked and underpaid.
**Some of the new things they wanted to build that they didn't before**
- proprietary calendar integrated into the app (not the google one they had been using)
- Rest API for their calendar events
- Invoice PDF generation on the fly
- Ability to email the invoices using Sendgrid
- Ability to preview invoice before sending
- Bajillion other things
It was now time to get cracking on the new stuff but starting first with completing some of their original requirements.
## Company Registration Form
They told me that they wanted to be able to register companies based on their name, email, billing address, manager, vendor id, payment terms, invoice instructions, and whether or not they were applicable for a claim number or a deductible.
Using these words, I had to break this problem down into code and eventually turn it into a GUI friendly form. Well... How do you do that? So, how you would think about it from a design perspective is basically make everything else an empty field, but make claim number and deductible checkboxes. At least that's what I came up with...
<a href="http://imgur.com/XVSGjmu"><img src="http://i.imgur.com/XVSGjmu.png" title="source: imgur.com" /></a>
**Conceptual Breakdown of Client's Company Registration Form**
- Only new things are the checkboxes for claim number and deducible
**Technical Breakdown of Client's Job Registration Form**
- **Email** is a specific `EmailField` and not a `charfield`
- **Claim number & Deductible** is a boolean field which allows it to look like a checkbox. I made it `False` by default so the box is unchecked
- Everything else is the same
## Job Registration Form
<a href="http://imgur.com/SYIBQ68"><img src="http://i.imgur.com/SYIBQ68.png" title="source: imgur.com" /></a>
Okay so, for the job form they wanted me to add pretty much has many of the same types of fields that I have already added in the company and employee form. But, they wanted me to add this special field called `company` where it's a dropdown menu that ONLY lets you choose from the existing companies in the database. How the heck do I do that?
Now here is where things start getting a little bit tricky and the magic of relational databases starts coming into play. What I want to be able to do is store the `job` form information in a way where it speaks with everything that was registered using the `company` form. We also want to make it dynamic so let's say you delete all companies, now the dropdown for the field **company** in the `job` form should show up as empty.
That is the beauty of relational database management systems, the fact that they allow you to store information while letting you create these awesome relationships. However, while things seem pretty simple from the user's perspective, on the backend things can get a little complicated... How complicated?
<a href="http://imgur.com/iPrwBmy"><img src="http://i.imgur.com/iPrwBmy.png" title="source: imgur.com" /></a>
This is a super amazing and super secret tool I like to use that helps me create awesome SQL tables, keys, foreign key relationships and much more VISUALLY. You can then hit one button and it actually spits out code for you too. I've put together a guide for you on how to use this ultimate SQL tool and a link to the app **[LINK GOES HERE]**.
With all that said... Now I'll show you the code that allowed me to create that relationship.
## Job Registration Form + Code
<a href="http://imgur.com/FKz17Oi"><img src="http://i.imgur.com/FKz17Oi.png" title="source: imgur.com" /></a>
**Company Registration Form**
## Employee Job Table
<a href="http://imgur.com/G0KgB6Q"><img src="http://i.imgur.com/G0KgB6Qh.png" title="source: imgur.com" /></a>
2
2
2
29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment