Jan 6, 2021
Ambii
Fall 20 Industry Project
Introduction
Our client, Ambii, is a company that specializes in setting a custom ambiance for any business. They provide licensed music free of charge to customer-facing businesses. Ambii asked us to create an internal dashboard to simplify and streamline the process of viewing and updating business data.
The Team
James Junaidi - Computer Science
Andy Ren - Computer Science
Jeffrey Zang - Computer Science
Henry Zhu - Computer Science
Timeframe
Oct - Dec 2020 | 7 weeks
Tools
ReactJS with Material-UI
GitHub
Project Demo
Challenges
Pagination
One of the first challenges we faced was the task of displaying a list of companies on the left side of the page. We planned on populating small “cards” with information about the company (namely, the name and the location), thereby allowing the user to scroll through the list of companies and select one. However, we could not put all of the company cards onto 1 page, so we had to split up our data into groups of 20 cards per page. Thus, we had to come up with a way to implement pagination. Initially, we were lost on how to design the logic behind this process. There were a lot of factors to keep track of (we would have to keep track of the total number of companies, the total number of pages, the number of companies per page, etc.), and we did not really have a clear idea of what to do. However, we decided to implement our solution with state. State is a property that can be changed based on user interaction. We used a state to keep track of the upper limit of the page, which would give us a range of companies to pick out and put into the left side. For example, an upper limit of 20 will display the 1st through the 20th companies. This state would be changed based on interaction with buttons: clicking the left button would decrement the upper limit by 20 while clicking on the right button would increment the limit by 20. We can thereby guarantee that the limit is changing by a factor of 20 each time and ensure that we are displaying the correct number of companies on each page.
Selective Refreshing
One of our most definitely difficult hurdles was the selective refreshing of our favorites component. It occurred during the final phase of our project, after we had properly implemented the axios calls to add and remove company favorites from the database. All that we had left was for the UI list to visually change whenever an axios call to add or remove a favorite was called. We first attempted to refresh by using window.location.reload(), which completely reloaded the webpage, allowing the favorites list to visually update, but also reset everything else on the website, causing the user to have to click through the companies a second time. This was by far from ideal, and not to mention, took far too long. The second strategy we tried to implement was by using states, which is typically how updates are handled in React. Essentially, whenever a state is updated in a component it will force a re-render of that component. We created a dummy state that would update whenever a favorites axios call was requested, which should have worked. Yet nothing was updating visually. We spent days troubleshooting and finally discovered the issue to be that our local dataset was not updating properly with each axios call. It was only updating on the database end, not our end. So, after we created the getNewFavoritedStations function, which sent props up to the parents, and then back down with the freshly updated dataset, the states began to update correctly, and the favorites list visually changed like it was supposed to.
Takeaways
Coding in a Team
For sure team workflow experience was a massive takeaway from this project. Not many clubs give you the opportunity to work in small concentrated teams, collaborating with an actual startup. Tasks were delegated based on category to start with, and it was paired programming that was displayed. However, as the project progressed, more and more parts overlapped with each other, and it became a wholly different experience of collaborating with another team to merge everyone’s work and create a final product. Throughout this process, even in the beginning, despite having different parts of the website to design, both teams had to keep in steady communication with each other, in order to allow for a smoother transition into the final integration phase.
Real-World Skills
Throughout this project, we have also taken away real-world software engineering skills. CodeLab is a unique club in that we got to work hands on with a real client on a real project. Unlike projects or programs we had to produce in our CS courses, the parameters that a company expects in a product they produce is significantly different, and requires a different approach and mindset. There are no test cases to pass to receive points, but we need to create a complete product, tested on our own, that would benefit others. Throughout the process of building our project, we learned how to work on a team, communicate with management in a company on what the project specifications needed to be, and also experience the satisfaction of building a product that would be used to help people within the company. CodeLab offers a unique experience that can’t be found anywhere else at UC Davis.
