TechBit is an interactive, user-friendly tech-blog application that empowers developers and tech enthusiasts to create, share, and manage their own blogs with ease. Itโs not just a blogging tool โ itโs a stage to showcase your technical voice and project documentation.
Built with โค๏ธ using Firebase for backend services and Cloudinary for seamless image handling, TechBit makes sure your ideas take center stage while ensuring privacy, performance, and style.
- ๐ Authentication: Sign in securely with Firebase Authentication to create and manage your posts.
- ๐ Post Creation: Write and publish blog posts with rich text using React Quill editor.
- ๐ผ๏ธ Image Uploads: Upload and embed images using Cloudinary for smooth, fast storage.
- ๐๏ธ Post Deletion: Users can only delete the posts they have created, ensuring content privacy and control.
- Frontend: React, CSS
- Rich Text Editor: React Quill
- Backend: Firebase (Authentication, Firestore Database)
- Image Handling: Cloudinary
- State Management: React
useState&useEffecthooks
-
Create a Firebase Project:
- Go to Firebase Console and create a new project.
-
Set Up Firebase Authentication:
- In the Firebase Console, navigate to the Authentication section.
- Enable your preferred sign-in methods (e.g., Google Sign-In).
-
Set Up Firestore Database:
- Go to the Firestore Database section.
- Create your database and apply the necessary security rules.
-
Create Firebase Config File:
- Go to project settings in Firebase Console to find your config object.
- Create a
firebase-config.jsfile in your project and paste the config object.
import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; import { getFirestore } from "firebase/firestore"; const firebaseConfig = { apiKey: "YOUR_API_KEY", authDomain: "YOUR_AUTH_DOMAIN", projectId: "YOUR_PROJECT_ID", storageBucket: "YOUR_STORAGE_BUCKET", messagingSenderId: "YOUR_MESSAGING_SENDER_ID", appId: "YOUR_APP_ID", }; const app = initializeApp(firebaseConfig); const auth = getAuth(app); const db = getFirestore(app); export { auth, db };