https://github.com/mohammad-esmaeilpour/react-ts-firebase-blogging
A fully functional blog application built with React and Firebase, featuring user authentication, real-time database integration, and CRUD operations for blog posts.
https://github.com/mohammad-esmaeilpour/react-ts-firebase-blogging
firebase-auth firebase-database firebase-firestore react react-hook-form tailwind typescript
Last synced: 5 months ago
JSON representation
A fully functional blog application built with React and Firebase, featuring user authentication, real-time database integration, and CRUD operations for blog posts.
- Host: GitHub
- URL: https://github.com/mohammad-esmaeilpour/react-ts-firebase-blogging
- Owner: mohammad-esmaeilpour
- Created: 2024-12-07T09:07:58.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-12-08T21:34:31.000Z (6 months ago)
- Last Synced: 2024-12-08T22:27:27.318Z (6 months ago)
- Topics: firebase-auth, firebase-database, firebase-firestore, react, react-hook-form, tailwind, typescript
- Language: TypeScript
- Homepage:
- Size: 768 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React + TypeScript + Vite + Firebase
❗❗ Please attention
this template works with Firebase; you must set up your Firebase first.
I will show you how to configure this app with your Firebase config. (these steps are for those who know the Firebase and Firestore Database)
- step 1
create a collection named ###blogs###, and this collection must have these fields: 1_userId 2_content 3_title
- step 2
create a folder in the root of direction in src folder name **config** and create new file name firebaseConfig.ts
- step 3
your firebaseConfig.ts must be look like this:
```ts
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {
apiKey: "your API key",
authDomain: "your authDomain",
projectId: "your projectId",
storageBucket: "your storageBucket",
messagingSenderId: "your messagingSenderId",
appId: "your appId",
measurementId: "your measurementId",
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
```
- step 4
install node_modules with ```npm i``` and start your developement with ```npm run dev```
easy as heaven.