“BookBarter” — because we all know that sharing is caring, especially when it comes to books.
This project was carried out as part of the TechLabs “Digital Shaper Program” in Münster (winter term 2020/21).
Abstract
Everyone who likes to read knows the problem that there are always too many or too few books at home. Reading a book once is like plastic cutlery: no longer up-to-date for us!
The goal was to build a web app on which every user can easily and quickly exchange books. Users can log into their accounts and upload their books, find their favorites on our digital bookshelf, create a watch list and connect with other users to share or exchange their books.
We started by creating a wireframe and designing a prototype with Figma and later implemented it using HTML, CSS and Java Script.
The idea
Reading books has been booming again since the Pandemic. We would like to network bookworms with one another so that they can easily find new supplies. We want to make swapping and lending books accessible, easy and comprehensible for everyone, both in private circles of friends and in a public community. This means that users no longer need to worry about their own favorite book being loaned to others, because we keep a record of it! In addition, the difficult use of the library due to the pandemic is given a convenient alternative. We bring the library to your home office and the books can be exchanged privately, for example contactlessly.
Team setup
The two areas of web development — front- and backend — were essential for the realization of this project. Our team consists of three front-end developers, Chris, Janina and Lena, and two backend developers, Johannes and Julius. Since Chris and Lena already learned UX Design in the last Techlabs semester and Johannes was already involved in the Data Science Track in the last semester, we were able to fall back on this knowledge. We usually met online once a week to record the work status, clarify problems and assign new tasks. Sometimes we also worked specifically on the code during the meetings and were able to share our successes together. In the last few weeks of the project phase we met more often to move the project forward. Our mentor Johannes was almost always present at our meetings. He supported us with great commitment and expertise and was available to us all the time.
Project work
At the beginning we tried to develop a project concept together that appealed to us all equally. We used tools like Notion and Miro to communicate well with each other. In the second step, we started a survey at Typeform to filter, with the help of others, what really matters to the users. After evaluating the survey, we focused on separating necessary features from not absolutely necessary features and then turned them into goodies. Some of them, such as the chat photo upload function, could still be implemented in the end.The front- and the back-end have constantly reacted and always coordinated with each other. Sometimes the back-end structure was already there and the front-end had to be waited for.
Chris was in charge of most of the front-end and made things possible through his experience and never ending enthusiasm, while Janina and Lena mainly took care of the idea, the concept and content and the over all design with tools like Figma. Janina had first coding successes with the imprint, data protection and the About Us site, while Chris tackled the issues of functionality in the front-end and connection to the back-end. Chris has become a professional in topics such as the functional component structure or the exclusive use of hooks (useState, useEffect, useContext, etc.) to reduce the boiler plate. Furthermore, the use of React Router DOM to ensure a seamless transition between the individual pages and requests to the backend by means of extensive use of the fetch API.
Tasks and ideas that are still open in the front-end are, for example, the structure of the “MyBook” page or the “Watch List”, as well as the contact function with other users as soon as they are interested in a listed book. Due to the increasing complexity of the app, the state management must also be revised and adapted with tools such as useReducer hook or Redux. The app is currently still working with a manageable number of states, which is why there is no urgent need for action. At the beginning we decided to start from scratch and work with classic CSS instead of using frameworks like Bootstrap in order to deepen a direct learning. In the future, the CSS could be further modularized in order to keep a better overview. With a preprocessor like SASS, nested styling could be used.
Johannes and Julius shared the back-end tasks and permanently complemented each other with their skills. The backend is based on nodejs, express and mongodb. The various interactions with the database were designed in this way. The functions “User” and “Book” could be created, deleted and changed. Furthermore, users can log in and only then upload a book, including a display image.
As in the front-end, we have not yet been able to terminate all functions in the back-end. The chat function we wanted could not yet be implemented, but we hope to be able to finish it.
Throughout the project process every change or innovation was first requested from the other team members by pull requests on Github before it could be merged to the main branch. So all team members were always addressed and could follow the current status. Even the final hosting was carried out jointly via a slack call with screen sharing. There were small setbacks and restructuring of the work due to repeatedly failing technology or time-consuming exam phases. Yet every team member found a way to contribute to the end product.
Unfortunately, due to the pandemic, we were unable to meet in person and always had to meet online to coordinate.Through the intensive exchange in the Slack Channel, supported by tools such as Notion, Google Meet and Zoom, we have always found the right way to group conversations. Fortunately, it worked out pretty well, but since we got along very well, real life is definitely still to come.
Learnings
In the beginning, our priority was to develop a simple structure for our web app and to get a simple website up and running. One of the biggest challenges and a permanent question mark was to link the front and back end. Fortunately and with the great help of Johannes we managed to connect it at the end. And as with any project work, one thing that you learn again and again — good time management and realistic expectations are everything. This worked out well for us because we were aware of this from the start, but also because some team members were able to give full throttle again at the end.
Acknowledgments
We would like to thank the whole TechLabs team, especially our mentor, Johannes Stricker, for this great journey!
The team
Johannes Kellers Web Development
Julius Caßel Web Development
Janina Peppel Web Development
Chris Schimetschka Web Development
Lena Krause Web Development
Mentor
Johannes Stricker
