𝐁𝐥𝐨𝐠𝐬𝐭𝐞𝐫 𝐇𝐮𝐛: 𝐁𝐥𝐨𝐠𝐠𝐢𝐧𝐠 𝐖𝐞𝐛𝐀𝐩𝐩 𝐑𝐞𝐚𝐜𝐭 🚀

⭐ Introduction

Blogster Hub is a Blogging Web App which is built on ReactJS, TailwindCSS & Firebase. This app uses the React Router 6 Navigation & Routing & React Hooks, Custom Hooks. This app uses the Firestore DB along with the Firebase Hosting.

• Users can create new posts & that post consists of a thumbnail image, title, author's name, content, createdAt timestamp.
• Users can view the list of posts posted by various people on the platform, on their homepage in form of cards.
• Users can navigate to the main blog article page, where they can read the article.
• Error 404 page has also been handled in case the User gets lost.
  
  
  

🔥 Getting Started With The Project

• Fork the Project.

Click the gray Fork button in the top right of this page. This creates your copy of the project and saves it as a new repository in your github account.

• Clone the Forked Repository in your Local System.

Click on the green Code button, then either the HTTPS or SSH option and, click the icon to copy the URL.

• Run the following commands in your code editor's terminal:
  

  git clone <Paste the copied link>

Switch to the cloned folder.

  cd <Repository Name>

Make a new branch.

  git checkout -b <your-username>

• Download, Install & Configure NodeJS in your system.

Make sure that NPM is also installed.
See the section about NodeJS for more information.

• Install Dependencies

npm install

• Configure the ENV VARIABLES for the Firestore Configuration by creating a .env file at the root & put your firestore variables in it. Variable should start with VITE_. Example: VITE_apikey=firebasekey

After this, when you run the app, you will be connected to your firestore.
For reference, this is the documentation: https://firebase.google.com/docs/firestore?authuser=0&hl=en

• To run the project in Development mode, run this command in your code editor's terminal to Fire Up the Local Server:

npm run dev

This runs the app in the development mode locally. Now open http://localhost:8000 in your browser to view the Live Website.

• To run the project in Production mode, first build the project to make it production ready:

npm run build

npm run build:tailwind:prod

Now, run this command in your code editor's terminal to Fire Up the Local Server:

npm run preview

This runs the app in the production mode locally. Now open http://localhost:4173 in your browser to view the Live Website.

🔨 Tools Used

• Library:
  • react-toastify
  • styled-components
  • react-spinners
  • react-router-dom
  • react-icons
  • react
  • react-dom
  • firebase
  • @emotion/react
  • @emotion/styled
  • @mui/icons-material
  • @mui/material
  • @mui/styled-engine-sc
  • @types/node
  • firebase-tools
• Plugins:
  • @tailwindcss/forms
  • autoprefixer
  • postcss
  • tailwindcss
• Version Control System: Git
• Version Control System Hosting: GitHub
• Programming / Scripting: JavaScript & JSX
• Front-End: ReactJS
• Styling: CSS Module, Styled Components, Material UI, Emotion, TailwindCSS
• Runtime Environment: NodeJS
• Integrated Development Environment: VSCode
• Hosting: Firebase Hosting
• Tech Stack: React, Styled Components, Material UI, React Toastify, TailwindCSS, React Router V6, Firebase
  
  

🔗 Links

Checkout the Live Website: Blogging WebApp React

Checkout the Demo Video: YouTube

💻 Screens

❤️ Follow Me:

Twitter

LinkedIn

YouTube

I hope you like the project. Thanks for reading! 😀