Zeke Graves Portfolio

Portfolio

Memory Matrix Game

Demo Code Info

Memory Matrix

This is a memory game that presents the user with 12 image tiles. The user must click each tile without clicking the same one twice. The tiles are rearranged after each click. The game keeps score of how many unique tiles the user has clicked and the high score from each session.

The main purpose of this app is to practice creating a React app, composing multiple components, and managing state. It demonstrates ability with the following tools and techniques:

React.js for front-end framework, logic, and state management
CSS for UI design, layout, and animations
Javascript/JSX for app logic and interactive elements
Github for app deployment and hosting

Scrape Left

Demo Code Info

Scrape Left

This app allows the user to easily scrape the most recent articles from Truthout.org, save them to a database, and display them in a single list with a summary and link. Once scraped, the articles can be saved and commented on. From the Saved view, the user can add notes which are then saved and displayed with the relevant article. Articles can also be deleted.

The main purpose of this app is to create an aggregator that can be repurposed to scrape and save from any website that posts frequent updates. It demonstrates ability with the following tools and techniques:

Handlebars and HTML for web page templates and structure
Materialize for CSS framework
Node.js for Javascript runtime environment
Express.js for server setup and routing
Javascript for app logic and interactive elements
jQuery for additional Javascript functionality and AJAX calls to server
Heroku for app deployment and hosting
MVC design pattern for app architecture
MongoDB for data persistance
Mongoose, Cheerio, and Axios npm packages

Burger Devourer

Demo Code Info

Burger Devourer

This app allows the user to create different burgers that they would like to consume and add them to a MySQL database. These burgers will be displayed to the user with a "Devour" button. On clicking this button, the burger will be consumed, it's status will be changed to "devoured" in the database, and it will be displayed to the user in a list of "Consumed" burgers.

The main purpose of this app is to demonstrate ability with the following tools and techniques, especially Handlebars and custom ORMs:

Handlebars and HTML for web page templates and structure
Materialize for CSS framework
Node.js for Javascript runtime environment
Express.js for server setup and routing
Javascript for app logic and interactive elements
jQuery for additional Javascript functionality and AJAX calls to server
Heroku for app deployment and hosting
MVC design pattern for app architecture

Zombie Friend Finder

Demo Code Info

Zombie Friend Finder

This app creates a compatibility-based "FriendFinder" application -- basically a dating app. This full-stack site takes in results from the users' surveys, then compares their answers with those from other users. The app will then display the name and picture of the user with the best overall match. The app includes input validation to prevent the user submitting empty data fields and posting them to the API (../api/friends).

This app uses the following tools:

HTML for web page structure
Materialize for CSS framework
Node.js for Javascript runtime environment
Express.js for server setup and routing
Javascript for app logic and interactive elements
jQuery for additional Javascript functionality and AJAX calls to server
Heroku for app deployment and hosting

Zmart

Demo Code Info

ZMart

This app creates a storefront with separate modules for customers, managers, and supervisors to perform tasks. The app takes in orders from customers and depletes stock from the store's inventory. The app allows managers to add new products and track and replenish inventory.The supervisor module allows you to track product sales across your store's departments and then provide a summary of the highest-grossing departments in the store.

This app uses the following tools:

MySQL for data persistence and database queries
Node.js for Javascript runtime environment
Javascript for app logic
inquirer npm package for user input
cli-table npm package for formatting data tables for display
mysql npm package for database queries

Comics Time Machine

Demo Code Info

Comics Time Machine

This is a entertainment and shopping app that retrieves Marvel comic books that were published the week of your birthday (or any other date). The app queries the Marvel API and returns a selection of comics (with image thumbnails) for the submitted date. When the user clicks one of these thumbnails, the app queries the eBay API to return the top result for that comic

The main purpose of this app is to demonstrate ability interfacing with APIs. It uses the following tools and techniques:

HTML
jQuery for Javascript library and AJAX calls
Materialize for CSS framework
Javascript for app logic and interactive elements
Marvel and eBay APIs