Fresh Potatoes
Full-stack development of an efficient movie searching solution
Time: Jan 2021
Duration: three months
Role: Client-side developer
Overview
Developed by a team of six students to provide a simplified and more efficient movie searching process for any users that watches movies and TV shows at any age range. Fresh Potato aims to solve the problem by implementing more defined and detailed recommendation options as well as filtering the movies and shows based on the streaming platforms the users are on with the help of Django web framework and TMDB (The Movie Database) API.
My role in the group was mostly on the front end including website design and making sure the client-side view is properly connected with the the server-side logic through a model-view-controller.
Tech tools
Landing Page
Requirements
> Aesthetic and minimalist design
> Flexibility and efficiency of use
> Minimize the user's memory load by creating a "watch later" page
Process
01. Prototyping
With the front-end requirements in mind, we gathered together through discord and sketched out the low-fidelity prototypes for all the pages we wanted to implement in our application. This process set a solid foundation for me to get started on designing the individual elements as well as the overall color scheme of the front-end which follows the atomic design methodology.
02. Improvements from LFP
While working on the HFP, I discovered several issues with our LFP.
Too many movies displaying on the front page causes a cluttered look which is conflicted with our minimalistic design requirement
An expandable side navigation bar does not make a lot of sense since our navigation bar contains only 4 buttons
Several minor layout issues which causes cluttering including the sign-up survey page and the top navigation bar
03. Development
Everything was smooth up until this point when I started coding and developing the front-end. I had no experience on how html and css worked and neither did my teammates. My development work was delayed for 2 weeks but I eventually learned the basics of html and css by digging through the web. Once the majority of the front-end development was done, I passed the server-side data to the client-side which allowed movie infos from the API to be displayed correctly on the client-side.
Final Product
01. Movie Info
02. User Profile
03. "Potato Farm"
Reflection
Being the main deliverable of a lower division software engineering course, this project provided me with an overview of various techniques used for software development and project management, including design, requirements, implementation, testing, and scrum methodology.
Scrum Methodology
During the development of this project, we tried to follow the Scrum methodology as best as we can to mimic a professional work place. I participated in weekly meetings where we would plan out our work and goals for the next week as well as sharing what I've achieved in the previous week with the team. Though there were no daily Scrum meetings due to our conflicting school schedule among five members, it set a solid structure for my team which enabled us to complete project deliverables quickly and efficiently.
This project also provided me with many other experiences in full-stack development
Separation between the application's logic and display with the implementation of Model-View-Controller framework
Front-end development with specific requirements tailored to our targeted audiences
Utilization of popular modern tools and follow the current industry standards
Prioritize user experience with muliple rounds of testing and improving to reduce the run time of back-end algorithms and overall loading speed of the application