Bald Bible

Tech StackNode.js, React, MongoDB, Express, VanillaCSS, Jest, Cypress, Cloudinary

Overview

Our final group project while at Makers. Our team consisted of 4 software developers and 2 quality engineers, and we were given 8 days to reach MVP building anything we liked which we would then present to a live audience at the end of our course. We decided on to build Bald Bible to try and create a positive place on the internet for those suffering with hair loss. One of our team pitched the idea drawing from his own experience of losing his hair where all you see online when you google hair loss are websites selling you products to try preventing hair loss rather than encouraging you to embrace it.

8 days to MVP
Main Language: JavaScript - React frontend & Node.js backend
Database: MongoDB
Testing: Backend: Jest, Frontend: Cypress
Other Tech: Express, Cloudinary (image storage), Bcrypt, CSS, Vite

Myself and my team presenting the tech demo below live at our demo day event.

Tech Functionality Demo

Achieved Functionality

Login: Must be unique email and correct password
Signup: Valid format, password length, special character
Password Security: Bcrypt-hashed passwords
Dynamic page elements: buttons, login/signup, Feed Page
Image Feed: Clickable images
Security: Restricted actions for logged-in users only
Responsive: Full responsiveness across screen sizes
Image Upload: Cloudinary image storage, auto-display on feed
Comments: Conditional rendering, deletable by user
Likes: Like/unlike functionality
Testing: Database, frontend, and API tests in place

Planning

As a team we quickly agreed upon using the MERN stack, this was because we all had experience building using the stack but there were still plenty of learning opportunities and optimisations, we could do by creating another project in the same stack especially as we had a limited timeline. Once decided between us on building the Bald Bible when then had to decide what functionality we hoped to achieve and what MVP of Bald Bible looked like. To do this we created user stories of what as a user we wanted to be able to achieve on the site. Using the user stories, we then created wire frame pages of what we wanted the site to look like and from this drew up a component tree using Excalidraw. Wireframe pages of Bald Bible made while planning

Our wireframe pages for Bald Bible made during the planning stageAs a team we followed AGILE working principles and used a trello board to break down the tasks which needed doing and make sure we got the most out of each sprint. This also made sure each team member knew what tasks to needed completing and we were able to track the progress we were making.

Our Trello board for Bald Bible showing our progress and tasks to complete

My Responsibilities

Converting our user stories and wireframe component tree into manageable Trello tickets with an accurate time estimate for each.
Setting up the MongoDB database model classes and creating a seed script to put test data into the database.
Configuring Cloudinary to resize uploaded images to make it easier to get the correct Pinterest-style look on the UI.
The routing to send the image data from the UI to the backend and upload it into Cloudinary.
Creating the image controller to create new Image instances for each upload and then storing user and image data into the MongoDB database.
Using Bcrypt to hash all user passwords in the database for user security.
Project managing - we rotated the responsibility to lead standups/retros between the group throughout the project.
Locking the Upload page so only logged-in users can upload images to the site.
Pair programming with team members to help with CSS styling on the frontend and debugging.

Reflection

Image Upload

This was the first time any of us on the team had worked with handling images. I took charge of the ticket for image upload as I knew for us to achieve MVP before the demo day having a reliant and fast way of handling images would be essential. I knew I wanted to try out a cloud store for our images and after some research online I found Cloudinary was a fast and free way of storing images for the project and it also had good SDK documentation I could work from. Although it took me longer than I would have hoped to get the upload working and connected to the database, it was a good experience working on something completely new to me.

Version Control

Working in a team of 4 developers all on the same project led to a few issues with merge conflicts. We had a clear system in place to try and mitigate the risk of this happening which was - all working on our own individual separate branches away from the main, regular commits and needing 1 other members approval before merging into main on GitHub. We did however run into some issues with package.lock.json but all were sorted by using VS Codes merge editor. I have since learned more about rebasing which would have been helpful when working on this project.

Environment Variables

Using both MongoDB Atlas and Cloudinary we had quite a lot of local environment variables which you would not get added to your local device when pulling down the latest version from GitHub. This caused some issues for some of our team who struggled with running their local version as they had the incorrect .ENV values. This was a quick fix once discussed with the rest of our team, but it highlights the importance of communicating when you add values into .ENV / config.