During the past week or so, I've been laying more groundwork for my web application sandbox. Although it's still very spartan in style and spare in content, the sandbox landing pages (http://bradleypmartinsandbox.com) are now quite a bit cleaner. You can check out a screengrab of one of the pages below, or head to the site yourself to take it in! I've also built in functionality for the sandbox page to link to other servers hosting specific applications. Right now there's only one bare-bones app being served (linked in the greet button of Figure 1), but I'm hoping to expand this selection soon (and with much more substantial applications).
Figure 1. Here's a shot of the cleaned-up 'secret' page from my last post (now in the 'appselection' route). It now serves as a link to other web apps I've built, but you still get a kitty picture!
I'll try and involve many of these JS tools as my sandbox/portfolio applications become more substantial.
Figure 2. A D3 interactive cryptocurrency display allows users to select a specific date range for further exploration, and to choose between several coins for visualization.
Figure 3. This clone of a noteworthy, animated presentation by Hans Rosling of gapminder.org shows relationships between GDP, life expectancy, and total population (circle area) for different countries (individual circles) on different continents from the year 1800 up to the present. D3 and its community make a ton of cool data-driven functionality possible, and I'm looking forward to using that in upcoming projects.
More progress in practical app development: linking together a new domain name, recent tutorial work, and EC2 instances
One web development 'next step' I was looking forward to (after completing a whole bunch of back-end tutorials and one whopper of a full-stack tutorial mentioned in the last post) involved branching out by deploying a couple simple apps on my own via AWS EC2 instances.
The end of Colt's Web Development course had students setting up a deployment of the YelpCamp project through Heroku.com. I thought it was neat to watch those videos and learn about another option for deployment, but since I've already done a bunch of learning in the AWS ecosystem, I thought it would be fun (and practical!) to start blazing my own little trail by deploying on AWS instead.
At the same time - and since I'm planning to be pumping out quite a few more projects in the near future - I thought it'd be a good time to register a new domain name for exhibiting a budding portfolio. So, using AWS's Route 53 service, I got hold of bradleypmartinsandbox.com (no prepended 'www') for hosting my sandbox of new projects. [Note: for the next few weeks, it may be something of a crapshoot as to whether or not you can follow this link and find anything interesting. I'll probably be putting it up and shutting it down a lot while I figure out how I want it to function for the long term. I'd like to reach a state where it's highly available and can route users to a variety of project showcases. More on that in the future!]
I enjoyed doing my own Googling to roll through the process of configuring an EC2 instance to host one of the applications we made during the web development bootcamp. Loading up an Ubuntu image with many of the required packages for the simple user authentication app (pictured below) wasn't too much of a chore, especially with the help of the package.json file to help manage dependencies. The densest new material (though not that bad, either) was learning how to use NGINX to route HTTP traffic to port 3000 from port 80 (so I wasn't routing in user traffic with sudo privileges!) and making the slight changes to the app.js file to accommodate this protocol change.
There'll be much more to share soon. Thanks, as always, for reading, and enjoy a screenshot of today's HTTP interaction with my AWS EC2 web app.
Figure 1. Screenshot-ception! This is a capture I took with a basic user authentication app served up at my new sandbox location (bradleypmartinsandbox.com) through AWS EC2. MongoDB handles the data for user authentication, and user login simply routes to a 'secret page' where I've spat out some unstyled HTML and a link to a recent project screenshot (that you can probably find referenced a few blog posts ago). I'll look into HTTPS routing and user-friendly persistence of the sandbox domain soon (along with adding more interesting projects, of course!).
As of the post last week, I'd been exploring a number of database technologies and had set up a simple serverless chat application via AWS Lambda (thanks to the help of Frank Kane and Brian Tajuddin's udemy.com course on the subject). At the end of the post, I briefly mentioned wanting to explore more front-end stuff (such as the HTML, CSS, and JS mentioned in this post's header) so I could move toward having more agency in creating web apps that are completely my own.
Toward that end, I threw myself into Colt Steele's Web Developer Bootcamp (also on udemy.com) and was blown away by how much value I got out of it. Not only did I get a ton of practice with HTML, CSS, and JS, but also I got a bunch of exposure to even more backend tools, conventions, and languages like Node.js, Express, Mongoose, RESTful routing, and MongoDB. I still have a ton to learn in the web development space (and probably always will!), but feel much closer to being confident in spinning up my own deployable (and hopefully functional!) apps.
I think this is as good a time as any to lay down a tangible "pivot point" in my development as a software engineer. I love taking courses and learning new stuff in a structured environment, but I think it's equally (if not more) important to be starting up my own projects and getting them deployed. Stay tuned for another post about milestones, challenges/successes, and progress during the next week. Until then, I'll share some screenshots of progress on the YelpCamp app we built as a final/cumulative/ongoing project in Colt's web dev course.
Source code from my time in the course can be found at my GitHub location (https://github.com/bradleypmartin/webdevbootcamp). Different versions of the YelpCamp project code are in there; the photos below are from the YelpCampFinal build. There's still some more functionality that Colt and his TA's have been adding over time (and that I have yet to put in the app) like fuzzy search, password reset, interaction with Google Maps API, etc.... and when I include some of those extras, they'll be included in the Final build as well.
Figure 1. Landing page for the YelpCamp website. The CSS for this landing page was pretty cool to work through, as it involved the display of a transitioning slideshow of 5 photos (one of which is shown in the screengrab here).
Figure 2. Index page for the YelpCamp website. In the top-left corner of the photo, you may be able to pick out hints of authentication/authorization functionality, which was indeed a cool part of this course. The material we covered here was a good complement to the AWS Lambda project discussed in my last post (where we were using Cognito to take care of authentication).
Figure 3. The YelpCamp comments page was an excellent exercise not only in additional functionality of the website, but also in nested application of RESTful routing (for Create/Read/Update/Delete operations on comments for each campground).