Iliyan Darediya

Web + Mobile Application Development Diploma

I like to travel and learn about different cultures. Since childhood I’ve always been intrigued by puzzles and riddles. I like to learn about new technologies and implement the usage of these technologies in real world projects. In my  two years at North Island College I’ve developed and designed several apps and websites using a plethora of tools like Android Studio, HTML, CSS3, Bootstrap, PHP and several others. Out of these skills I’d say that the ability to read code written by other developers and make sense of it is the strongest tool in my toolset. I like the development phase of a project. I enjoy solving problems with the help of Jjavascript and it’s abundant libraries! In the near future I hope to work as a React developer. However, in the long haul I would like to create a web-development company and lead a group of able designers and developers.

Capstone project

It’s Friday night and you are living with roommates or your partner, the popcorn is ready, the blanket is set, the tv is switched on; but what are we watching? Sometimes it can take 20-30 minutes to zero down on a movie. And guess what, by the time the movie is selected, the popcorn is finished and no one wants to watch a movie anymore and the mood is no longer craving for a movie

This application is a medium to work on my Javascript and database skills by creating a React application that will function on Google’s firebase platform. I developed an algorithm to sort through all the movies selected by all the users and output a single movie. The make use of React’s state management property along with context and component.


To create my application, I had three options:

  1. vanilla javascript
  2. php 
  3. use a framework. 

I found that React, Angular and Vue were one of the best options along with Django. I had past experience with Django and wanted a new challenge, so I decided to go with React which is fast, scalable, user friendly and not extremely difficult to learn. 

I began studying React through the official documentation. I followed some tutorials on youTube, but the most amount of time in the learning part was spent by getting my hands dirty through the means of codeCademy, freeCodeCamp and scrimba. I learnt about different hooks like – useEffect, useState, useContext etc. But in order to create a dynamic application, I needed to have dynamic data. 

I was able to get the movie data through an open source API – The user is supposed to have some interactions with the data provided by this api, so I decided to store those interactions using the firebase cloud platform. 


During the production stages, I created an architectural description of what I wanted. In this detailed document, I had five sections that showed how I wanted to design my application’s architecture. 

  1. React Router: This layed out which elements from the react router I’ll be using in order to route to different components.This included Browser Router, Routes, Route and Link.
  2. React Context: This is where most of the states and its subsequent methods are stored at. I send the data from the context to the encapsulating components along with required methods. 
  3. API: This section talks about what api I’ll be using and which particular endpoints I’ll be using.
  4. Child Components: I map out which components I’ll have under the context tree. I also define how they’ll be mapped based on the React router usage.
  5. Google Firebase: I point out how my files would look, once I have my data stored in Google’s firestore.

Designing the application wasn’t part of the main deliverables for my project. I still designed a low-fi wireframe, in order to set the foundation of my application.

Web app lo-fi wireframes

Based on my studies after the study plan. I came up with a task list to implement in order to develop the app:

  1. Create Github repo
  2. Clone the repo
  3. Install React
  4. Install Router
  5. Create Routes
  6. Create components
    • Create checker
      • Implement checker in context
    • Create MovieCard
    • Create NewSession
    • Create ExistingSession
    • Create Chooser
  7. Create React Context
  8. Set up Google Firebase
  9. Configure Firebase in React
  10. Utilize tailwind to add in basic design

Interested in hiring one of our graduates?
Get in touch and we’ll connect you.

Check out other student projects from the same year: