Project Yellow Ghost
Introduction
Hi all! It's been a while, been coding a really cool project for the past two weeks. This project was basically trying to build a web app version of Snap Chat and see if it would be good enough to potentially replace the native app version. This was a solo project completed in the span of two intensive weeks.
How I came up with this idea?
I have been thinking about this idea for a couple months and thought of the idea of creating a web app version of Snap Chat. Millions of people use Snap Chat everyday and thought it would be really cool to have the app on a computer instead of just on the phone. The problem was I did not have any experience building apps on mobile phones or computers so that was scratched. But then I remember web apps exist on the web and it doesn't matter if the user loads the site on the phone or computer, it'll be the same experience. Also there are some pros about it such as not having to update the app which was a bonus. The idea of creating a web app was soon possible the more I thought about it and wanted to experiment to see if a web app version of Snap Chat could exist. If it could exist, would the web app be good enough on mobile site compared to the mobile app. Since it was just me working on this, I had to know everything about building this web apps which was new to me.
What was accomplished?
After the two weeks, I felt satisfied enough to present an MVP (Minimum Viable Product). This was a very bare bones working version of Snap Chat and plan to continue working on this web app on my spare time. Nonetheless, let's look at my original plan and see how this project was built.
This flow chart was basically my road map in terms of how I was going to build this project. It basically comes down to two things really, Firebase (backend) and React JS (front-end).
From the very start, I decided to use Firebase (Database owned by Google) as my main database to store images and user information. This is where users get to store images along with some data such as the time it was taken. But no only can firebase store images, it can host the website and has a built in monitoring system so I can see if the website is down or how many users are logged on at the same time. Also, Google supports firebase with Google Cloud which has servers all around the world so scalability would not be a problem for me if I wanted to expand. This was the main reason I chose firebase. It was supported by Google so I don't have to worry about server maintenance and can focus all my energy on the web app knowing the database would not go down.
For the front-end, I used React JS which is widely used throughout the industry. In a nutshell, React JS can show users lots of dynamic information without reloading the page ever. This is really powerful for single page applications and help the web app feel like a traditional app. Having the ability to never reload the page was a HUGE deal for me because the whole point was to make the web app function and operate just like another app on a user's phone.
Some features I built
So let's talk about some features I implemented and explain how I did it.
First off, I did not want to restrict a new user from using the app by showing a login screen. The problem with this is most people get annoyed seeing a login screen and do not want to go through the process of creating an account. Instead, I created a system where guest accounts are make and get deleted if the user exits the tab or creates an account. So if you go to the site, you are immediately brought to the camera screen and can start using the app. If the user likes it enough, they can create an account by clicking the guest profile icon. If they don't like it and close the tab, their guest account gets deleted. This was a feature I thought about for a while because everyone hates login screens. So glad this was implemented and wish Snap Chat could implement this feature on their app.
The next feature I'll talk about is the camera system on the web app. How did I get access to the user's camera? It turns out there is a web API that is standardized on all browsers to get hardware specifications about a user's phone. But this information can not be retrieved without the user's approval. The first time you go on this site, you get asked if you want to allow the web app to have access to your camera. After the approval, the web app can fetch what camera you are using and can use your camera to display a feed. This process is actually standardized for most browsers and works on mobile too! Privacy was also considered while building this feature. I didn't want the camera to be on all the time since most people do not want their camera to be on all the time. So the web app only turns on the camera when you take a picture.
Recommended by LinkedIn
Finally, the last feature I want to showcase is the authentication system. This was a big challenge for me since I had zero experience implementing something like this. Without this feature, users would not be able to create accounts and ruin this project. But luckily I did not have to build one from scratch. Google Firebase actually has a nice authentication system where the user can login with google. I thought this was perfect since Google accounts have a lot things I need such as a person's email or their profile picture. Plus the security was being controlled by Google so that was a bonus. With this awesome authentication system, I used a person's email as their unique id since two different people cannot have the same email address. I also store this information on the database so I can see when a user created their account or what their friend's list looks like with my web app.
The most difficult challenge I faced
My biggest challenge this week was trying to find the bug where the web app will try to open all the snaps available to the given user. For example if the user has received five different snaps and tries to open a single snap, the web app would sometimes open all the snaps consecutively. It was a really ANNOYING bug to figure out how in the world this would happen. I tried debugging this for so long and there were moments where I had to move on to other features hoping I could solve it in the future. It wasn’t until June 13th, I finally solved it. Let me explain how it all happened.
As you know, I am working with React JS where everything is built on components. For those who don’t know, the overall architecture of React is having small individual components represent the page and be dynamic. A component is a javascript function (or class) that returns some bits of html and this can be done with JSX. With JSX, you can set variable to html tags such as this snippet: const element = <h1>Hello, world!</h1>; In my case, I had some code where if the user taps on a <div> element, it would display the snap. When the user clicked on the image, the image would disappear and then reappear again. For reference, here was my code before:
I have a div containing an onClick function that opens a snap with the correct photo id. By default, the image source is set to none, displaying nothing. Inside the div, I have an image tag containing an onClick close function that will set the image src to none. But here is the problem. The image tag is inside the div tag. This means when I click on the image, the close function will execute, then the open function. This was an ongoing loop that will never end unless the photo was deleted from the database or the page was refreshed. I solved this by having the image tag outside of the div so the open function would not be called with the close function.This bug was my problem for the week and was all due to carelessness. This was probably not best practice in React and should have come up with a more robust solution instead of this janky path. Anyways, that was my rant and so happy it is solved.
What I learned
Right off the bat, I'm so glad I made a flow chart before I started coding. This was the master plan I need to abide by and was constantly on my mind. While I implemented a feature, I always thought: Does this follow the plan? It also helped me understand how the whole application will function as a whole and gave me clear answers which technologies I should use. Also, using an app to keep track of your progress was huge for me. I used Trello which allowed me to create different lists and set due dates for each one of them. It really broke huge problems into smaller ones and was constantly looking at my lists to check how I was doing. It was also satisfying checking items off the list and took this seriously. I knew if I didn't take this seriously, this project would not have been done in two weeks and would probably still be working on it today.
Anyways, if I had to do this project again, I would definitely read more documentations or projects about the front end stuff just because it was my first time using React JS and sometimes was not understanding what was happening. But looking back at it now, I definitely see I wrote some really bad code and would have to re-factor the entire application if I want to continue working on this project. But as a whole, I feel pretty satisfied with this project. I knew I wanted to build a simple Snap Chat clone and accomplished it within two week. I definitely learned I like full stack engineering and don't mind learning new technologies. I didn't really feel any fear using React JS or Firebase for the first time just because I felt passionate working on this project. I knew how important both of these components were and did so much reading on it to the point where I feel comfortable with it. This confirms I can successfully learn and incorporate a new piece of technology in under two weeks which is amazing!
About me
Currently a student who is passionate about learning new technologies and often write about my journey here on Linkedin. My audience are other students who are interested in my journey and my experiences working with certain concepts or technology. Links to my Github project, project and Linkedin are provided below.