The Why

I have gotten to a point in my developer career where I ruthlessly dispel the magic of digital products.

I notice the ‘on hover’ animations, I notice the personalizations, I wonder what the backend and frontend interactions are. After many such breakdowns, I realized I possessed enough knowledge of the technical implementation and from a user end point, I had a sufficient grasp on the system design to set forth and build a full-stack web application.

‍

Backstory

Netflix has a UI that emulates a theater. The dark ambiance of the ‘dark mode’ theme tunnels one’s attention to a little closet world to experience soulful film. A poignant, all demanding red affirms a veracity to the selected film and thus a veracity to one’s inner world as if to say, “yes this is a real story, take this time now to believe and to believe once again, in your true self”. IT becomes clear,  where but a movie/film streaming platform would seamlessness be so important where one glides between reality and fiction and in the best movies, the two appear to be the same.

‍

‍

Learning Point

When working on a project from scratch, it is a euphoric moment when after toiling away the developer finally completes a feature and is able to see past the granularities- the different components- to see a consolidated whole. When I was building the UI for the login-screen, I had set a background picture of a reel of movies shows and film netflix houses. The multiple dimensions on that static image alone makes the user feel as if they have entered a long carpeted hallway with larger-than-life movie posters hanging on either side encased in a show with built-in light fixtures. Then I added a dark overlay over the background image that lightly shaded and blurred the background. This slight change with the sign-in prompt box front and center stood as if to whisper, “open the doors, a world awaits”.  UX is at its best when it goes unnoticed, when the parts harmonize to make the whole and the technical implementation conducts the symphony to place before us what we aptly call magic. 

‍

Technical Breakdown

The web app I built allows 

1. A new user to sign up,
2. It authenticates existing users, 
3. Authorized users to access the Netflix homepage. 
4. It also signs users out,
5. The stripe integration to firebase to display what products are available for purchase (streaming plans) and providing a button to purchase the plan through a link that reroutes to a stripe checkout page.

‍

Difficulties

One difficulty I faced piecing this project together is having difficulty seeing how all the granular parts come together. I mentioned earlier the thrill of those golden moments when all the pieces fit perfectly and the developer feels slightly swept away. During my developer experience, apart from those golden moments, I had much difficulty mentally organizing the project together, understanding how one line of code compliments another in the grand context of the entire app. I decided to step away from the project for sometime and focus my attention on my day job also working on a react project. Once I had more time to work on it thoroughly and not rush it, I saw how all the pieces fit, I was able to identify more quickly what my errors were and also could also determine what optimizations could be made.

Additionally, some current issues I am working to resolve include the following:

1. Stripe integration throws an error when a user attempts to purchase a plan- it does not reroute to the checkout page.
2. Some of the endpoints from The Movie Database appear to not work as the API reference indicates. This will require getting more familiar with the API.

‍

Moving Forward

1. From a technical standpoint, I would like to include a favorites page that allows a user to favorite any shows or films they come across and they can go to a page to view them all in one place.

‍

2. From a UI/UX standpoint, I want to sharpen my understanding of  how technical features and implementations can be utilized to intensify immersiveness. I want to work my way to pinpointing with accuracy how a certain emotion can be achieved from a UX perspective and the technical implementation of that UI.