My Projects

Form to create a profile

Other users are displayed
Colab

Connect with like-minded individuals to collaborate on musical projects. Users can create a profile, view other users' profiles, and chat with other users.

This is a full MERN stack application that I developed with three other developers. We utilized Bootstrap for adaptability to large and small screens.

My role in the team centered around implementing the third-party APIs. I created the chat function using PubNub and secured the profiles using Passport.js with a local strategy. I also created the functions to upload and serve the images.

Technologies used:
  • HTML
  • CSS
  • JavaScript
  • React
  • Fetch and Axios Requests
  • Bootstrap
  • MongoDB
  • Mongoose
  • Concurrently
  • Morgan
Access live application Visit code repository
Landing page of National Parks app

Search results for Utah
National Parks in the Pandemic

The best way to get away from the bustle of daily life while maintaining social distance is visiting any of the nation's beautiful parks. Choose a state to view all of the parks and status of the coronavirus.

This is a front-end application that was created by me and two other developers. We utilized UIkit for adaptability to large and small screens.

My role in the team centered around utilizing plain JavaScript and jQuery to make AJAX requests to the National Parks API and other functions of the app. I also designed the landing page.

Technologies used:
  • HTML
  • CSS
  • JavaScript
  • jQuery
  • AJAX Requests
  • UIKit
Access live application Visit code repository
Application landing page
Summary page displaying the total count

Guest details table in application

Form to add a guest
Invitr

Users can keep add and view wedding guests and view which guests still have yet to RSVP. Users can add guest's phone numbers, email addresses, and mailing addresses.

This is a full-stack application that was created from scratch by me and my team. The front-end was created with Skeleton CSS for a responsive layout that easily adapts to large and small screens.

My role centered on the team on the function and design of the front-end, but I also wrote the Sequelize queries and set up the database.

To test this app, use the example account with the following credentials. Dummy data was provided by JSON Placeholder.

Email: example@email.com

Password: Example

Technologies used:
  • HTML
  • CSS
  • Skeleton CSS
  • JavaScript
  • jQuery
  • node.js
  • express.js
  • Handlebars.js
  • ESLint
  • Travis CI
  • Github
  • Heroku
  • JawsDB
  • MySQL
  • Sequelize
  • Passport.js
  • Nodemailer
Access live application Visit code repository
Application landing page
Graphs displaying the totals
Workout Tracker

This app enables the user to add and keep track of exercise routines. The routines are divided into two categories: resistance and cardio. The user adds the workout duration and other details about the workout. On the dashboard page of the application, the user can view the total statistics of the workouts throughout the usage of the app.

The Workout Tracker is a full-stack application. The front-end was provided as starter-code, which gave me the opportunity to refine my skills as a back-end developer.

I was given code that my instructors had written, and I was given the task to read and understand the front-end without any human explanation. Then I created the back-end to answer the many different calls and requests the front-end made.

The front-end comprised of HTML, CSS, and JavaScript. I developed an Express server that served up those pages and stored the data in MongoDB through Mongoose. The deployed application is hosted on Heroku and the database is on MongoDB Atlas.

Technologies used:
  • HTML
  • CSS
  • JavaScript
  • jQuery
  • Heroku
  • Github
  • Fetch API
  • Express-js
  • MongoDB
  • Mongoose
  • MongoDB Atlas
Access live application Visit code repository
Application landing page
Screenshot displaying an active service worker
Budget Tracker

This application enables the traveller to add and subtract funds with or without internet. The app caluclates the running total and graphs the influx of funds.

Like Workout Tracker, this is a fullstack application, but Trilogy created much of the front-end as starter-code. Doing so left me free to practice creating service workers.

This application utilizes service workers and local storage. Doing so enables the user to still use the app without internet. The application adds all of the data to the database on MongoDB once a connection is established, so no data is ever lost.

Technologies used:
  • HTML
  • CSS
  • JavaScript
  • jQuery
  • Github
  • Heroku
  • Service Workers
  • Local Storage
  • Express.js
  • MongoDB
  • Mongoose
  • MongoDB Atlas
  • Web manifest
  • Caches
Access live application Visit code repository