Built by Shaikh224 • codebit8.netlify.app
A modern, full-featured blog platform built with React 18 and Firebase. Features a rich text editor with syntax highlighting, smooth animations, image lazy-loading, and SEO-friendly metadata — all served through a Vite-powered build pipeline.
Your source for coding tips, technology news, and AI tutorials.
- Rich Text Editor — React Quill with full formatting support and Monaco Editor for embedded code blocks
- Firebase Backend — Firestore for posts/data, Firebase Auth for user management, Firebase Storage for media
- Animated UI — Page transitions and micro-interactions powered by Framer Motion
- SEO Ready — Per-page
<title>and<meta>tags managed with React Helmet - Performance Optimised — Lazy image loading via
react-lazy-load-image-component,terserminification, and an image compression plugin at build time - Accessible Navigation — Headless UI components with full keyboard support
- Carousel / Sliders — React Slick for featured post showcases
- Sanitised Output —
sanitize-htmlprevents XSS in rendered post content
| Layer | Technology |
|---|---|
| Framework | React 18 + Vite 5 |
| Styling | Tailwind CSS 3 + PostCSS |
| Backend / Auth | Firebase 10 (Firestore, Auth, Storage) |
| Rich Text | React Quill 2 |
| Code Editor | Monaco Editor |
| Animation | Framer Motion 11 |
| Routing | React Router DOM 6 |
| SEO | React Helmet |
| Icons | Heroicons 2 |
| UI Primitives | Headless UI 2 |
| Linting | ESLint 8 |
- Node.js 18+
- A Firebase project with Firestore, Authentication, and Storage enabled
git clone https://github.com/Shaikh224/Codebit8-Blog-Website.git
cd Codebit8-Blog-Websitenpm installCopy the example file and fill in your Firebase credentials:
cp .env.example .envOpen .env and replace the placeholder values:
VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_idWhere to find these: Firebase Console → Project Settings → Your apps → SDK setup & configuration
npm run devThe app will be available at http://localhost:5173.
| Command | Description |
|---|---|
npm run dev |
Start local dev server with HMR |
npm run build |
Production build (minified + image-optimised) |
npm run preview |
Preview the production build locally |
npm run lint |
Run ESLint across all JS/JSX files |
Codebit8-Blog-Website/
├── public/ # Static assets
├── src/
│ ├── components/ # Reusable UI components
│ ├── pages/ # Route-level page components
│ ├── firebase/ # Firebase config & helpers
│ ├── hooks/ # Custom React hooks
│ └── main.jsx # App entry point
├── .env.example # Environment variable template
├── index.html # Vite HTML entry
├── tailwind.config.js # Tailwind configuration
├── vite.config.js # Vite configuration
└── package.json
npm i -g vercel
vercelSet your Firebase environment variables in Vercel → Project → Settings → Environment Variables.
npm run build
firebase deploy --only hostingCurrently deployed at codebit8.netlify.app — drag-and-drop the dist/ folder after running npm run build, or connect your GitHub repo for automatic deploys.
- Create a Firebase project at console.firebase.google.com
- Enable Email/Password authentication (Authentication → Sign-in method)
- Create a Firestore database (start in test mode, then harden rules)
- Enable Firebase Storage for media uploads
- Copy SDK config into
.env
- Fork the repo
- Create a feature branch:
git checkout -b feat/your-feature - Commit your changes:
git commit -m "feat: add your feature" - Push and open a Pull Request
This project is open source. Feel free to use, modify, and build on it.