Vennbury

Description

Mastery-based and project-focused learning platform. Become an expert by building projects.

Problems Faced

This is my first serious production-ready full-stack project, and there were (and still are) many problems along the way. The first issue we faced is building a React application (SPA) and connecting it to Express server. I quickly realized that we want to have many pages, and that if we only have an SPA, then a page won't load unless it's a homepage, which makes link sharing impossible and hinders SEO. The second problem was team management: we have a team of two, and I'm the 'visionary' in it, so I have to make all of the strategic decisions alongside project management. The third problem was about making lesson page creation scalable: since we are planning to have a big number of lessons, it's a big hassle to create a page for each lesson.

What I did

To solve the issue of connecting the server with the client, we initially tried to set up a hybrid solution that hydrates the React page on the server and sends it to the client as a ready HTML page (Server-Side Rendering), but it was overly complicated from the architectural standpoint, full of hydration bugs, and very unoptimized. So, I made a decision to switch to NextJS, that solved all backend problems, provided much more pleasant developer experience, and lets us easily choose between SSR and CSR. To solve the team management issue, I set up a Trello app with three boards: to-do, in-process, and done. For each task, we create a card and assign labels that indicate urgency/importance, come up with weekly due dates, and delegate tasks. It allowed us to visualize what tasks are important and prioritize them, to track who's responsible for what, and spread what's needed to do among the team. The last problem is the most interesting one. We want to write lessons in Markdown, so we needed to agree on a convention for the structure of those lessons, after which we designed an algorithm to recursively search through the 'lessons' folder, parse the text, and put it into our components.