Cho Di

A one-stop-shop organization management software with the goal to assist non profit organizations in analyzing their data and organizing their events in a convenient way.

Comment

UCI Google Site Link

https://sites.google.com/uci.edu/inf191-w22/chodi?authuser=0

Origins

This project came about as part of the Informatics 191 Capstone class @UCI, spanning from the Fall Quarter '21 to the Winter Quarter '22. A team including myself was assigned a sponsor to work with to meet their desired needs over the span of two academic quarters. We were a team of five, but only my contributions will be extensively detailed here on Devpost for portfolio purposes.

Problem Space

Many non-profits juggle with managing the scope of their operations, from keeping track of volunteers & employees, scheduling events, tracking the budget for each event, any many more. Cho Di’s goal is to alleviate these common issues by aggregating and streamlining numerous management tools all into one place.

What it does

Our sponsors tasked us to meet their vision of an organizational management web app that would allow non-profits manage their employees, data and operations all in one app. These features included a calendar of events, an events page that listed all upcoming events, a CRM that tracked all points of contact for a given non-profit.

Challenges

Roadblocks became apparent right at the beginning. First, we had to begin from scratch. Second, our sponsors were non-technical—they were not well-versed in web technology and development, and therefore could not give us any detailed guidance or solid technical starting point. Our professor also required us to utilize Agile development methods, where our work was divided into two week sprints across a total period of 20 weeks and our tasks were managed using a Kanban board on Trello.

For all of us on the team, this was our first interaction with Agile. I was also the only team member who had some experience with web frameworks/libraries like React and languages such as HTML, CSS and JavaScript. Thus, I took the lead on becoming the lead designer and developer on the project. I spent many nights pair-programming with the various members of the team, teaching what I was also learning at the same time. I undertook a lot of self-learning to improve my understanding of React and Firebase to help fulfill the requirements of the project and help my team members as well.

How it was built

For this project we utilized React.JS for the frontend and Google's Firebase and Cloud Firestore non-relational database as the backend. Out of all of the JavaScript libraries and frameworks, React was the most popular, but more importantly, it also had the most tutorials, which was helpful for novices like us. Firebase and Firestore also appealed to us the most as there were plenty of tutorials for it as well and proved to be very intuitive to grasp. Out of the team, the responsibility of connecting the React frontend to the Firebase backend was mine as well.

Requirements for the project were continually elicited from weekly meetings with our sponsors, along with discussing and prioritizing the most important features given the limited time we had, especially working from scratch. At the end of each two-week sprint, we would present the progress of our React prototype and the Figma designs of the next features to tackle, and receive any feedback in turn.

Responsive and adaptive design was also taken into serious consideration, and I created various CSS media queries to accommodate the various pages of the app to different screen sizes. Each page was also organized using auto-sizing/aligning Bootstrap grid. Usability heuristics for web interfaces were also prioritized in the development of the app, especially error prevention, minimalist design and internal consistency. I was responsible for the consistent CSS styling across all the different web pages.

Accomplishments

Despite our setbacks, we managed to create a working, though unpublished, React web app prototype with the most prioritized features of the Landing Page, Sign-up and Log-in, Calendar, Events, and CRM pages. I am proud to have had a hand in working on all said pages, as shown on the team's and sponsors' private Github repository.

Reflection

This capstone definitely forced me and the rest of the team to take the initiative to do more self-learning. Our professor could only help so much and our sponsors could give us no in-depth technical advice. Their inexperience also improved my skills as a technical advisor. As the de facto lead developer, I discussed numerous times with the sponsor the technical and time-related viability of the long wishlist of features that they wanted for the app.

My interpersonal and elicitation skills were definitely strengthened as a result of this project, along with greater experience with React, JavaScript, HTML tags, CSS styling, responsive design, non-relational databases et cetera. Of course, I still have a lot to learn. The capstone also served a great primer to Agile methods as well.

Still, one thing we could have focused more on was UX testing. We could have conducted more than just testing internal to the team and sponsor and expanded to actual non-profit organizers, accountants and volunteers. For a number of time constraints and rush to lay down the basic programming groundwork for future teams, we were unfortunately limited.

What's next

The contribution of our team to the project will be passed along to the next Informatics Capstone class, inheriting the foundation that we had to build here. We hope the work we have laid over the past year will help future teams tackle future requirements and expansions, such as connecting to a mobile app, expanding the database, improving security, and conducting extensive user research and testing.

Built With

Share this project:

Updates