Bullground MX

Project goals

After the initial meeting with the client, we stablished what Bullground would be. The main objective of the platform is for users to create a subscription that allows them to take the courses available on the platform. Besides that core functionality. Users would have to be able to gain points and win prizes by using the platform, manage a friend list inside the platform and take online assessments and battles between members to verify the knowledge learned in each course.

The stack

React is almost always my go to Front End Framework due to my familiarity with it and how easy it is to bootstrap projects from scratch. When it came to the Backend, the client wanted an MVP done as soon as possible, so the most sensible choice was to use Firebase, since it simplifies development and offers extra functionalities we were looking to use like Authentication, Analytics, Serverless Functions, etc.

Now, since a course platform would be nothing without videos, we had to make a choice to develop our own solution for hosting the files or to integrate with an existing platform like Vimeo. We ended up going for the latter because of the delightful experience I had working on a previous project, which involved using Vimeo for hosting videos.

Once I had decided on the most important parts of the Stack, I proposed the client we use Stripe to create user subscriptions and manage payments, as well as Sendgrid for sending transactional emails whenever some key events happened.

Coding

Since this project was going to involve multiple phases of development and would eventually employ multiple developers, not just myself, I tried to work hard on keeping the components I made as reusable, clear and testable as possible.

For this project, I used the following open source libraries for speeding up the development process:

• cypress for testing the front end.
• redux and redux-thunk for managing the state of the app and providing cleaner developer tools for debugging.
• react-redux-firebase, firebase , redux-firestore and redux-firebase for connecting the app to firebase and firestore.

Even though we launched the initial prototype in a little bit over 6 weeks for the client and stakeholders to test, the whole development process took around 3 to 4 months with extra features being rolled out every other week.

Screenshots

Course page (Unsubscribed).

Course page (Subscribed).

Friend list page.

Rankings page.

Battle creation.

Ongoing battle view.

Maintenance

Over the past months there's been constant communication between me and the client about certain situations that have occurred, including some bugs and extra functionalities that they wanted to add to the site. Also, since December 2020, two new developers have taken over this project, so I introduced them to the codebase and set up some processes for making their development experience as easy as possible.

Final thoughts

I could spend all day writing about all the things I learned while developing the system, but the key takeaway is how testing can make or break a project. Even though it might sound like more upfront work, it is extremely beneficial in the long term to write robust tests.

I'm really proud of the work I was able to contribute to this project and I'm really happy for the success the clients have achieved with it. I will definitely employ most of the lessons learned during the development of this project in my future work.