Awesome Family Calendar

I need to start working on the initial mockup of the application so I can start building out an MVP. I am thinking of designing with Framer so I can be able to generate React code on the fly while I design as well (one of the coolest features of Framer in my opinion.)

I just determined an accessible color palette that will be used to design the starting base of the application.

Thanks to this solution by J0hannes on Stack Overflow, I was able to fix this issue! (Screenshot of error attached)

Link to the Answer - https://stackoverflow.com/a/72140243/19080031

Let the building begin with the determined backend and frontend tech stack.

Learned how to convert my next app to a PWA with just a few simple steps, thanks to this Hashnode article - https://blog.avneesh.tech/how-to-create-a-pwa-with-nextjs

So I have decided to go with frameworks and toolings I know best and have been learning very efficiently in the recent months.

Frontend:
I am going with Next.js as the framework of choice. It is a no brainer for me since I have had the privilege to learn Next.js in the past couple of months and the development experience is very clean, responsive, and talks well with my backend of choice. I will be incorporating Chakra UI components within my application as a major initiative to build not only a beautiful app but have the ability to implement an accessible UI with ease. For styling I will be relying on the most powerful and popular CSS Framework in the industry, Tailwind CSS; this will help with developing unique styles within app but also provide a more efficient mobile responsive experience for custom components I intend to build throughout.

Backend:
Even though my Full Stack Web Development skills focuses on the MERN Stack, but I really loved my learning experience with Supabase and Next.js via an Egghead course by Jon Meyers. The simplicity of storing data, authenticating, and connecting it to a Next app was 🤌 . I know there is so much more you can do with Supabase and I will be taking the time to learn more during this backend building process.

What is Capacitor.js?
Capacitor is a cross-platform native runtime, developed by Ionic, that will allow me to build the Awesome Family Calendar app as a web app that can run natively across the Web, iOS, and Android. In other words, I will be building a PWA (Progressive Web App) in the end. I think this is the best approach currently unless my mind is changed other wise or I learn something along the way that will benefit the development of this app.

I need to do some research and determine what frontend framework should I use for the application as well as what should I develop the backend in.

Possible Front-End Options in Mind:
- Next.js + Chakra UI (thinking of Accessibility and SEO)
- React.js + Chakra UI (native React experience with Accessibility)
- Vue.js or Nuxt.js

Possible Back-End Options in Mind:
- Supabase
- Express.js + Node.js
- MongoDB + Express.js + Node.js
- Prisma
- GraphQL

It feels good to make the initial steps of this public build.

The Notion page will be to write down the application's user stories, feature sets, ideas, and also another place to keep track of the app development progress.