Gavin Cheng

Desire to Develop.



Who I am?

I am Gavin Cheng, I am a graduate of Awesome Inc U's Web Developer Bootcamp. After coding for the last several months, it is now one of my biggest passions! Away from the keyboard, I am an avid outdoors kind of guy. I love to shred some slopes on my snowboard and to play tennis every chance I get. I have two dogs (Thea, the Siberian Husky and Cayden, the Bernese Mountain Dog).


Why Bootcamp?

Prior to my coding career, I was an Pre-Optometry major at the University of Kentucky. During my senior year, I worked under several doctors only to realize that I wasn't totally in love with optometry as I thought. I decided that going another four years of school and a couple hundred thousand dollars in debt for something I only 'kinda' liked was not the best option for me. Luckily, I found out about a coding bootcamp right here in Lexington, KY. I dabbled with programming during college and enjoyed every second of it. The challenges and multitude of methods it encompasses completely reeled me in. Thus, I took at leap of faith, joined the bootcamp, and have loved every moment ever since!


My Portfolio

This site displays all of my projects since I have started coding. My newest projects are at the top and at the bottom are projects I made when I first started coding. Each post contains a brief description of some of the challenges I encountered and my solution to overcome them. Each project is pushed to Heroku for your convenience to demo. If you have any ideas for me, I would love to hear them!


Technical Skills

JavaScript | PHP | Vue.js | Laravel | jQuery | PostgreSQL | Vue.js | HTML5 | CSS3 | Responsive Design | Git | Github | Heroku | Ajax | Bootstrap | Sass | Gulp | Jekyll | Node.js | Webpack | Bash | Agile Development



SlopeCast

Application that allows users to check the status of their favorite ski resorts quickly and simply.

Made of Laravel, PHP, and used Weather Unlocked API, Google Maps API, and Open Weather API



OBSTACLES:

  • Obtaining and using data from thrid party API's.
  • Creating custom pages for each individual user
  • Styling and responsive design

SOLUTIONS:

  • I used three different APIs for this project. The main one, Weather Unlocked, gave me ski resort information (how much snow, how much of the resort was open, last update, etc.) and figuring out how to make a call and bring back the data I needed took some researching. I added a Laravel package called Guzzle, in which it simplifies making an API call and I could recieve data. I had to modify it to recieve JSON instead of XML and then I created a way to update my results on command.
  • Each user has a different set of resorts that they care about. With Laravel's built in authenication, I have different users with different data personalized to them. I had to make a pivot table for the users and resort and create the logic to call on the resorts that specific user wants. I also used middleware so other users could not see information that does not belong to them.
  • This project was fairly easy so I wanted to add a little bit of flare to my project. I learned little css tricks that made my sight more appealing. I implemented responsive deisgn for better UX. Users can quickly pull up the app on their phone and check their data on the fly.

Notes:

I currently have most resorts hardcoded because the Weather Unlocked API only allows 1 ski resort outside of North America on their free trial plan. This project was very fun and relativily easy.

Future Implementations

  • Upgrade to premium plan for more resorts
  • Add photos user photo input for each resort
  • Build a community so people can actually use the app and help each other
  • Technologies:

    Laravel, PHP, HTML, CSS, Bootstrap, Weather Unlocked API, Google Maps API, Open Weather API


    LaraMail

    A self-contained messaging system for use in other applications. Users can draft, create, receive, delete, and send messages to other users on the server

    Made with Laravel



    OBSTACLES:

    • Required pivot tables for the many to many relationships. A single message could be given to multiple recipients. So when one user 'reads, deletes, stars' a message, the other users do not get the response on their individual page.
    • There were many different variables that had to be accounted for as we added new features
    • This was a group project, thus we ran into multiple merge conflicts.

    SOLUTIONS:

    • A pivot table for Messages and Users was created. Laravel's eloquent model helped take care of calling the correct columns. Take very baby steps through each call was vital to make sure I was getting the correct data.
    • We started out with just creating a sending a message to one or more recipients. We decided to add new features such as deletes, stars, and reply all. With each feature, it caused many edge cases. But putting all of our minds together, we completly fixed each bug or found a clever way around them.
    • The biggest aspect of this project was working as a team. We had 3 groups of 3 people working on different parts of the application. We created a large list on github issues and assigned delagtes for each of them. Merge Conflicts had to be talked through. After a couple we communicated much much more so conflicts could be avoided.

    Notes:

    I had a phenomenal time working as a team. The conflicts did cause headaches, but it was an awesome challenge to tackle

    Future Implementations

  • Adding the project onto future projects for real use.
  • Added styling above the given laravel default.
  • Push notifications
  • Technologies:

    Laravel, PHP, and Bootstrap


    Connect 4 with LARAVEL

    Have a rivalry you need to settle?

    Made with Laravel, PHP, and PostgreSQL.



    OBSTACLES:

    • Learning Laravel
    • 'Dropping a checker'

    SOLUTIONS:

    • Diving into Laravel was a lot upfront. Building models, controllers, tables, etc. was a lot of trying to wrap my head around what goes where. I learned about using migrations to make those object and I could use the models to comunitcate from my database to my app.
    • I made the entire board by making rows and columns. 'Dropping a checker was just changing the color of an open space. The database kept up with which checker was dropped and it kept track of game the user is on.

    Notes:

    Though this project was a tad on the difficult side, learning laravel through this project was great! It covered a lot of aspects and corners needed to be accomplished and I feel a lot less intimidated about my skills in laravel.

    Future Implementations

  • Having login authenication so users can keep their game data onto the heroku database.
  • Styling so the board doesn't look so bland.
  • Lighting up winning four checkers.

  • Technologies:

    Laravel, PHP, HTML, CSS


    PHP SUPER HEROES

    -Time Constrainted Project-

    Check out the profiles of today’s top superheroes and villians!

    Made with PHP and PostgreSQL.



    OBSTACLES:

    • Fining out the correct SQL sequences.
    • Adding and deleting posts
    • Pushing the project up to Heroku

    SOLUTIONS:

    • I was given a database with information about superheroes. The heroes already had biographies, abilities, friends, and enemies. Learning the JOIN statements to connect each hero and eith info wasn't too difficult. i.e. 'SELECT * FROM abilities JOIN ability_hero ON abilities.id = ability_hero.ability_id JOIN heroes ON ability_hero.hero_id = heroes.id WHERE heroes.id =".$id;', this links the ability to the hero. The hard part was to have 1 profile page file as a templete and the 'id' would dictate which hero the user would be viewing. Using php's GET method was used to overcome this.
    • Most of my time was to used to figure out how to add posts to each of the heroes. PHP uses 'forms' with a button of 'type=submit' to actually create an action for the button. In the PHP, I would call on the id given in the url and the post I wanted to add and delete to control them.
    • The Heroku process had a step up to the usual process. In the app's Heroku page, I had to add PosgreSQL and change the DATABASE_URL to communite with my SSL server.

    Notes:

    I was impressed with myself with this timed project. I did wish I could have done a lot more styling to make it look more comic book like, but I am satified with what I acommplished.

    Future Implementations

  • Login authentication for each of the posts.
  • Extra comic book styling.
  • Adding more heroes along with their friends and enemies.

  • Technologies:

    PHP, HTML, CSS


    VUEmon Says

    Test your memory with this clone of Simon Says! Best records are saved to your local storage.

    Made with Vue.js.



    OBSTACLES:

    • Having the sequence light up in order for a set short amount of time.
    • Capturing the Tap of the user.
    • The styling of the gameboard.

    SOLUTIONS:

    • Having the sequence made was relatively easy. Just had to push a random color onto a sequence array. but the lights a lot more stubborn. The lights show up with a setTimeout function. I have a switch statement set up so when the switch hits the color the timeout would fire off and the light would show. Then there was another timer inisde of the original timeout to turn of the light.
    • To match whether the user clicked the correct tap, I used a counter to increment each tap and compare to the sequence. With each tap I had a timer to light up the piece for a split second to imitate the actual game.
    • I ended up styling the board to have 4 square divs and using 'border radius' CSS to round the outer edges. Then in each of those divs I had another div that rounded the inside of the pieces and colored them the same color as the app background.

    Notes:

    The project was quick to complete, but finishing the timing bugs were tricky. I'm starting to love Vue.js and hope to use it more!

    Future Implementations

  • Adding Vue components for each of the game pieces.
  • Using event listeners instead of function setTimeouts for cleaner and optimal code.
  • Better styling in general to duplicate the original game.

  • Technologies:

    Vue.js, HTML, CSS, Webpack, Bootstrap.


    Sorting Hat

    -Time Constainted Project-

    “Tired of being a muggle? Come in to the wizardly world of Harry Potter. I will decide your house based on your personal attributes.”

    Made with Vue.js.



    OBSTACLES:

    • Time Limit
    • v-directives
    • animations

    SOLUTIONS:

    • I had seven hours to complete the project; to see how much I could accomplish on my own with Vue.js. The MVP was easy, I just had to randomly display a house from Harry Potter onload. I mapped out my process at first and followed my plan throughout the day. After I finished the minimum, I completed extra tasks like adding a timer and animations.
    • I learned that the Vue documentation is the holy grail of all things Vue. Pretty obvious, right? It documentation was very intimidating
    • The animations had to work with my in-app timer. In CSS I could time the text to appear at a percentage of total time, such as 50% or 75% show. Then I would turn the text back to the background color.

    Notes:

    I love the time constrait projects because they help guages what I can accomplish if I were hired today. There isn't much to show, but doing a project in a new language is really awesome.

    Future Implementations

  • Adding a quiz to choose the house
  • Better waiting animations
  • Add storytelling

  • Technologies:

    JavaScript, HTML, CSS, Bootstrap.


    Helicopter Hangman!

    Recreation of classic hangman with a little twist.
    Guess a few letters, good ones. If not……

    Made with JavaScript.



    OBSTACLES:

    • Showing 'spaces' that were empty on load, but showed letter if guessed correctly.
    • The hanging animation and cycling through it.
    • Turning on and off event listeners for alphabet keys.

    SOLUTIONS:

    • The letter spaces were made by randomly selecting a word from the list of judge words. The next part was a mix of all HTML, CSS, and Js. The .innerHTML for the judge word was filled with a number of divs that had a style border on the bottom to represent a letter there. After a correct letter was guessed, the .innerHTML would change to the respective letter.
    • I had no idea how to do any graphic design and animation manipulations, and still don't to be honest. So I ended up getting 7 images (drawn by my amazing girlfriend) and cycling through them to get the effect of a falling man. I set the title of the images to the exact same, but with a number 0-6. This way I could link the 'hangman.png' and add a 'counter' to it to cycle through if a player guessed incorrectly.
    • JavaScript includes functionality with eventkeylisterners. It works with the keyboard, so I had to search to find the ASCII table to find the respective strokes.

    Notes:

    This project was awesome! Because there was no guidance from my bootcamp instructor, I could see how much the internet had to offer in terms of methods and ideas. I was so proud because it was my first project soley completed on my own!

    Future Implementations

  • Add a on-screen keyboard to click letters
  • Make images full screen size
  • Add storytelling

  • Technologies:

    JavaScript, HTML, CSS, Bootstrap.


    US Weather Update

    Stuck inside wondering if it’s blazing hot or if theres snow up to your knees? Get a weather update with images to help picture the temp.

    Made with JavaScript/ Open Weather API and a version with Vue.js



    OBSTACLES:

    • Connecting and implementing the Weather API.
    • Document Ready State.
    • Incorrect input in zipcode field.

    SOLUTIONS:

    • I found out how to obtain an API key. With the weather url, I could link my input field to change the 'zipcode' of the weather API url. The API links back a JSON file which I could parse. From there I could select the objects I needed and turn them into variables.
    • The Document Ready State was causing issues because my API key was being called without a proper input field as soon as the page was load. I added a 'document.onreadystatechange' function to check wether the document was in a 'acitve' or 'inactive' state, then proceeded to check for the API.
    • The API played very well with proper zipcodes, but if a user had a typo the API would output an error. So '.onerror' I could display a error message to let the user know there was an incorrect zipcode typed.

    Notes:

    I was amazed at the number of APIs that readily avaliable to developers. This was an easy project that had a big impact for me. I am now super exited to dive into other APIs.

    Technologies:

    Open Weather API, Vue.js, JavaScript, HTML, CSS, Bootstrap.


    Tic-Tac-Toe

    Recreation of childhood table flipper, tictactoe.

    Made with JavaScript and a version with Vue.js



    OBSTACLES:

    • Styling of gameboard into a octothorpe (#)
    • How to interact with my 'gameboard' with JavaScript.
    • Checking for wins. How was the board supposed to know which sequences or combinations of symbols is a winning triad?

    SOLUTIONS:

    • Classes and ids can control the apperance of elements in the gameboard. By making a grid with 3 rows and 3 columms, a '#'' shape could to made by adding borders to the respective side.
    • Javascript can interact with the HTML elements by creating a variable and setting it equal to the location and element I wanted to manipulate. i.e. var pinto = document.getElementByClass('beans'). With this I could perform functions on those variables such as putting an X or O into the div.
    • Because this is a small project I figured that there were only 8 total combinations to win by. I created a function that would match if there were 3 of the same symbol currently on the board, if so, compare those combinations to the 8 total ones I had, if so player(x,o) won, if not, there is a draw on turn 9.

    Notes:

    This was the first project that truly taught me what coding was. I learned the basics of 'how to think like a coder'. I learned the internet is full of awesome resources (Thanks Stack Overflow!). I learned that even the smallest of features can cause a major headache, but through it all, I LOVE the challenage.

    Future Implementations

  • Code the game in a different language.
  • Add styling with different icons
  • Technologies:

    JavaScript, HTML, CSS, and Bootstrap.