Under the Hood

The idea emerges from a use case. Blogit template

I was developing a daily writing app using Firebase and a few of the latest technology.

The entire process was quite simple but repetitive, let divide the process

Next.js framework setup
Packages installation
UI components (Frontend website)
State Management
Authentication
Firebase CRUD APIs — ADD, UPDATE, DELETE
Firebase Storage APIs
Search API
Vercel deployment, Github CI/CD A lot more process comes that are often repetitive process.

All the above setups are almost the same for developing any kind of content management platform. CRUD APIs to state management and database and so on.

Not just a usual blogging boilerplate!!

Blogit, This is not usual boilerplate for bloggers, it’s more advanced boilerplate that itself is a product to use as the following categories

Content Writing Platform
Notion, Obsidian based apps
Journalling, Daily writing tools — Todoist, Apple Notes
Documentation tools like Docsify
Writing such as Medium, DevTo, Hashnode

What’s Inside?

Home Page

View all blogs (drafts and published).
Edit and publish blog posts.

Profile Page

Showcase all publicly shared blogs.
Create a public profile to share your work.

Search Modal

Search through all blogs (drafts and published).
Efficient fuzzy search using Fuse.js.

Authentication

Google authentication via Firebase OAuth for secure login.
Advanced Blog Editor
Notion-like block-scope editor for effortless writing.
Add headings, images, code blocks, links, dividers, and more.
Content Export
Export blog content into multiple formats: HTML, Markdown, and plain text

Public Blog Links

Publish blog posts on a shareable link for easy global access.
API Integrations
Fully set up APIs to store user details, blogs (drafts and published), and images.

Storage & Database

Firebase Firestore for blog and user data storage.
Firebase Storage for managing image uploads.

It’s a product within itself rather than a boilerplate.

Benefits of this boilerplate

Ready-to-Launch Blogging Platform: This allows developers and businesses to start their content platform in minutes.
Advanced Editor: The Notion-like block editor (powered by Editor.js) provides rich writing capabilities, including headings, images, links, code blocks, and more, making it easy to create engaging, structured content.
Modern Tech Stack: Built using Next.js, Tailwind CSS, Mantine UI components, lucide-react and react-icons, editors, redux, react-query
Google Authentication: Secure and simple login with Firebase OAuth
Public Profile & Blog Sharing: Showcase your work through a public profile page, with shareable blog links
Powerful Storage & APIs: Integrated with Firebase for managing user data, storing blogs, and handling images, ensuring a secure, reliable, and scalable platform.
Vercel Analytics — track your platform’s performance effortlessly

Tech Stack

Next.js
Reactjs
Tailwind CSS
React Query
Firebase
Mantine
Editorjs
Firebase OAuth (Google Authentication)
Redux

Purpose of boilerplate

Currently, I am working on the demo part of the boilerplate.

Soon I’ll add the blogit demo on the template, it’s a Notion-like writing platform developed using Blogit.

We can build other content management and related apps using blogit as the fundamental boilerplate, making blogit a framework tool.

The purpose is simple, blogit can be or should be used for the following apps

Simplest writing app, to-dos, message apps,
Content creation platforms like Medium
Journalling apps
Documentation apps For anything related to writing that needs CRUD APIs, Editors like Notion, Markdown or Text editors can be developed using blogit.

How to use boilerplate?

Get the boilerplate
Go to the Firebase console and create a project, get the API keys of the project and copy-paste it
Inside Firebase enable Authentication and add Google Authentication
Install Node.js in your terminal if not installed using brew, (brew install node)
Open the boilerplate in the vs-code (or sublime, vim)
Open the terminal and press “yarn” or “npm install”
Add the .env file in your boilerplate and put the Firebase API keys as it is the .env
Run the “yarn run dev” command in the terminal
Open localhost:3001 on your browser

Who is the Idea customer?

Use-case of the boilerplate

Good for Freelancers, easily save 50 hours of your dev time and the cost is also minimal
Good for small startups and CEOs
Good for Enterprise who want to create a new content management platform
Good for solopreneurs who want to build and ship fast
Good for agencies working directly with clients

4 steps to get started

All the use cases, instructions on How to use, and Documentation for all APIs and architecture are present in the boilerplate itself.

-Within 4 steps one can build and deploy their blog platform instantly and start writing online to share their work.

Within 4 steps one can build a blogging platform for their clients
Within 4 steps one can build Notion-like apps for customers
Within 4 steps one can build a to-do app
Within 4 steps one can build a medium like apps
It’s 4 steps
Get the Boilerplate
Add Firebase API keys in .env
Push changes to Github
Deploy to vercel.com
Hence your blog platform is ready.

Conclusion

I would insist you all reading check out the template, if found good give it a shot and review me back.

Your feedback is very much appreciated and helps me to define the future.

Your feedback can help me create this boilerplate as a framework for all kinds of content management platforms on the internet.

Blogit - Ultimate boilerplate for all your content management platform

Shrey

Blogit - Ultimate Boilerplate for all your content management platform