Successfully Converted the Next App to a PWA
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
Convert Next App to PWA
Install Next.js + Tailwind CSS + Chakra UI
Create GitHub Repo
"Work Smarter Not Harder"
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.
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.
Determine the Code-base of the Application
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
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
Signed up for Tally.so
Created a Tally Forms account so I can create my Feature Surveys with it and obtain the data from it and sync it to the #awesomefamcal Notion.
Notion Page Creation Successful!
It feels good to make the initial steps of this public build.
Create a Notion Page for Awesome Family Calendar
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.
The wife gave me a mission!
My wife gave me a mission to build a family calendar app that doesn't suck. I will be surveying my family on what they think would make a user-worthy family calendar app, they would use and integrate within their day-to-day lifestyle.
So I will be building this app in public, here on Makerlog. Plenty of to-dos to come π€
So I will be building this app in public, here on Makerlog. Plenty of to-dos to come π€
Having so many ideas hurt!
My biggest problem is that I have so many ideas but don't put my fingers to the keys and just try to code them instead of holding the ideas in my brain. This is something I want to overcome so I can build some clarity in my head and just focus on one build and enjoy the process.
haha you're not alone. i think most of us indie makers have this same problem >_<"
Joshua Berrios π΅π·
Author
It comes with the fact that we are creative and instinctive problem solvers. π
Liquid by Shopify
I was contacted by the Head of Partnerships of Uscreen.tv and was presented the opportunity to study and use Uscreen so I can help build Uscreen Experts (similar to Shopify Experts). What is so interesting is that Uscreen allows for customization of the landing pages the content creators can create but their code base for the templates uses Liquid, which is a templating language created by Shopify.
Learn GraphQL
I plan on learning GraphQL starting with a beginner's course via Egghead. The reason for this is that I will be working on building a Bible Study video app that will incorporate a custom Bible API (more to come so be sure to follow me.)
Course I will be taking - https://egghead.io/courses/graphql-query-language
Course I will be taking - https://egghead.io/courses/graphql-query-language
- β Previous
- 1
- 2
- 3
- 4
- Next βΊ