Branden Tam

HomeBase

Languages: Javascript, CSS, HTML

Technologies: Node.js, Express.js, EJS, MongoDB, Mongoose

HomeBase is a full-stack web application I designed to act as a homepage for your browser. After a couple questions on the landing page, HomeBase will greet you, offer weather data for where you live, and provide you with a minimalistic to-do list with today's date above it.

Challenges and What I've Learned:

This project was my first experience in using many technologies such as API's, EJS templates, MongoDB, and frameworks such as Express and Mongoose. As such, I had to spend a lot of time reading documentation and learning from online tutorials. However, I think all of this was definitely worth it as I was able to create my first full-stack web application and learn the fundamentals of each component of an app, from front-end to back-end.

Some Things I Considered:

• Frontend: Wanted to use React because it's:

  1. Very popular
  2. Industry standard
  However, as I was stressed for time, I decided to learn and use it for the next project instead.

• Backend

  • I knew I wanted to gain some experience interacting with API's
    • used OpenWeatherMap's weather REST API
  • For a given user provided city, the process looks like this: Grab weather info for specific city from OpenWeatherMap API, parse through the JSON file and extract the info we actually want, send this info to the EJS template file to be displayed to the user.

• Database: Should I use SQL or NoSQL database?

  • SQL
    • Used in big industries
    • More complicated to learn
    • I will be learning it this coming September in CPSC 304 at UBC
  • NoSQL
    • Easier to learn and use
    • No use for relations whatsoever at this current stage
    • Since NoSQL databases are more ideal for "one-to-many" relationships, seemed perfect for my application as it's essentially "one-user to many-tasks"
  • Went with NoSQL (MongoDB)
    • Started a free account which provides more than enough storage space
    • Wanted to get it up and running ASAP so learning NoSQL was the route I took

Improvements For The Future:

1. Save user data (name and location) and their to-do tasks under their name, so when they log in, they won't have to input the information on the landing page again.
2. Continue implementing new features like a pomodoro timer, to offer more productivity tools
3. Refine the front-end to make it look more polished

When2Play Discord Bot

Languages: JavaScript

Technologies: Node.js

When2Play is a Discord Bot I created using the discord.js node module to help friends meet up with each other on time. Use it to set a time to meet, and simply click the thumbs up button to be notified when it's time to play!

Challenges and What I've Learned:

As this was one of the first projects I've done in Javascript, the first big challenge I ran into was simply trying to code in the language and interact with the Discord API to begin with. But after I started to get going, the implementation of the functionality in Javascript wasn't too hard and I was able to finish it by learning techniques online. My final major challenge was that in order to upload the code to GitHub, I had to learn how to properly use a gitignore file to hide the config file that I use to hold the bot's token key. This took a bit of time but was manageable by looking through some forums.

Improvements For The Future:

1. Expand functionality to where multiple people can have multiple timers set at once. Currently the bot only supports one time set per person.
2. Support the feature of being able to add a note to the reminder (like a pseudo-personal reminder bot)

Java Self-Serve Kiosk

Languages: Java

Technologies: N/A

An academic project I created when I was first learning Java. I designed it to have functionalities similar to an ordering kiosk you would find at a fast-food restaurant like McDonalds. Users are able to order preset menu items, create custom orders, remove orders, and checkout! I scored 100% on this project at the end of the term.

Challenges and What I've Learned:

Since I used this project as a way to learn Java from the bottom-up, learning Java itself would be the one hardest challenge I faced. To be more specific though, I had the most trouble grasping the very concept of object-oriented design. I remember I had to work very hard to understand the concept of fields and what their purpose within a class object was, as silly as that may sound.

Improvements For The Future:

1. Give it a functional front-end and back-end
2. Adapt it into a mock UberEats application

Simon Says

Languages: JavaScript, CSS, HTML

Technologies: Node.js, jQuery

Simon Says is a game where the user is required to memorize and repeat a gradually increasing sequence of flashing oscreen lights! The user's highscore is kept and displayed at the top of the screen. A wrong input in the sequence will result in a game over!

Challenges and What I've Learned:

The main challenge I ran into when creating this project would be learning how to use jQuery properly since this was the first time I've used it to manipulate HTML and CSS elements. It was definitely worthwhile though as using built-in JavaScript functionalities for event-listening and CSS manipulation is much more convoluted in comparison.

Improvements For The Future:

1. Hook the app up to a database so we're able to store player high-scores
2. Use the database to create a leaderboard page for the highest scores among all players

CSS Portfolio

Languages: HTML, CSS

Technologies: N/A

A simple website that I created to try some new things using CSS and HTML. I originally used this as my portfolio but have since moved to this one.

Challenges and What I've Learned:

As this was my first major time using HTML and CSS, I was able to learn/use a lot of new HTML and CSS functionalities. However, because it was my first time, it was also a major challenge learning about how both languages can work together to create a cohesive product.

Improvements For The Future:

1. Create multiple pages
2. Add animations to the page

test

Languages: HTML, CSS

Technologies: N/A

A simple website that I created to try some new things using CSS and HTML. I originally used this as my portfolio but have since moved to this one.

---

Challenges and What I've Learned:

As this was my first major time using HTML and CSS, I was able to learn/use a lot of new HTML and CSS functionalities. However, because it was my first time, it was also a major challenge learning about how both languages can work together to create a cohesive product.

Improvements For The Future:

1. Create multiple pages
2. Add animations to the page

Contact

• Twitter
• Facebook
• Instagram
• GitHub

Elements

i = 0;

while (!deck.isInOrder()) {
    print 'Iteration ' + i;
    deck.shuffle();
    i++;
}

print 'It took ' + i + ' iterations to sort the deck.';