HealthTracker is a MERN stack application that allows you to save all your health information in one place. It is made to allow you or a care giver to maintain all the information from many different providers in one place so you can monitor your health and easily share that information with your doctor at your next visit.
This was a group project. I contributed to the team with the idea of the app, defining the database architecture/models so that the front end and back-end were communicating and processing data. I also I developed data visualization charts to track height and weight measurements over time.
Major Technologies Used: React, Node, MongoDB, Fushion Charts, and Material UI. NPM Packages used: Mongoose, Fushion Charts, Passport, Axios, Body-parser, Connect-mongo, Express, Express-sessio, Morgan.
See the Code
See the Site
My Handout
Your memory becomes a factor as you only want to click on the ones that you haven't clicked on yet. Your current score increases each time you click on a new character. The highest score you can get is 12. If you click on something you already clicked on you will loose and that resets the game. Your highest score is kept.
This is memory game that is built with React. It breaks up the application's UI into components, manage component state, and respond to user events.
Technology Used: React and Node
See the Code
See the Site
This full stack app scrapes news articles from the StarTribune newspaper and posts it on the application using handlebars. The scraped articles are saved on a MongoDB database. The articles can be saved, which moves them to another page, deleted from the site and the database and they can post comments. The user can also scrape the StarTribune for new articles.
The technologies used: HTML, CSS, Bootstrap, Handlebars, Node, NPM Packages included: Express, Express-handlebars, Mongoose, Body-parser, Cheerio, Request, Axios, and Morgan.
See the Code
See the Site
If you just want to judge randos on the internet go ahead - rate some sick burnz. You literally just pick spicy or icy. That's it. Go forth and judge. Or, if you actually think you're funny, prove it.
This app will take you through the fun world of jokes and burns. Be prepared to laugh and share one with your neighbor! You are brought to the main page where you have options of to either Show Jokes, where you can judge them as Spciy or Icy, or Add Your Own. This app uses a MySQL to store the jokes and the rating information and meets the MVC Paradigm.
The technologies used: Database - MySQL, Node, JavaScript, jQuery and ScrollReveal. NPM Packages: Express, Express-Handlers, Body-Parser, MySQL, MySQL2, FS, Nightmare, Path, Sequelize and Sequelize-cli.
See the Code
See the Site
This full stack app prompts the user to pick a destination then gives them information on current weather, restaurants, hotels and places of interest to see at their destination city.
This was a group project where my contributions were the original idea, working on the front-end using a new CSS library - Materialize - project management, and writing the ReadMe.
The technologies used: HTML5, CSS3, API - GooglePlaces and OpenWeather Libraries, Materialize for framework and autocomplete, JavaScript, jQuery, Database - Firebase.
See the Code
See the Site
This app is all about eating burgers, yes, that's right! This app logs burgers with MySQL, Node, Express, Handlebars and a homemade ORM (yum!). It follows the MVC design pattern using Node and MySQL to query and route data and Handlebars to generate the HTML.
The technologies used: HTML5, CSS3, Bootstrap, Handlebars, Node.js, MySQL Workbench, NPM Packages (Express, Express-Handlers, Body-Parser, MySQL, and dotenv).
See the Code
See the Site
This is a friend finder app that will help you find your new best friend. It is a full stack app that gives the user a survey to fill out and and using that information to find their best match from the current users listed.
The technologies used: HTML, CSS, Bootstrap, Node.js. NPM Packages include: Express, Body-Paser and Path.
See the Code
See the Site
This is a fun movie trivia game that asks the user to pick the best answers to an action movie question. The user only has so much time to answer the question and the correct answer will not be shown if they do not choose from the options in time. The user's answsers are tallied and the totals are shown to the user at the end and they have the option to play again.
The technologies used: HTML, CSS, Bootstrap, then JavaScript for the logic and jQuery to manipulate the HTML.
See the Code
See the Site
This is an Amazon-like storefront using MySQL. The app displays products for sales, takes in orders from customers and depletes stock from the store's inventory listed in MySQL after a purchase. This app also provides a manager view which allows the user to display product information, add to inventory, view low inventory items and add new products.
The technologies used: Node.js, JavaScript, and MySQL. NPM Pages include: Inquirer, Dotenv, Table and MySQL.
See the Code
This app is much like iPhone's Siri however, while SIRI is a Speech Interpretation and Recognition Interface, LIRI is a Language Interpretation and Recognition Interface. LIRI is a command line node app that takes in parameters and gives you back data. It shows your latest tweets. It uses dotenv file to hide personal account and key information. It will also find a song you enter using Spotify and give you information on the Artist(s), the album that the song is from, a preview link of the song from Spotify. You can also enter a movie title and the OMDB API will give you the title of the movie, the year it came out, the IMDB and Rotten Tomatoes ratings, the country where it was produced, the language spoken, the plot of the move, and the actors in the movie.
The technologies used: Node and Request, API.
See the Code
I created a train schedule application that incorporates Firebase to host train data including: first train time, frequency of train, train name and destination. A user can submit this information on the application and it is saved to Firebase. The application retrieves and manipulates this information with the help of Moment.js. The website provides up-to-date information about the various trains including: their name, destination, frequency, arrival times and how many minutes remain until they arrive at their station. The application does update the current time and the arrival time and minutes to arrival on its own with out refreshing the screen.
The technologies used: HTML, CSS, Bootstrap, JavaScript, jQurey, Firebase,Moment.js.
See the Code
See the Site
This is a scheduling app taking in the user's name and number of guests and either seats them at a table or puts them on a waiting list.
The technologies used: HTML, CSS, Bootstrap, JavaScript, jQurey, Firebase,Moment.js.
See the Code
See the Site
.png)
This app uses GIPHY API to make a dynamic web page that populates with animal gifs of their choice. If the user doesn't like the animal options listed they can add their own!
The technologies used: HTML, CSS, Bootstrap, JavaScript and jQurey to change what is rendered on the browser. It also calls on GIPHY API to get the gifs rendered for the user.
See the Code
See the Site
This is a game where the user must try get their number to match the random one chosen for them to meet. There are four crystals for them to choose from, each one has an unknown value that is chosen at random at the beginning of the game. Each time the user clicks a crystal their score goes up by that value. The goal of the game is for the user's score to match the number displayed. Once the game is over the user's score is reset a new random number is chosen for them to match and each of the crystals are randomly given new values.
Technologies used: HTML, CSS and jQuery.
See the Code
See the Site
This is an 80s style Hangman game that uses key events to listen for the letters that the user will type. While playing, it shows the user how many guesses they have remaining as well as the letters they have already guessed.
The technologies used: HTML, CSS, Bootstrap, and JavaScript
See the Code
See the Site
