Introduction and Project Overview
Hey guys. So in this video I'm gonna talk about how I built out my first website using Django that ended up getting me my first job as a software developer and how I later sold that website for over forty-one thousand dollars to my former employer and just basically go through that process and let you know how I did all that and talk about things like technologies I've used, the process itself, and so on. I normally don't like to go into numbers like this, you know, go talking about the $41,000, but I figured that would be a good story for people to hear and actually see what's possible out there and get some kind of idea of what something like this would take and maybe inspire some people and just give you some kind of insight into my story. So I was working as a digital marketer and web developer at a forensics laboratory where we analyzed fuel samples.
Company Context and Need for a New System
Customers would send in things like diesel samples, gasoline samples, and our job was to analyze that data or the sample itself and send them back the data and let them know what was going on in there. I was working as, again, a digital marketer, so I was building out their website using WordPress, HTML, and CSS, and I'm just doing things like SEO and so on. We got to a point at the company where there was the software that we were using that a former developer had built out that was in charge of storing all of this data that the lab would take in. So we have taken that data, put it into our system, and then send it out to customers via PDF. So that system was built in 2008, and you can imagine how outdated that must have looked. There was no styling to it. They had a lot of issues. It was just really outdated and we needed something new. So we started looking for companies that could build us out for us and developers, but I really wanted to build this thing out and I told my boss, 'Hey, if you let me take a stab at this thing and give me a few months to learn, I think I can do something like this. Let me try this thing.'
Learning Path: Python, Django, and JavaScript
I went ahead and started looking at books and reading online resources and studying this kind of stuff. The first thing I found was this book from a Barnes & Noble, 'Automate the Boring Stuff with Python,' and started figuring out what I can do with Python and if it was possible to build a website with it. I got all the basics done in about 20 days and started feeling very comfortable with it. But then I started hearing that I needed to use a framework to actually build a website just to make this process easier. I started hearing about Flask and Django and eventually ended up settling on Django. I chose Django and studied that for about another month and a half, maybe two months. With that I also wanted to use JavaScript on the front end to render my data, so I chose a book for that, got my start there, and started really piecing all of this together and started feeling pretty comfortable as a developer, as a full-stack developer, and understanding how all of this works. I decided, okay, I'm ready — this is about two and a half months into it. I'll draw up a prototype, I'll take it to a meeting, and I'll see if I can pitch this thing.
Prototype Pitch and Client-Facing Vision
I drew up a prototype and I'm so glad I kept the original because this is exactly what I drew up for my boss. I sold them on this vision of, 'Let me build out what we currently have but let's actually add a client interface to this software so a client no longer has to receive PDFs in their email because that seems a little bit outdated. Let's let the client log in and view the data themselves.' I had an idea of what kind of data they would see. We wanted to visually display that data in trends and things like line charts, scatter plots, and maybe even visually on a map, which is what you see here. Everybody was sold on this idea and we started pitching this thing to clients on day one. We took this exact picture to clients and everybody loved it because in the industry I was working in this was new; there wasn't a lot of tech there, so this was kind of revolutionary to what everybody was seeing. I was also in those meetings pitching it, but on my time off I was working on this thing and developing it, and about four months into that I actually had our first product ready and set to go and launch in the backend and actually take it to clients.
Soft Rollout and Customer Dashboard Features
We actually did a soft integration where we still ran on the old system but the data-entry guys in the lab or chemists were in charge of entering data into the old system and into mine just to have backups if something happened to mine because I was a new developer, so we didn't want to trust that kind of sensitive data. With that being said, here was a product that I had developed. It was a different version at the time, but this was the final product that we took to market. This is just the lab's or the customer's side of things. We gave our customers this dashboard where they can actually see all of their data. The client can view all the samples they submitted, samples they currently have in lab, samples that they've historically completed, and maybe samples that need to be revisited, samples that have been failed, or just kind of had some out-of-limits specs so they can be notified of any issues. Down here I wanted to visualize, like in my mock-up, the ability to see the data in a map. Anytime they provided us something like a zip code or some kind of city-state address, we were able to convert this into longitude and latitude coordinates and display it on a map, and then not only that but display whenever there was a sample in that area that had maybe been run out of limits so we can see five samples, two samples were failed, and we were able to view that data. On the right we can actually switch between and see which months that client sent in data and then have it graphed out.
Interactive Charts, Tables, and Monetization
If we scroll down, here were the actual tests that the clients actually ran with the lab. You can see the test name here and whenever a client clicks on these tests they can actually see the test results graphed out on the right side. It's fully interactive and gave the clients a really good perspective of what was going on and gave them the ability to view their data in trending. This was done using ZingCharts on the front end and we were able to expand this chart so a client could view this almost from a scientific perspective and analyze our data and see it very specifically. Down here we had the table of data which they can search by date and even have this advanced search filter and also download this data into an Excel sheet and have it exported in any way they wanted if they wanted to take this to a meeting. We were providing the client a lot of data. The way we monetized this thing was to not sell the product itself but to offer it for free and just give the clients the ability to go with us and have this dashboard if they chose us as a service provider.
Sale Negotiation and Reasons for Exit
Let's talk about the sale itself. We were delivering this product — I was a sole developer for two years. I had a little bit of help but not much of a budget to really hire experienced developers, so I was the lead and I was working about 16-hour days and was really burnt out at this point. It was a lot of stress dealing with clients and having to upkeep this with my inexperience. We got to a point where I actually had some disagreements with my boss and we just decided the best way to go about this is to part ways, but we needed to do something about the product itself because I never actually got paid for the software. I was still a digital marketer and was building this thing technically on my own time using all my own stuff and even had paid for things like server cost and so on. What we decided was that I would get paid out forty-one thousand dollars and he can have exclusive rights to the software and I was supposed to train up another developer just to make sure that transition could actually move efficiently. I originally thought the product was worth a lot more and I still think it was, but I really just wanted out. I just decided if I sell it for a lot less I have less commitment and less having to train up the next person, having to be with the company for another six months to a year or anything like that. I just wanted a clean break away and to be done with it because at this point I was a little burnt out. That's how we settled on that number just based on the value and how much value I would contribute in that integration process with a new developer.
Technology Stack and Cross-Browser Challenges
A few things with this product: I want to talk about the technologies I actually used to build this and to get this thing to work. As you know by now I used Python and Django and JavaScript on the front end originally. When I built this thing out in 2018, ES6 was out on the market maybe for a year, but a lot of browsers weren't compatible with the data itself. I was sitting in a coffee shop in Las Vegas where my wife and I were visiting family and I got a call from a client saying, 'Hey, I can't view my data.' I was trying to debug and it turned out that Internet Explorer at the time couldn't read template literals in JavaScript, so none of the data was being displayed. This led to either making the thing cross-compatible or using something like React. When I did my research I figured out that React could solve this and make this compatible for all browsers, so I decided to switch this thing to React on the front end and learn it. Two weeks later I bought a React book, read it in an evening, studied it a bit, and implemented React, switching the front end completely to React so it was compatible.
Infrastructure Choices: Database, Hosting, and Libraries
As far as the database goes, we used Postgres because Postgres integrates with Django very well and it was kind of the first thing that I learned at the time. It looked like it would do the job and had good documentation. For hosting that database I put it up on AWS, and that's also where I had my static files, so I put up everything into S3 buckets for images, styling, and more. The website itself I chose Heroku as my server, so we put the website on Heroku and integrated those two. For the map I used the Google Maps API to render that, and the charts were all ZingCharts. ZingCharts was the easiest charting system I could find that met all my needs and helped implement the interactive features. For the front end, just HTML and CSS for styling, but I used a lot of Bootstrap so I didn't have to focus on custom styling since the design didn't need that much styling.
Experience, Recommendations, and Closing Thoughts
One thing I want to advise you is you'll never be fully ready for building something like this or even landing your first job. Most cases you're probably just trying to get your first job, so my recommendation is just to jump in. You're always going to be at a point where you're going to need to know more and that's just always going to be the case, especially in this industry. You're never going to have all your ducks in a row and you're always going to need to study something more, so just start building something. Anybody who's looking to hire just wants to see somebody that's willing to learn and pick up new things and can get the job done. This gave me a great project to put on my resume and a hell of an experience because there's nothing that would be able to replicate doing something like this in boot camp or college. This experience solidified my resume and gave me a ton of confidence to apply anywhere I wanted. If this story helps you in any way, leave a comment. I'm also thinking about making a full tutorial on this with different data, so if you're interested, let me know in the comments and I'll think about putting something like this together.
