Ultimate Blogging Full-Stack Repository - Personal Blog

The Complete Full Stack Repository for Your Blogging Website. Get your blogging website ready instantly in seconds.

Demo of the website

What is this repository?

This is a blog starter kit or blog start full-stack repository that helps developers to create and manage their content website including backend and front.

This repository contains the application at the front end of the website and the admin at the backend of the website.

What are Application and Admin in the repository?

Application is the look of the website and Admin is where the developer will manage the website's content.

The admin part includes the following-

• Blogs page to Edit/Delete and list all the articles from the database(Firebase)
• Write a page that contains an Editor to write blogs and save them in the database

How to use the repository?

• Clone the repository
• Add the Firebase database configurations in the next.config.js file
• Run yarn and yarn run dev command
• Open localhost:3001/admin/write to write the blog
• Post the blog by adding a banner image
• Deploy the website

Your content website is ready.

How to change the UI of the website

Currently, the components folder in the root directory contains the home page and blog route.

If you want to change the UI of the home and blog pages, simply go to their respective index.jsx page and edit it accordingly.

Architecture

• components contain the route pages
• pages contain the routes
• public contains the static files
• utils contain the config files for the database, themes and APIs
• modules contain the reuse codebases like Navbar, Body and Subscribe

Tech stack

• Next JS
• React JS
• Tailwind CSS
• Firebase (Database)
• React Icons (for icons)
• React Query (data caching and fetching)
• Editor JS (for blog editor)

How backend is connected to the front?

Firebase is the database and utils/firebase.js contains the connectivity whereas utils/api contains the APIs to perform CRUD operations.

Can I change the database from Firebase?

Yes, you can but you need to change the API methods because currently the APIs are written according to Firebase.

Go to the utils/apis folder and you will find blogApi and subscribeApi, simply change them according to your database.

If you want the repository with your favourite database please let me know in the comment section.

Can I change the UI library?

Yes, you can the repository is yours once you get the repository edited and extended to whatever extent you can.

You can add Material UI or Chakra UI or whatever you want and replace all the UI components such as Navbar, Button, and Inputs correspondingly.

If you again want the same repository for Material UI or Chakra UI just add in the comment and I’ll make the one.

How does the Admin work?

Admin is another web page, understand it like a CMS that will help the developer to view/write/delete articles using the editor.

How to manage subscriptions on the repository?

In the Firebase database, EmailSubscribers is the collection name, you can create the same collection in MongoDB or SQL containing all the email subscribers.

The subscribeApi contains the logic of how the user emails are added to the database.

What is the layout of the repository?

• We have a Body wrapping the root of the repository
• The Body contains a Navbar stuck to the top
• The body contains a Footer that is at the bottom
• Lastly, the body contains the children or content
• The Footer has a subscribe component
• The Navbar contains a dark and white theme toggle with a subscribe button