To Boldly Build: Insights for New Developers to Kickstart their Projects
From developers with little to no experience to ones who have published a meaningful project — here are our insights on how you can do it too!
An overview of the insights gained during the development of a UBC Course Search and Dashboard web app as developers with minimal React and Node.js knowledge.
The Vision
As a group of BCS (Bachelor of Computer Science degree) students, we had all gone through the struggles of course planning and noticed that there was no single tool that could display a list of UBC course prerequisites and dependencies. This means having to traverse through the prerequisite chains to determine which courses must be taken to access higher-level courses.
Additionally, due to the nature of our program, we do not have access to UBC’s Degree Navigator. Oftentimes, many peers within our program would track their degree on a PDF or a Google doc/Google sheet.
We needed a solution.
Thus, to simplify and increase the convenience of the arduous task of researching courses and planning the degree, we decided to build two tools.
- UBC Course Explorer — A modern course search tool that enables all students to browse UBC course prerequisites and dependencies. https://ubcexplorer.io/
- BCS Explorer and Dashboard — A modern dashboard with increased functionality related to course search features such as a worklist builder, degree progress tracker, and overview for users to quickly see their stats. https://ubcexplorer.io/bcs
- You can check out the repo here: https://github.com/HelloWorldFam/UBCExplorer
This article explores the insights we have gained and challenges that we had to overcome to create a MERN (MongoDB, Express.js, React, Node.js) stack application as new developers who have completed only two terms of computer science courses (CPSC 110, CPSC 121, CPSC 210).
The key takeaways that had helped us to persist and be able to publish a completed polished application despite the numerous tribulations are discussed. We hope that the points discussed will provide the insights to help you kickstart your project and be the spark to build your ideas into reality.
Functionality and Features
A quick overview of the components and features of the project created by our team for both our tools.
UBC Course Explorer — https://ubcexplorer.io/
- Shows all course prerequisites, co-requisites, and dependencies for a specific course given the course code.
- Hover functionality over searched courses which shows the historical average and pass rate, pulling data from UBC Grades API.
- On click functionality of course title to be able to view course in SSC (UBC Student Service Centre).
BCS Explorer and Dashboard — https://ubcexplorer.io/bcs
- Create an account/login through Google, Facebook, or Github to save your worklist.
- Tag courses with Core BCS, Exemptions, Bridging Module, and Upper CPSC.
- View historical average and pass rate for UBC courses.
- View your degree progress and how many courses you have left to take.
- Download your data and delete it from the database at any time.
Getting Started / Our Process
An idea that was motivated by the inconvenience of course search and degree planning had pushed our group to develop these tools with the hopes of simplifying and modernizing the experience. Getting started was incredibly difficult- we needed to look for the right team, the right tools, right stack, and the right project management platforms.
Establishing Core Values and Project Vision
Before starting to build, our team had a large brainstorm session to write out the project’s mission, our purpose, the user stories we wanted to implement, and the deliverables for the first sprint. We used Google Docs to write out such details and hash out the features we envisioned. This initial step was absolutely essential to narrow down and focus on specific features. It provided us with an established vision for our project — To modernize and simplify the course search and degree planning experience.
Our mission was to provide students a seamless course search experience with a modern look and feel in React and Node.js. Additionally, we wanted to provide a dashboard for students to manage course worklists / course plans with emphasis on BCS program requirements.
It is highly recommended to complete this step before developing anything. User stories help narrow down focus to key priorities and is one of the main reasons that we were able to meet sprint deadlines. Establish a series of user stories, rank them based on highest priority and core functionality. Assign these deliverables to sprints and add a reasonable time frame to implement.
Communication
Communication is absolutely key for any type of project. Every team member needs to be in the loop and updated throughout each phase of the project. As a team of six remote developers, we needed to consistently be able to update each other on our progress.
Our main communication platform was initially a Facebook Messenger Group which had then migrated to Slack. Below are the platforms and tools that we had used for communication.
- Trello — Our Trello board was the core tool we used to store and schedule each meeting and sprint. Each task is placed in a specific category and assigned. Every task, meeting, and note was documented here. We are currently in the process of migrating the contents of our Trello board to Slite as Slite provides a better layout for larger documentation and guides.
- Slack — We initially started with Facebook Messenger as it was most convenient, but later moved to Slack to utilize the thread feature. Additionally, we were able to keep feature-specific discussions in specific channels. In the later phases of the project, we used a Slack channel to track bug fixes and feature implementations.
- Google Docs — Initial project vision, project mission, user stories, and initial sprints were collaboratively written.
- VSCode LiveShare — We used the VSCode LiveShare extension to pair program specific features / debugging.
- Google Hangouts — Due to Zoom’s call limit, we used Google Hangouts for coding sessions and meetings which also allowed multiple users to screenshare.
- GitHub — We used GitHub for software development version control and to setup multiple developer branches. Teams would work on their feature on their specific branch and merge with master after a code review with other team members. In the later phases of the project, we consolidated unnecessary branches. Once completed, all the branches are merged to master after a successful code review and deleted.
Our Tech Stack
Our team wanted to create a React application, so we used Python and the MERN stack (which consists of MongoDB, Express.js, React, and Node.js).
Like other developers first starting out, we had minimal knowledge of such languages and frameworks. To attain a sufficient skillset, we completed a MERN tutorial and attempted a first-pass at the backend routes/login/signup functionality.
We iterated and subsequently improved functionality as we got better and learned more about the tools that were available to us.
Later, we had modified an existing Python tool to scrape/parse data from UBC’s website and upload it to our MongoDB server.
Credits:
UBC SSC Scraper/Parser: Eugene Y. Q. Shen| GitHub
Display Historic Course Averages: UBCGrades API
Inspiration for Course Average Hover Feature: UBC Hover Grades | Nelly Extensions
Our Tech Stack/Resources:
- React
- Node.js
- MongoDB
- Express.js
- Python
- RESTful API
- OAuth2.0,
- SEO
- Heroku
- Google Analytics
Agile Structure/Sprints
To spearhead user stories and deliverables placed in our sprints, we had divided our team of six to smaller teams.
Each team was responsible for a specific feature. Depending on the sprint contents, we had 3 teams of two or 2 teams of three. Once a team completed the assigned task, then the team-members would shift to help other teams.
All feature specific discussions are held primarily by the assigned teams and discussed in specific Slack channels. When team-members had questions about the overall project, a meeting was set to hash out details and make adjustments as needed.
To give some insight on our sprints:
Sprint 1:
- Login/Signup Functionality.
- Basic Landing Page.
- Basic Dashboard Functionality.
Sprint 2:
- Degree Progress Tracker.
- Stats and Course Search/Selector.
- Add to Worklist Functionality.
Sprint 3:
- Deployment of the Minimum Viable Product (MVP) tool to the student body.
- Refactoring some code.
- Bug fixes/ last minute patches.
Sprint 4:
- Additional Features and Optimizations Using Feedback from Qualtrics Survey.
- Creation of Documentation for Endpoints.
- Release of BCS Dashboard tool to student body and BCS Groups.
Sprint 5:
- Incorporating user suggestions, feedback, and requested functionality.
Sync Ups / How To Hold Effective Meetings
Our team had weekly meetings to discuss progress updates/reports and suggestions on how to move forward with new goals/sprints/timelines. These weekly meetings not only kept everyone accountable, but motivated everyone to push forward and combat negative quarantine feelings.
Every weekly meeting, we had a Trello card with a list of topics and actionable items to complete by the assigned deadline.
It is extremely important that during the meeting:
- Meeting notes are written and documented.
- One speaker was the meeting lead who screen shared the list of topics to be covered.
- Full transparency is given on updates.
- It is important to set soft and hard deadlines for sprints which can be done in a reasonable amount of time.
- Fostering a sense of accountability and offering support for team members who need it.
- Ensuring team motivation, passion, and drive are present to face all challenges.
- Motivational pep talks and reiteration of our vision.
Bug and Feature Tracking
To keep track of bugs, we used Slack channels to mimic JIRA issues. A specific channel dedicated to bugs was created. All bugs created are noted in the channel and pinned. Additional information on specific bugs are discussed in the thread. Once the fix has been implemented, a check-mark emoji is utilized and the bug is unpinned from the channel.
For features that we want to implement, a similar methodology was used.
With the organizational structure, project vision, user stories, sprints, and series of platforms / tools setup- we were able to lift our project off the ground and continuously chip away at it until it was ready to be released.
Challenges
Every single phase of the project was a challenge. From figuring out how we should setup developer branches to learning how to even code in React and JSX, each step was an obstacle that had to be overcome. Here are some of the major roadblocks we had experienced:
Experimental Platforms
As our first large-scale team project, we needed to research the appropriate tools and platforms that we would be using. This includes setting up git branches for collaboration and Trello for task management.
Lacking Experience
We didn’t have prior experience with the MERN stack. Quite literally, we could probably only npm install.
What the team did have, however, was the ambition and drive to learn. The team completed the MERN Tutorial and used it as a reference to setup our backend and MongoDB database.
Followed by the tutorial, our team members individually learned React via Codecademy. All later steps consisted of constant Googling and Stack Overflow.
The Search and Modification of a UBC SSC Scraper and Parser
It was very challenging finding the correct tool to retrieve data from UBC’s SSC site and parse it for our database. We luckily found Eugene’s tool (https://github.com/eyqs/req), and modified it with custom Python scripts to format and upload data to our MongoDB server.
Custom Components
A large obstacle we faced was the designing, planning and development of custom components. We had to design and plan how we would like the course selector to look while ensuring the functionality was all available. Designing this functionality such as the course selector required a lot of creativity in the design and planning. The creation of these modules presented a series of challenges.
For example, too many results overloaded the search bar component and the web page would continually crash. We implemented regular expressions in the backend to search through courses and slice the resulting array to limit the number of objects returned by the GET request.
Motivation and Persistence
We began our project at the start of April 2020. During this time, we faced adversity with the growing pandemic due to COVID-19.
Final exams were rapidly approaching. With this project, everyone had felt tired and sometimes required that extra push of motivation and inspiration in order to reignite the passion for the project.
Through weekly meetings, we were able to persist and inspire each other to continue to work and develop.
We supported each other which had helped us to cope with the quarantine conditions and continue to stay productive.
Key Takeaways
To ensure that the project was completed while all developers were in quarantine conditions in the month of final exams, the following points were major contributors for success.
- Weekly meetings and progress reports.
- Transparency.
- Accountability and support.
- The motivation and passion to learn a new stack.
- Organized Trello board and feature-specific Slack channels.
- Every new feature was a barrier, however, with the support and collaboration of a team, the product was successfully made.
- Complete the MERN tutorial and React from Codecademy.
Now, it’s your turn.
With persistence and a supportive team, you can overcome any limitations or obstacles.
Don’t have a project idea? You can also contribute to open-source projects. Feel free to take up an issue here: https://github.com/HelloWorldFam/UBCExplorer
Go forth, generate ideas, establish a plan, and boldly build!
The Hello World Dev Team
Ben Cheung
LinkedIn | GitHub | Site
Jerry Hall
LinkedIn | GitHub | Site
James Jun Hyoung Park
LinkedIn |GitHub | Site
James Sun Chung
LinkedIn | GitHub
Contact/Feedback
Happy to connect with you all as well. Feel free to check out the following social links:
LinkedIn: https://www.linkedin.com/in/mrbenc88/
Website: http://bencheung.me/
