Framework Apps


Password Generator

This project was completed as part of a Udemy course, The Modern Angular Bootcamp (2020), to help me learn the basics of Angular. The lecturer and author of the course, Stephen Grider, walks the student through creating this application to showcase some of the main features of the Angular MVC framework. I personally added uppercase letters to the password generator's capabilities, because only lowercase letters could be used in passwords from the vanilla app from the course.


My code for this Password Generator app is available here on Github, and the app itself is available here.

Typing Checker

This project was completed as part of a Udemy course, The Modern Angular Bootcamp (2020), to help me learn the basics of Angular. The lecturer and author of the course, Stephen Grider, prompts the student to perform programming tasks critical to building this application, and then reviews his method for the student to compare their results with. I found that this sort of lecture structure worked better for me, because I could try programming parts of the app on my own and did not have to follow along with Stephen's coding. It also provided a nice way of checking your work if you got stuck on something, which a lot of online courses have problems with. You can view a tutorial of my version of this Typing app here.


I have updated this application recently (as of 3/2020) to include additional "modes" beyond the original single sentence matcher, including the paragraph and "full test" (multiple paragraphs) modes. I added sound effects to alert the user that there is a mistake in the text they have input whenever they input more text, and disabled copying text into the input area so the user must use the keyboard to type all the text. I changed the styling of the "correct" and "incorrect" text to a friendlier shade of green and to underline mistakes (which helps when there is an error with a space character that cannot be colored red), respectively. I also added some basic statistics for the user to view upon the end of the "tests" - namely the total time taken to complete the test, the words per minute (WPM) with the caveat that is WPM in Latin, not English. As a result, I decided to include the measurement of characters per second (CPS) which is a more language-agnostic measure of typing speed. I am planning on adding more changes soon, like a different mode that allows the test to complete with text that is not a perfect match, with the results including an accuracy statistic, and some way to report a score (maybe an email, or a screenshot pdf).


My code for the Typing Checker app is available here on Github, and the app itself is available here.

Rangoli

This project was completed to solidify my understanding of the basics of AngularJS, as taught in this Udemy course, The Modern Angular Bootcamp (2020). I had already made this application using vanilla JS, so I worked through migrating it to the Angular framework and hosting it as a web application in its own right, not just a feature of my website. Using the previous projects as examples, I was able to quickly get the app working again in Angular and back up on my site!


My code for the Rangoli app is available here on Github, and the app itself is available here.

Fidget Spinner

This project was completed to solidify my understanding of the basics of AngularJS, as taught in this Udemy course, The Modern Angular Bootcamp (2020), and to produce code that could be used in other apps, such as a roulette wheel or board game style spin selector. I used my logo as the spinner image, and future versions of the app will likely include a range of images that can be spun. I hope you enjoy this basic version of the Fidget Spinner app - with the main advantages over a physical fidget spinner being availability, portability, and cost, since it is available on any device that has loaded the app webpage for free, at all times!


My code for the Fidget Spinner app is available here on Github, and the app itself is available here.

Rangoli II

This project was completed to solidify my understanding of the basics of AngularJS, as taught in this Udemy course, The Modern Angular Bootcamp (2020), and to expand upon my original, text-based rangoli generator app. This application works best on a desktop browser if using the animation features, like rotations, but can still generate great rangolis on mobile devices. It allows rotations, inward and outward color shifts (including looping the colors), and color selection for each diamond pattern. This application is still being developed to include more advanced features, so stay tuned for updates.


My code for the Rangoli II app is available here on Github, and the app itself is available here.


If you like this particular image, you can find a few variations on this particular rangoli pattern in my Redbubble shop - feel free to leave a "like"! This pattern is available on multiple items, including pillows, t-shirts, stickers, etc. I personally think the sticker with no background and the red t-shirt are winners, but that's just my opinion!

4-Function Calculator

This project was completed to improve my JavaScript programming, and was a required assignment for the edX course Programming for the Web with JavaScript, which is taught by University of Pennsylvania's top-notch faculty. The course has really helped give me a solid foundation with regular expressions in JS, as well as an easy introduction to the React framework. I look forward to building upon my React foundation developed here with more apps in the near future, since it is the most popular front-end web development framework at the time of writing.


The application is essentially a four-function calculator that can perform basic arithmetic operations, and was built to satisfy requirements outlined by the edX class for robustness and functionality. For example, certain edge-case scenarios were covered, such as divide by zero, consecutive operations, and repeating the last operation by subsequent clicks of the "equals" button.


My code for this calculator app and other assignments for the edX class are not available on GitHub, because they constitute a plagiarism risk for the course.

Binary Calculator

This project was completed to finish the 10 Days of JS tutorial, and was created using vanilla JS. The code is not all that refined, since I was focused mainly on getting the app working before refactoring it. The straightforward solution works best for the HackerRank tests, because there is not much explaining if different classes or variables can be added, and certain requirements on ids and attributes must be met. For example, I initially had each row of buttons in their own div, but they needed to be merged into a single div with an id "btns" for any of the tests to work - but the calculator logic worked and the calculator performed exactly the same to a user. With these sorts of strict requirements in place to pass the tests, creativity and more refined solutions are really hampered.


The application is essentially a four-function calculator that can perform basic arithmetic operations, but it uses a base-2 (binary) input and display format. The binary calculator specs only require positive operands, and there can be negative results to operations but the "-" button does not function as a unary "negative" operator, only as a subtraction operator, so the second operand cannot be negative.


My code for this calculator app is available here on GitHub, and the app itself is available from Github Pages here.

HotS Soundboard

This project was completed to showcase my current React skills that were gained from the Programming for the Web with JavaScript and the Modern React with Redux online classes. The app is relatively straightforward to use - simply click on a hero name tab to load the soundboard for that hero (with the default being Tyrael), and then click any of the quote buttons below to play that particular quote!


More features are planned in the near future, including more quotes, more heroes, a "stop" button, and quicker loading.


My code for this soundboard app is available here on GitHub, and the app itself is available on Vercel here.

Honeypot App

This project was completed as part of the Java Web Developer Nanodegree, through the Udacity online education provider. It was the first project (of four) in this particular Nanodegree program, and demonstrates the basic features of the Java Spring Boot framework in a full-stack web app. The application was intended to serve as a proof-of-concept (POC) app at a startup that intends to compete with online services like Dropbox - by providing file, note, and credential storage for a given user. It uses Spring Security to validate users, Hibernate to "persist" data, Thymeleaf to template the frontend UI from the backend data model, and Bootstrap to accelerate and standardize frontend development, and Selenium and JUnit for integration testing.


The project is hosted on AWS as an EC2 server instance, and is deployed to the domain www.lovelyhoneypot.world - this website name is a reference to how storing all this data in one place provides a prime target for hackers and other malicious actors on the Internet, who look for servers rich in user information ("honeypots") to exploit and gain access to passwords and user accounts - like those included in the "Credentials" storage feature of this application. So use this application at your own risk - it was intended as a POC and an exhibition of my new Spring Boot skills, not as a secure service. Any information you put on this app is also liable to be deleted at any time, since I may need to reboot the server and that will clear all stored data - again, this is not a fully-functional, user-ready app.


The next steps for this app would be to add data persistence, so that the users, notes, files, and credentials are not deleted from memory whenever the app is restarted on the server, and to make the app more scalable. However, both these steps cost significantly more money - since they both involve adding more server instances with a load balancer and adding an external database to store the data. So as a POC app, this works just fine, because it demonstrates the basic functionality of the app, without necessarily having a massive user base or a large-scale deployment. Don't expect much to change with this app in the near future - I have other projects that can be leveraged better to work on!


My code for this "honeypot" app is available here on GitHub, and the app itself is available here.

C++ Route Planner

This project was completed as part of the C++ Nanodegree, through the Udacity online education provider. It is the first project (of five) in this particular Nanodegree program, and involves a basic route planner application written in C++. The project uses CMake to build the application, because it consists of multiple files, and runs an A* search algorithm to find the shortest route between a start point and destination. This project gives a basic outline for the Waze or Google Maps directions feature, which uses a similar algorithm to find the shortest route to get somewhere.


The next step for this app would be to add a frontend user interface, with this application hosted on a backend server to plan routes given the current map. After that, different maps would need to be added so that users can find local routes that satisfy the "shortest-path" requirement.


My code for this route planner app is available here on GitHub.

Let's Connect