Blogit - The Ultimate Boilerplate for Your Content Management Platform

Blogit - The Ultimate Boilerplate for Your Writing Needs

Demo

Blogit is a full-stack boilerplate for all your writing needs. It’s the quickest and most efficient way to launch your online blogging platform, catering to various needs such as

• Creating content
• Writing SaaS
• Journaling apps
• Reports creating website
• Documentation tools
• Blogging platform

With Blogit, you can focus on what truly matters: producing great content effortlessly.

Why this template?

SAVE -- almost 50-80 hours of work, and develop any kind of content creation platform within minutes

Whether for a client, a startup, a community, or your own company, building a content or blogging platform from scratch takes a lot of time.

Many parts of the process—designing the UI, setting up APIs, managing the state, handling authentication, and connecting the database—are repetitive and time-consuming. This boilerplate eliminates all that hassle, so you can focus on what matters: creating a platform that lets you and your users start producing content immediately.

What you will get?

1. Home Page
   • View all blogs (drafts and published).
   • Edit and publish blog posts.
2. Profile Page
   • Showcase all publicly shared blogs.
   • Create a public profile to share your work.
3. Search Modal
   • Search through all blogs (drafts and published).
   • Efficient fuzzy search using Fuse.js.
4. Authentication
   • Google authentication via Firebase OAuth for secure login.
5. Advanced Blog Editor
   • Notion-like block-scope editor for effortless writing.
   • Add headings, images, code blocks, links, dividers, and more.
6. Content Export
   • Export blog content into multiple formats: HTML, Markdown, and plain text.
7. Public Blog Links
   • Publish blog posts on a shareable link for easy global access.
8. API Integrations
   • Fully set up APIs to store user details, blogs (drafts and published), and images.
9. Storage & Database
   • Firebase Firestore for blog and user data storage.
   • Firebase Storage for managing image uploads.

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

Code Architecture

• package.json rules and which port, node engine along with version name
• modules directory contains reusable UI components like Card, Button, UI
• components/src contains UI components + state management + API integration
• Redux/Zustand folder have state management
• Packages directory contains third-party packages along with API
• Utils directory contains Supabase/Firebase configuration + Hooks
• jsConfig contains the compilation options, used for absolute import
• next.config.js is the next.js configuration contains babel and other presents
• postcss is used for tailwind css preprocessing
• .env files contain the ENV variables, API keys, secret values or keys

Price - $29, is it Worth it?

• Time Savings: Save 50-80 hours of work.
• All-in-One Package: Code setup, APIs, State Management, Storage, Authentication
• Easy Setup: Connect with Firebase without hassle, store data and images
• Modern Design: Built with React and Tailwind CSS for a clean look.
• Focus on Writing: Skip the boring setup and start creating.
• Quick Launch: Start your blogging platform quickly with a reliable solution.

Tech Stack Distribution for Blogit

1. Frontend:
   • React
   • Tailwind CSS
   • Mantine (UI Library)
   • Editor.js (for rich text editing)
   • Lucide-react (for icons)
   • React Icons (for additional icons)
2. Backend:
   • Firebase (for authentication and database)
   • Firestore (NoSQL database)
   • Firebase Storage (for image storage)
3. State Management:
   • Redux (for global state management)
   • React Query (for data fetching and synchronization)
4. Framework:
   • Next.js (for server-side rendering and routing)
5. Utilities:
   • Axios (for API requests)
   • Fuse.js (for searching)
   • NProgress (for loading progress)
6. Development Tools:
   • ESLint (for code quality)
   • Prettier (for code formatting)
   • Babel (for transpiling)
   • PostCSS (for processing CSS)

API Overview

Blog API Overview:

• createBlogApi: Creates a new blog with generated sample content and stores it in Firestore.
• getAllBlogsApi: Fetches all blogs from Firestore and sorts them by timestamp in descending order.
• getBlogByIdApi: Retrieves a single blog using ID from Firestore.
• makeBlogPublicApi: Publishes a blog by moving it to a public collection and associating it with user details.
• editPublicBlogApi: Updates the details of a public blog.
• removeBlogFromPublicApi: Removes a blog from the public collection and updates its private status.
• getPublicBlogByIdApi: Fetches a public blog by its ID.
• deleteBlogApi: Deletes a blog from Firestore.
• updateBlogDetailsApi: Updates the details of an existing blog with a batch update.
• uploadFileInFirestorageApi: Uploads a file (like an image) to Firebase storage and returns the file’s download URL.

User API Overview:

• getAllPublicBlogsApi: Fetches all public blogs stored in the PublicBlogs collection.
• storeUserInDatabaseApi: Stores user details in the Users collection in Firestore.

How to use boilerplate?

• Download 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

How do we deploy this repository?

• Create a new github repository
• Push your code with the above changes in the github repository
• Connect the github repository to vercel.com and import and deploy the above github repository
• Once done your project is deployed

How to write blogs?

• Logged in via the Google Authentication
• Go to /dashboard and in the sidebar you have "+" or "Create New Blog" button
• Creating a new blog will take you to the editor where you can add a title, description, banner image and the entire blog content
• Once done click the save button
• For publishing the blog to your profile section, click on the "settings" button in the top right corner
• Make the blog public and copy the link to share it with others

How do we manage blogs?

• Go to "/dashboard" you can view all drafts and published blogs
• Click on the small right-top menu icon of each blog card to Delete the blog
• On the sidebar, you can use the same Menu dropdown to rename and delete the corresponding blog

Contact

Feel free to contact me at shreyvijayvargiya26@gmail.com