CJ's Travel

CJ's Travels is a site providing you with a glimpse into the best offerings a US city has to offer. Providing you with cultural attractions, maps, trending news, dinning, weather and more!

This was the first project I worked on at the Northwestern Coding Bootcamp. Learning html, javascript, and css we were able to use our skills to make a travel website. It was difficult to work with APIs but I luckily had great teammates and it was great working on code with a team for the first time. This was also one of my first github collaboration projects and I got to learn what it is really like to work in a dev enviornment with a small team. I mainly worked on the landmark API or the point of interest api using one of the Google Maps APIs. I also helped with some of the CSS layouts and also the moving cloud animation.

I learned a lot about working as a group through a collaborated github repository and had a lot of fun working on this project. For more information about the project you can visit the github repository link below!

Github repo

Nintendo Character Hangman Game

The Nintendo Hangman game is a simple web based html game. Guess your favorite Nintendo characters and hear captain falcon cheer you on or Jigglypuff get dissapointed.

This is a fun little wep page game I made to understand more about javascript and simple logic behind a web page. This was my first web based game I have worked on and it was my first interaction with using javascript. I also took the liberty to try and play with some css animations in the background that I found online. I also added music and sound effects to give the player a sound response to if they got the letter right or not. I used the sounds from a popular Nintendo game Super Smash Bros Melee. I had a lot of fun working on this if you would like to check it out you can either visit my github repo for more infor or the game link if you want to just play.

Github repo

Nintendo Hangman

Bookmark Extension

Bookmark Extension is an application that makes a database copy of your Google Chrome bookmarks and organizes them in a personal library. From the library you can search for a Bookmark by its title, access a bookmark's web page, create folders, assign the folders to bookmarks and sort them accordingly.

This was the second project I worked on at the Northwestern Coding Bootcamp, it was one of my first projects that worked with a backend databases. We used sequelize, MySQL, express.js, node.js, and javascript mainly on this project. This was a difficult project to work on because we decided that we needed to use a chrome extension API in order to get the users bookmarks. It was hard to get local storage to communicate with the extension and also another webpage. So we decided that the user neeeded to log in not only on the extension but also on the webpage in order to get there data on the webpage. There they can create new folders and assign there bookmarks into a folder. Although we would have idealy liked both of the extension and the webpage to communicate with each other but we found this work around much easier to approach. To learn more about the project or how to download it please visit the link:

Bookmark Extension

Ruby or Banana

Ruby or Banana? Click on the rubies or bananas to add to your score. If you can reach the target score exactly you win, and if you can you lose. This is a simple web page game I made to understand sprites, javascript, and css better. It was good practice in creating my own web page and I came up with the name due to the limited sprites I had available to me. I had difficulties sizing the sprites to be larger but found getting the animation to work to be enjoyable. I also used some recuring gradient animation from my previous Nintendo Hangman Game. It is silly but if you would like to play the game or find out more information please feel free to click on the links below.

Github repo

Ruby or Banan Game

React Drum Sequencer

The React Drum Sequencer is a 1 bar drum looper that will play a 1 bar loop according to the pattern on the pads. This is very similar to a lot of drum sequencer machines where a loop will be played and the pads or buttons triggered will make a sound. Just click a pattern and make a beat!

I made this project to better understand React.js and to better understand how music is programmed for simple drum machines. You can choose over 100 sounds from MIDI sounds react npm, although in the future I would like to add my own sound library this was just a quick and easy way to get sounds playing on React. This does use a Mongo database to store the users patterns but it does not save the instruments, the volume, or the BPM which is something I hope to add in the future.

Many thanks to n1k0/tinysynth github repo for the general wireframe idea and also from Unlikeness's React Sequencer Tutorial for the general functionality of the sequencer. Please feel free to check it out and create your own 1 bar drum loop.

Github repo

The React Drum Sequencer