Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ayush-kanduri/blog-webapp-react
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.
https://github.com/ayush-kanduri/blog-webapp-react
css-modules firebase firebase-hosting firestore firestore-react material-ui react react-hooks react-router react-router-dom reactjs styled-components tailwind tailwind-css tailwindcss
Last synced: 27 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/ayush-kanduri/blog-webapp-react
- Owner: Ayush-Kanduri
- Created: 2023-08-05T17:39:45.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-08-05T20:24:16.000Z (over 1 year ago)
- Last Synced: 2023-08-05T21:24:49.053Z (over 1 year ago)
- Topics: css-modules, firebase, firebase-hosting, firestore, firestore-react, material-ui, react, react-hooks, react-router, react-router-dom, reactjs, styled-components, tailwind, tailwind-css, tailwindcss
- Language: JavaScript
- Homepage: https://blog-webapp-react.web.app
- Size: 147 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 𝐁𝐥𝐨𝐠𝐬𝐭𝐞𝐫 𝐇𝐮𝐛: 𝐁𝐥𝐨𝐠𝐠𝐢𝐧𝐠 𝐖𝐞𝐛𝐀𝐩𝐩 𝐑𝐞𝐚𝐜𝐭 🚀
## ⭐ 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:
```bash
git clone
```
Switch to the cloned folder.
```bash
cd
```
Make a new branch.
```bash
git checkout -b
```
- Download, Install & Configure `NodeJS` in your system.
Make sure that `NPM` is also installed.
See the section about [NodeJS](https://nodejs.org/en/#download) for more information.
- Install Dependencies
```bash
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:
```bash
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:
```bash
npm run build
```
```bash
npm run build:tailwind:prod
```
Now, run this command in your code editor's terminal to Fire Up the Local Server:
```bash
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](https://blog-webapp-react.web.app)
### **_Checkout the Demo Video:_** [YouTube](https://youtu.be/1ue-z3b4Ywc)
## 💻 Screens
## :heart: Follow Me:
> [Twitter](https://twitter.com/ayush_codes)
> [LinkedIn](https://www.linkedin.com/in/ayushkanduri)
> [YouTube](https://www.youtube.com/@AyushKanduri)
#### I hope you like the project. Thanks for reading! 😀