Introduction
For those new here, Luminary is a curated directory celebrating the remarkable contributions of women to our communities and society. It serves as a dedicated showcase for the daily accomplishments that deserve recognition but too often get overlooked or swept under the rug.
As any product grows, its requirements change and its scale expands. With our original vanilla setup, we found ourselves constantly reinventing the wheel, duplicating code, and stepping on each other's toes during development with merge conflicts everywhere ( GOD I HATE MERGE CONFLICTS ). To solve these bottlenecking problems and build a more scalable platform, we kicked off the process of modernizing Luminary’s tech stack.
So in our search for a more modern tech stack we landed on setting up a monorepo ( managed by turborepo ) and Next.js, typescript and base-ui for our front-end, we decided that Next.js would be our best course of action as it's built on top of react.js which is a component based framework and promotes the idea of keeping a large part of the code-base reusable and easily maintainable.
Technical Decisions - Choosing our stack
We ultimately landed on Next.js as our framework of choice. Beyond the obvious benefits of a component driven architecture, we realized Luminary requires heavy SEO optimization an area where Next.js truly reigns king.
It provides an effortless way to rank highly on search engines, allowing us to dynamically generate meta information based on individual article data. Furthermore, because our platform consists mostly of static content, leveraging Next.js's rendering strategies allows us to serve pre-rendered pages easily without compromises or any significant over head.
The supporting cast
Base-ui: To be completely honest, Base UI was a choice I wasn’t entirely sure about at first. It felt like we might be better off with a more "out-of-the-box" component library.
Looking back, I’m so glad we made this choice. By offering completely unstyled components, Base UI gave us all the functionality and accessibility we needed, without the opinionated design constraints of something like MUI or Shadcn/UI. It provided a clean, flexible foundation that we could easily wrap our own custom components around.
Tanstack query: Need I say more, it gave us an easy way to manage all our api needs, keeping all the complexities of managing state that surrounds data fetching and error handling.
Typescript: I really want to TypeScript to be the standard across the web wherever it isn't already. It introduces a reliable, and well documented pattern for how our functions and objects are handled, allowing contributors catch bugs during development rather than letting them slip through to break in production, and also helps you better understand what’s going on in the code, TypeScript saves us massive amounts of debugging time and time explaining what the code does.
My new role: Engineering Lead 😝
So for this sprint I was made engineering lead and was given the honor to spear head the conversion
Project Setup: I was tasked with handling the project setup and setting the development standards across the application, setting up turborepo and pnpm workspaces to manage our monolith application was the first course of action, then deciding on how the web ( frontend ) should be structured was the next thing.
Setting up tailwind and styling: I had to setup the tailwind and css variables for colors, fonts, spacing, default styling for certain elements among other things.
Building our reusable components: Another thing I was tasked with was going over the already built page and picking the commonly reused parts and making it into components, in some cases wrapping over base ui ( ie button, form input, select input, etc )
Code reviews and support: I was also burdened with my previous role and lead maintainer, taking up the tasks of carrying out code reviews on all PRs raised and providing support and guidance to team members that weren’t too familiar with the stack, it was really interesting to do and it’s something I wish I could do more often.
Building out the landing page and some of the admin pages: it was my role to build out the first page that most people see when and making the experience of it as smooth as possible, adopting framer motion for adding subtle animations and creating custom animation wrappers, allowing for animation elements to be 1. Rendered client side while their content remain server side, 2. Allow for common animations to be reusable. I also spent time working on the admin page, which would be used for managing nominations and articles ( approving and rejecting them )
Lessons Learned
Over the past two weeks I’ve felt overwhelmed and I’ve gotten a new found respect for opensource maintainers cause being the lead or head of something so fluid and dynamic amidst other responsibilities is very tasking mentally, and I’ve caught myself trying to think through so many different problems at the same time, but I’ve realized Rome wasn’t built in a day and certain things can be delegated to people or automated in some ways. I’ve also picked up some knowledge on keeping your codebase maintainable at scale ( not for the performance and optimization of code though ) but for the developers and people working on it.
On the future of luminary
Well long term plans haven’t been set in stone yet but there are a few ends we need to tidy up right now
- One mainly being the backend and how it’s out of date with our frontend and I personally plan on spending time bringing it up to speed.
- There are also plans to setup per page SEO optimization by providing web meta data for each nomination and article on the platform allowing them to be better indexed by search engines.
- Setting up ci/cd pipelines allowing for the project to be properly tested and deployed without manual intervention.
- Setting up stricter contribution measures, with husky, eslint rules and better formatting to keep the code consistent between contributors.
Conclusion
Luminary at the end of the day is a project maintained by a small group of people and if you see this post and you’re motivated to help further the product, we welcome your expertise and you can start from raising issues on our github or you just want to spread the word of the platform, or you want to acknowledge a woman in your life then go write ahead, I’ve had so much fun along side a few others building Luminary and I’ve learnt so much I can’t wait to see where we go next with the project, for now it’s Sayonara
Top comments (0)