app demo

Chris Rogers

Software Engineering
Web Development
Information Technology

Welcome

Hi! I'm Chris. Welcome to my portfolio. Here I will be posting entries and videos about school, personal, and work projects while maintaining academic and professional integrity. Some of my school and personal programming projects can be found using the menu below.

As of October 2024, I have completed my ABET-accredited Bachelor of Science degree program in Software Engineering at Arizona State University. For my capstone project, I worked with a team to create a virtual reality "asteroid surface experience" using Unreal Engine for NASA's mission to Psyche. I have also taken (or am currently taking) the following online courses/bootcamps:

Docker and Kubernetes: From Zero to Hero
C# .NET with MS SQL Complete Beginner to Master
The Complete Web Development Bootcamp
C Programming with Linux

I have worked in IT for many years performing various technical support roles including help desk and operations support for popular name brand retailers.

Asteroid Surface VR Experience

icon | Psyche icon | NASA icon | Unreal

For my capstone project at ASU, I had the amazing opportunity to work with a team to create a VR experience using Unreal Engine. NASA and ASU tasked us with creating an experience of what it might be like to walk around on and explore the asteroid Psyche, for which NASA has launched a probe to explore the space object. As total newbies to VR or 3D game development in general, we had no idea what our project would entail. Our experience as software engineering students had been limited to Java, C, perhaps some JavaScript and a handful of other general programming languages. The project led us into the land of 3D world building, visual programming, binary object collaboration, player interaction, stereoscopic image implementation, and much more. In the end, we created a product we were all proud of, one that gave us confidence to take on new creative engineering paradigms.




About this portfolio site

icon | Bootstrap icon | HTML icon | CSS

This portfolio was mainly developed using Bootstrap with a little customization.




About my old site

icon | Django icon | Python icon | SQLite icon | HTML icon | CSS icon | Markdown

My old portfolio website was made using Django/Python (with SQLite), HTML, CSS, and Markdown. It was based on the Wiki assignment from Harvard's CS50 web programming course. The pages were written in Markdown files (with some HTML) and then converted to pure HTML. I liked the original idea of using Markdown files for the pages because it's simple, fun, and easy to work with. Instead of using the files as the sole means of keeping track of entries, I implemented an entry model so that the objects are saved in the database as well. This allows for easy entry/page handling in the admin console. I modified much of the CSS, however some of it is from the original project which uses a little Bootstrap. I created a color palette by uploading the banner image (original photo by me) to PaletteGenerator and then adjusting the colors to my liking. I implemented screen size responsiveness for mobile screens.




React

icon | Node.js icon | React.js icon | HTML icon | CSS

I took a mobile development course as an elective for my degree program. It covered the basics of Node and React for Android. Some examples of the projects we worked on include: tab navigation, buttons, state changes, asynchronous storage, Redux, media player, maps, API integration, menus.




Application development: Node.js to-do list using NoSQL database

icon | Node.js icon | EJS icon | expressjs icon | MongoDB icon | Bootstrap icon | JavaScript icon | HTML icon | CSS

This is a project (GitHub) from the 2023 Web Development Bootcamp on Udemy. It runs on Node.js/Express and uses EJS for templating. The database is NoSQL using MongoDB and Mongoose js, and part of the project was also hosting the db using MongoDB Atlas. It allows for new, custom list creation by entering a new word for the URL, so if you want a to-do list for work you would go to "/Work", etc. It also has a default list for "Today". It uses lodash to fix capitalization when creating a new list or accessing a previous one, so it doesn't matter if you type in "/WORK" or "/work", it will end up on the proper list "Work".

Although I was previously familiar with using templates and embedded scripts, having worked a fair amount with Django, it was a good experience learning how to do things the JavaScript way. I also became comfortable with NoSQL during this project; using Mongoose and spending a good amount of time in the MongoDB Shell.

The instructor used some functions in which their callbacks had been deprecated, so I had to do some actual programming on this project. Many of Mongoose's CRUD operations no longer do callbacks, so instead you need to either use an asynchronous function and then use "await", or you can do a cool try/catch statement using anonymous functions, which is what I chose to do.

icon | find-example




Application development: RESTful API

icon | Node.js icon | EJS icon | expressjs icon | MongoDB icon | JavaScript icon | Postman icon | Studio 3T

This is a project (GitHub) from the 2023 Web Development Bootcamp on Udemy. It runs on Node.js/Express and uses EJS for templating/URL. The database is NoSQL using MongoDB and Mongoose JS. We used Studio 3T (formerly Robo 3T) to manage and view the database, and Postman for the API interaction.

It's a simple wiki-style API for CRUD'ing articles in a MongoDB database. Its only parameters are "title" and "content". We also learned how to chain route handlers to reduce redundancy.

I had previously programmed a RESTful API in my distributed systems course; I hosted an AWS EC2 Java/Gradle API "Mad Libs" style game, where you could use a query to fill in the appropriate blanks (noun, verb, proper name, etc.) and it would return you the completed story. We also did a basic calculator API.




Security: Django authentication and authorization

icon | Django icon | Python icon | SQLite icon | HTML icon | CSS

In this CS50 project, Django's built-in security features for authentication and authorization are utilized. At the time of writing this, Django uses PBKDF2 for password salting, and it includes many useful methods such as authenticate and validate_password. This auction-style website uses Django's session framework to manage logins.




Security: bcrypt, environment variables, Google sign-in via Passport and OAuth

icon | Node.js icon | EJS icon | expressjs icon | MongoDB icon | JavaScript icon | Passportjs icon | OAuth icon | Studio 3T

This is a project (GitHub) from the 2023 Web Development Bootcamp on Udemy. It runs on Node.js/Express and uses EJS for templating/URL. The database is NoSQL using MongoDB and Mongoose JS. We used Studio 3T (formerly Robo 3T) to manage and view the database. Environment variables were used to keep the keys safe. Initially, bcrypt was used to hash and salt passwords, then we upgraded to use OAuth 2.0 with Passport to login via Google.

The concept is a website that lists "secrets" that any user can save to the site anonymously. It allows users to register and login using an email and password, or they can login via Google. If they login without Google, their password is hashed and salted using Passport and then saved in the database. If they choose to login via Google, their Google ID will be saved to the database instead.




Agile development: Scrum board program conversion

icon | Java icon | Gradle icon | JUnit icon | Jacoco icon | SpotBugs icon | Checkstyle icon | Travis CI icon | Taiga

This was my first time working as part of a Scrum team on an Agile development project. It was also my first time working with legacy code to create something new. We were given an old "diary manager and tool for scheduling personal projects" called Memoranda. It was up to us to come up with a new idea using the code, and we decided to convert it into a Scrum board application. It's a desktop Java/Gradle program. For testing we used JUnit, Jacoco, SpotBugs, and Checkstyle, and we also used Travis CI for continuous integration via GitHub Actions. We used Taiga for our Scrum board. I also compiled a Wiki of responsibilities and instructions.




Database programming: vehicle maintenance database

icon | Java icon | MySQL icon | Checkstyle

This team project uses Java's JDBC libraries to connect to MySQL. It uses a simple CLI menu system based on potential SQL queries. The project required dummy data for demonstration, so I decided to write an additional program to create that dummy data (as explained in the video). The data outputs as SQL insert statements which can then be used to easily insert data into the database. I used the Department of Energy's Fuel Economy API to compile vehicle data, and random name and address generators for the owner data.




Design patterns: text adventure game

icon | Java icon | Gradle icon | JUnit icon | Jacoco icon | SpotBugs icon | Checkstyle icon | Travis CI

Here's a Java/Gradle project which uses the Jacoco code coverage tool, as well as SpotBugs and Checkstyle plugins. It was developed using Travis CI (a continuous integration tool) via GitHub Actions. It includes an option to run a simulated version of the game which outputs the results of commands entered automatically as an example, though this is not demonstrated in the video. In the video I incorrectly state that the characters use a Builder design pattern when they actually use a Factory pattern.

Design Patterns used:

Decorator: Level is a decorator interface which layers on character’s “titles” and level up bonuses, so if your title at level 1 is “Apprentice”, when you get to level 2 your title will be “Apprentice, Adventurer” and so on. Level 2 hit point and mana bonuses will layer on, so each level will give you many more bonus points than the previous level because it adds them to the previous level bonuses.

State: State is used for changing a character’s state from AwakeState to SleepingState (using “wake” or “sleep” commands), and their action responses will differ depending on the state. A character cannot walk around or do anything besides wake up when they are in sleeping state, but they will get messages which are specific to the actions inputted about being asleep or awake (i.e., “You are already awake”, “You can’t move while you’re sleeping.”, etc.).

Builder: SandwichBuilder is used to build Sandwich objects. Using the “menu” command, a menu for creating a sandwich will be displayed and when the player is done, they will receive a sandwich and (in the future) they will be charged the appropriate cost.

Factory: Character is an interface which is used by the abstract class CharacterCreator. The concrete factories FighterCreator, MagicUserCreator, and MonsterCreator implement CharacterCreator and all produce objects respective of their class names.

Features implemented:

  • Ability to choose player class and set your character’s name. (Factory DP)
  • Ability to sleep and wake up. (State DP)
  • Implemented a deli menu system for building and buying sandwiches. (Builder DP)
  • Level up which increases max hit points and mana, and also adds a title in your stats command. (Decorator DP)
  • Ability to move around to different rooms using custom command prompt which displays a room description, exits, current hit points and mana, and also messages in response to input.
  • Stats command implemented to display health, mana, level, title, and name.
  • Ability to wield and remove weapons, including checks for already wielding or not.
  • Basic attacks using punch or weapons implemented (but not in actual gameplay yet)
  • Ability to eat and cast a healing spell.
  • Eating food and using healing spells will only heal you up to your max levels.
  • Implemented a help menu which displays available commands.





Distributed computing: consensus algorithm

icon | Java icon | Gradle icon | JSON

Consensus algorithms use multiple processes or nodes to achieve agreement on some value (like in blockchain), and to maintain integrity of a system by increasing its resiliency (like for load balancing). This project implements a consensus algorithm wherein a leader class divides up the work of encrypting a string and assigns distributed nodes different chunks--using muli-threading--to carry out the work. The leader then sends a decrypted and an encrypted version of the chunks to different nodes than they were originally from, verifying that the encryption process was done correctly. If a node reports a disagreement, the leader will check the work of the original node and the one reporting a discrepancy and determine which is faulty, then disconnect it. It will repeat the process until it has consensus between all nodes. A singleton class is used for a TCP server (see section "Distributed computing: TCP server and WireShark") which keeps track of the node sockets. JSON (using JSONObject in Java) is used for data serialization.




Distributed computing: Protocol Buffers memory game

icon | Java icon | Gradle icon | Protobuf

This program uses the same server socket elements from the TCP server "Distributed computing: TCP server and WireShark" example. It consists of a server class which uses multi-threading to handle client connections, as well as a client class. It uses Protocol Buffers as its means for data serialization. Once a game is started, multiple clients may connect to the server and play the same game simultaneously.




Distributed computing: Java TCP server (and some WireShark)

icon | Java icon | Gradle icon | WireShark icon | AWS

This Java (with Gradle) TCP server and client was given as an example for my Distributed Systems course at ASU. It is publicly available as part of a repository of examples here Since I'm unable to share the code for my assignment submission, I used this example to show the basics of how to create a socket server and client in Java. In the video I demonstrate how to use it as well as some basic WireShark packet capturing. Part of the original project was to also serve the server on an AWS EC2 instance.




Parallel computing: C image processor

icon | C icon | GCC icon | Valgrind

Parallel computing using multithreading isn't always the best option for your program. An image processing program may benefit from the fact that it can utilize a multi-core system to assign multiple threads to process an image filtering algorithm simultaneously, because--when dividing up an image for processing--you can assign individual threads to process each division. A program which depends on a particular order of execution may not be able to take advantage of parallel processing.

This project demonstrates the effectiveness of parallel computing using the C programming language. The short video gives a demonstration of the program and also some basic procedures of compiling and testing the program.

As with all school projects, I can't share the code publicly for academic integrity reasons, however I can share my code via Zoom to prospective employers or allow them to view my private repository on GitHub.




Text editing: Vim

icon | Vim

I learned Vim on the job working in a data center for a grocery distribution company. I worked daily with AIX and Linux servers, and since I was often on the command line working with logs and various files, it was very convenient to learn new ways to not have to use a mouse; switching back and forth between the keyboard can be clumsy and annoying if you're in a hurry looking for that error or remotely copying and renaming files. Eventually I started writing shell scripts and then got into programming in general, so I was able to keep Vim in my tool belt and I've never looked back.