Utilizing NEXT.js, strapi, mongoDB, Stripe, and Google Firebase, CRAVE is a full-stack mock food-ordering app presented as the capstone project for my course.

While this project taught me plenty about connecting the front end to the back end, the greatest lessons emerged from the rocky process of deployment. From breaking version mismatches between the starter code and present techologies, to issues with docker containers running on my current generation MacBook Pro, I learned to try, try again, then try something completely different.

Against these setbacks, I was still able to deliver a MVP within the time constraints of my course. As it stands, CRAVE demonstrates my knowledge of the technologies listed above, as well as authentication (including OAUTH) and working with non-relational databases through a CMS like Strapi.

View the repository or see it in action!

Watch the three-part video presentation here:

• Part One
• Part Two
• Part Three

A fully-functional front end application built with React. Bad Bank is a mock banking application that allows users to create accounts, log in and out, make deposits and withdrawals, view their transaction history and ... everyone else's information. Hence the name. Bad Bank equals no security.

Presented as the final project for the middle portion of my course, Bad Bank gave me the opportunity to take a dep dive into context, and a first foray into authentication. As a single page application, I gained valuable experience with routing, and was also able to practice breaking my code into compact and reusable components.

The project was built using create-react-app and deployed to an AWS S3 bucket.

View the repository or see it in action!

Watch the video presentation here

No starter code. No copied and pasted functions. Word Game is a clone of that popular word solver recently purchased by the New York Times. Apart from sourcing the word list from the original game, I wrote every line of code to help cement my understanding of React.

In a notable variation from the original, Word Game selects a new word at random every time the page loads, so it can be played over and over.

As an extra-curricular project, and an exercise in learning, I plan to continue building out new features, with an eye toward making this app full-stack.

View the repository or see it in action!

This extra-curricular project is my virtual take on the popular board game "Otrio." Essentially multi-layered tic-tac-toe, Trio-O challenges players to make three in a row on the game board using circles of the same color. Players can win by making a row horizonatlly, vertically, or diagonally with pieces of the same size, or in ascending or descending order ... OR ... by nesting three of the same color within each other.

This project challenged me to learn to make divs draggable within the DOM. The entire game board is produced programmatically, and I'm particularly proud of the way the game pieces snap into place once you move them onto the board.

I plan a whole host of future improvements as this project has been a ton of fun to work on.

View the repository or see it in action!

For six years, I rode the MBTA Route 77 bus on my way to and from work at MIT. For the course's real-time bus tracking exercise, it only felt right to pay hommage to my old commute.

By clicking the 'See Route 77 Bus Locations' button, users will see all currently-operating Route 77 buses in Arlington and Cambridge, MA. Outbound buses are represented with grey icons, and inbound buses are represented in brown.

This project was easily my favorite, and sparked a passion for working with maps. To achieve the current look and functionality, I had to take a deep dive into Mapbox GL, learning to render lines, create custom icon markers as divs in the DOM, and of course, work with async functions and large data objects to render and update bus locations.

View the repository or see it in action!

On page load, a pair of watchful eyes will greet the user, and the pupils/irises will follow the mouse wherever it moves.

This project showcases my use of CSS grid, as well as my ability to programatically change styles based on user actions. Beyond the required scope of this project for the course, I added irises by giving the pupil divs borders, and implemented buttons allowing the user to change the eye color.

View the repository or see it in action!

By clicking a button, users are able to generate a limitless number of PacMen—those iconic classic video game characters—and send them flying across the screen, chomping away.

This project exemplifies my ability to manipulate the DOM, work with timers, and implement edge detection. I am particularly proud of my solution to change the position of each PacMan's mouth, based on increments within setInterval();.

View the repository or see it in action!