Nominate your favourite movies for a hypothetical awards show with the OMDB Movies web app! Users can search for countless movies catalogued in the Open Movie Database (OMDb) and save up to five nominations. The movie search is a 'live' search; any update to the search term updates the list of results. I used the OMDb API to retrieve movie information corresponding to the active search term and implemented a filtering mechanism to show the most relevant results first. A back-end Express server contains endpoints for retrieving movies and movie details, as well as adding, removing, and retrieving nominations. On the UI, existing movie nominations can be viewed together, and any can be removed if desired. Click into any movie to view details including the release year, film rating, duration, genre, various critique ratings, a short description, and additional information such as cast members, director(s), writer(s), and award(s) won.

I completed the full design and development of this website, the majority of which was done in two consecutive days. I sketched out my design wireframes by hand and then used React, Axios, Node, and Express to build the app. It was exciting to finish and deploy the website in one weekend. I am most proud of the upbeat design and live search functionality. My ideas for future enhancements include implementing entry and loading animations, persisting search results during an active user session, and improving site accessibility to AA standards.

Mountadex is a responsive web application that aims to take users on an interactive visual journey of Canada's world-class ski resorts. It is geared towards a variety of users, from vacationers who are planning their next alpine escape to ski enthusiasts who just want to learn more about Canada’s favourite ski hills. Site visitors will be able to explore mountain stats, browse through animated trail maps featuring lit-up run information, and find useful links for buying tickets and getting directions to ski resorts.

I am currently designing and developing Mountadex with a friend. I applied HTML, SASS, JavaScript, and ReactJS skills to create most of the functionality on the home page and the pages featuring individual mountain information. I take particular pride in developing the 3D parallax scrolling feature found in the hero components of all pages (which leverage shifting perspective views of layered mountainscapes) and the rotating navigational carousel (which features CSS transitions). Development on the site is currently in progress.

EventFriends is a React Native mobile application that helps users find events in local areas. Unlike other event apps that feature ticketed events, this app is meant to showcase free or inexpensive events, and therefore is geared towards casual event-goers. Users can browse featured upcoming events on the Events page, view specific details about each event (such as the location of the event on an interactive map), save their favourite events on their profile, and filter events by category in the Categories page.

I designed and developed EventFriends in a challenging one-week timeframe. Since it served as my capstone project for the BrainStation web development diploma program, I wanted to create an appealing, user-friendly app that would showcase my ability to learn quickly. Although I had no prior knowledge in React Native, I self-learned the technology within that week—reading documentation and engrossing myself in video tutorials and then applying the new knowledge immediately. I applied Node, Express, and Ngrok to successfully develop the app and received positive feedback for it in a public end-of-term showcase to industry professionals and my local community. My ideas for future enhancements to the app include adding login authorization, showing local events based on the user’s current location, and giving users the ability to create events and join events that others have made--after all, it is called EventFriends and is meant to also be a platform for making new friends through meetups!

CheckIfOff is a to-do list web application that helps users stay organized by keeping track of events and deadlines in list or calendar view. The app features 3 pages: the dashboard, calendar, and status pages. The dashboard page features today’s to-do list, which contains event cards that can be edited or deleted, as well as a section for upcoming events, which can be live-filtered by typing into a search bar. New events can be added on this page. The calendar page uses the FullCalendar JavaScript library to display a monthly calendar that events can be dragged and dropped into. I tweaked the calendar’s functionality to allow full user control of event times and dates, and added a section containing frequently-used events that users can easily access and drag into the calendar. The status page filters events by completion status (i.e. pending, in progress, or completed); users can edit or delete events on this page as well.

The main inspiration for this project was a challenge I made for myself: to develop and deploy an app in a tight timeframe. I leveraged my existing knowledge of React, SASS, and Javascript to successfully design and develop CheckItOff in less than one week. I am proud of the sleek design and of the considerable amount of JavaScript logic that I wrote to enhance the front-end calendar functionality. Given more time, I would build a responsive version of the app and create a back-end API to allow events to be added, edited, deleted, and retrieved as needed.

DogHotDog is a funny little web game that I developed with a BrainStation colleague. We were struck with the idea to make a silly game that looks so purposefully awful that it actually ends up looking... good. After starting the game, the player is presented with a series of gifs that depict either a dog or a hot dog, and has to guess which of the two choices best represent the gif. There is a little twist—the answer buttons randomly swap (so players must be alert and choose the correct button), and the colours of the buttons change as well, to add to the confusion! Players must try to answer as many questions correctly as they can, and they must do it while being timed, to reap the rewards of seeing their name the top of the high scores list. And the best part? Cute little dogs litter the user interface!

I was responsible for using React, SASS, and a Firebase server to develop half the application. In particular, I leveraged the Giphy API to retrieve dog and hot dog gifs and to randomize their appearance, developed the high scores page, synced the Firebase database, and completed general styling for multiple pages. This project was an excellent way to practice collaboration using Git with another team member.

BrainFlix is a responsive full-stack web application that mimics YouTube. I created this site as one of my projects 6 weeks into my BrainStation program as a student. The home page features a large full-width video player, information about the video including the uploader’s name, view and like counts, and a written description. It also features a comment section, where users can submit comments about the video. The user can also browse a list of other videos and bring those into view. The site’s upload page allows users to upload a video with a title and description.

Developed over 3 week-long sprints, I utilized the React framework, libraries such as React Router and Axios, and a design styleguide to develop the site’s front-end, as well as Express to create a back-end API. API endpoints include one that retrieves general high-level information for all videos, one that retrieves more detailed information for the specific video being displayed on the home page, and one that posts a new video (through the upload page) and subsequently displays that video in the list of available videos on the home page.

Drag City is a turn-based car racing game that I created with a friend for a two-day BrainStation pair programming project. I was two weeks into learning ReactJS and wanted to make a fun game that my peers would enjoy. Players can choose which car to race out of four coloured options, take turns rolling an animated dice to advance the corresponding number of steps on a race track, and can win by reaching the finish line first. The web game is intended to be played on mobile screens.

The purpose of this project was to practice team programming skills and apply React knowledge in a short timeframe. While my partner created the appealing look and feel for the game, I was responsible for the game logic and managing Git processes throughout the project. I used Express to create a server to store car images. Given more time, we would make the game responsive across tablet, laptop, and desktop screens, and add cool animations for the car movements. After a project presentation, my team won the People’s Choice Award, voted in by my class educators and peers!