1 Startup Series: Connecting my Admin frontend to the backend

My solar energy startup platform FasoLara has reached a new milestone recently and I decided to start a new blog series about it!

The project management platform has been a long journey since I published my first commit to GitHub in October 2020. What started based on a simple idea quickly became a behemoth of a software engineering project for my beginner programmer skills. I have poured thousands of hours into research, tutorials and coding to figure out how to put something like this together. Since then, I have made multiple changes to the FasoLara repository.

The platform is currently open source, but I am using a private fork to publish the 3 different components to the Vercel platform. I had a basic demo of the admin dashboard with 6 pages before I removed all the sample data, then upgraded everything to the app directory in NextJS 13 and connected the dashboard to the backend server featuring Apollo GraphQL server v4.

Yesterday, February 15th, 2023, I added Next-Auth to handle authentication. Initial testing of the next-auth version seems to work with the appDir in Next.JS 13. It is far from the login experience that I want. It will take more effort to iron out the details because proper documentation is still rare

Lots of testing needs to be done

Although I have successfully connected the Cypress testing framework to the frontend app, I have yet to do the same on the admin app. I am managing a lot of complexity with lots of new packages.

Every mistake under the sun

I have lost count of how many times I made breaking changes to the code base trying to implement new features on the main branch only to hard reset the branch after tens of hours of work that I could have done on a new branch instead. I can say that I am moving fast and breaking things per facebook's motto!

Mobile app on the backburner

I have 3 sample pages that I made on the mobile application. I would have liked to have at least a fully functional landing page on the React Native application component by now, but that might take a while since I can only focus on breaking one thing at a time! I have not finished the Figma designs of the mobile application. Now that I have a decent idea of the backend server capabilities and have dozens of detailed GraphQL schemas to support it, I can make more progress on building the server and admin dashboard in lockstep. Later, when I get stuck on both of those, I will switch my attention to the mobile application. I think once I have a functional admin dashboard which is the centerpiece of the platform, mobile development will benefit greatly from the experience.

Fun while it lasted

I have enjoyed crafting some of the User Interface components from scratch and learning how to put together primitive components using JSX and SASS, it has become quickly obvious that I was spending time on the less important things. I have recently added ChakraUI to my tech stack and the increasing number of available ready-to-go components in Chakra has accelerated development considerably. The project contains enough complexity for a lifetime, and it was refreshing to move away from getting lost in some of the smaller weeds so I can focus on sorting out getting lost in some of the bigger weeds such as authentication and role-based authorization using NextAuth and a homemade authentication scheme based on GraphQL.

Battle of Syssiphus

Building so many separate applications within the same platform feels like a battle of Syssiphus based on the sheer amount of work that needs to be done and redone. I can say I have rebuilt the admin dashboard 2 or 3 times already. The irony of duplicating work by trying to avoid duplicated work. But I also know that duplicating work 2-5 times is much better than duplicating that work on 20 different pages, some of which will need to be redone a few more times in the future based on updates in the backend and changes done to the underlying MongoDB document models.

Next steps...

I look forward to a shorter blog post in the next article where I document how I managed to get authentication 'working' on the admin dashboard. It feels good to see how things are shaping up since I had no idea I could pull off all the progress made so far. Upgrading the entire project to TypeScript was such a huge surprise based on how little TypeScript I know and how it took less than 10 hours in total to get the whole project converted to TypeScript. It's all on the up and up from here!!!