B6 Bachelor Cargobike Adventures  

Working on a real world project that has real users and product owners as stakeholders, preparation and planning are indispensable. We started out by using various templates from Miro, the perfect collaboration tool to conduct Product Vision, use cases, user stories, user personas researches. We then draw out our web page layouts, agreed on the color scheme and design elements that fit our product, and created a few UI drafts on the collaborative UI design tool Figma.

In the beginning, We had a long discussion on which stack to choose. On one hand, we had just learned the MERN stack, and most of us are more familiar with JAVA and JS. But on the other hand, we are working on a real world project that will be used by real users and admins, knowing that the admins are from a fairly new startup not having a tech position yet, and that we have to think about what’s the easiest way for them to maintain the site themselves, we’ve decided to create a WordPress web app, but instead of simply installing theme and plugins, we have written our own customizable theme and plugins.

To create our own theme, we not only utilized what we learned about web programming using HTML, CSS, and JS, but also embraced the chance to learn the very popular web development language PHP. Part of the reason why we decided on the stack was to learn new tools and languages during the process, and where else to start other than the language used by almost 80% of the websites (according to W3Tech) for the server side.

Running the web app using a virtual machine in Docker container makes our lives easier running, testing, and working on the project on different machines. Because the environment is isolated, we don’t need to worry about the app performing differently on different machines that have different versions of supporting tools.

Applying Scrum, an agile framework, to the project process makes tasks much more manageable and their status fairly transparent to each and every member. And Trello by Atlassian is a perfect tool for visualization and sprint planning. We were also able to adapt to changes to the plan or the features by having a shorter sprint cycle. Of course, communication tools like slack, discord, and zoom, makes it possible to work remotely in the pandemic. Furthermore, we also used Google Drive and doc to share contents and files necessary for our project.

In the beginning, We had a long discussion on which stack to choose. On one hand, we had just learned the MERN stack, and most of us are more familiar with JAVA and JS. But on the other hand, we are working on a real world project that will be used by real users and admins, knowing that the admins are from a fairly new startup not having a tech position yet, and that we have to think about what’s the easiest way for them to maintain the site themselves, we’ve decided to create a WordPress web app, but instead of simply installing theme and plugins, we have written our own customizable theme and plugins.

Sharing and collaborating on the same codes are made possible by using GitHub, git also allows us to work on different branches without constantly being overwritten or clashed. Having the changes tracked also make errors less frightening as we can also revert to the working version. In addition, we could also use GitHub to host test versions so that our changes do not immediately affect our live version. And at the end of each sprint, the changes that have been tested and reviewed were copied to the live code we host on FileZilla and being staged.