A modern blogging platform built with React, Vite, Firebase (Auth, Firestore, Storage), React Router, and Tailwind CSS + DaisyUI. Users can register/login, create posts with images, manage their profile, and browse content.
- Live Demo: https://shoolbaba.vercel.app
- GitHub Repo: https://github.com/engbasel/blog-app
- Authentication: Email/password auth via Firebase (
firebase/auth). - Profiles: View and edit profile with avatar upload to Firebase Storage.
- Posts: Create, view, and manage blog posts stored in Firestore.
- Routing: Client-side routing with
react-router-dom. - UI/UX: Tailwind CSS with DaisyUI components and responsive layout.
- Notifications:
react-toastifyfor friendly toasts. - Mock API (optional):
json-serverfor local data prototyping viadb.json.
d:/courses/React/Projects/blog-app/
├─ firebase/
│ └─ config.js # Firebase initialization
├─ public/
├─ src/
│ ├─ components/
│ │ └─ Navbar.jsx # Top navigation with auth-aware links
│ ├─ features/
│ │ ├─ about/ # About page
│ │ ├─ auth/ # Login/Register
│ │ ├─ posts/ # AddPost, post features
│ │ └─ Profile/ # ProfileView, MyPosts
│ ├─ App.jsx # Routes and layout
│ ├─ App.css
│ └─ ...
├─ db.json # Optional mock API data for json-server
├─ tailwind.config.js # Tailwind + DaisyUI config
├─ vite.config.js # Vite setup
└─ package.json
- Node.js 18+
- npm 9+ (or pnpm/yarn)
npm installThe project initializes Firebase in firebase/config.js.
For production or public repos, move secrets to environment variables and do not commit keys. With Vite, environment variables must be prefixed with VITE_ and loaded via import.meta.env.
Example .env (do not commit):
VITE_FIREBASE_API_KEY=...
VITE_FIREBASE_AUTH_DOMAIN=...
VITE_FIREBASE_PROJECT_ID=...
VITE_FIREBASE_STORAGE_BUCKET=...
VITE_FIREBASE_MESSAGING_SENDER_ID=...
VITE_FIREBASE_APP_ID=...
VITE_FIREBASE_MEASUREMENT_ID=...And then in firebase/config.js read from import.meta.env.
npm run devVite will print a local URL (typically http://localhost:5173).
If you want a quick REST endpoint for prototyping with db.json:
npx json-server --watch db.json --port 3001This exposes resources at http://localhost:3001. Adjust your fetch calls accordingly.
- dev: Start Vite dev server.
- build: Production build.
- preview: Preview the production build locally.
- lint: Run ESLint.
npm run dev
npm run build
npm run preview
npm run lintRoutes are defined in src/App.jsx using react-router-dom:
/→ Home/login,/register/about/add→ AddPost/profile→ ProfileView (auth-aware)/MyPosts→ MyPosts*→ PageNotFound
- Tailwind utility classes (see
tailwind.config.js). - DaisyUI components enabled via Tailwind plugin.
- Local component styles (e.g.,
Navbar.css, feature CSS files).
- Services initialized in
firebase/config.js:auth(Email/Password auth)db(Firestore)storage(image uploads)
- Ensure proper Firebase Security Rules for Firestore and Storage in production.
- Never commit real secrets in public repositories. Prefer
.envand CI secrets.
- ESLint: Configured via
eslint.config.js. - Notifications:
react-toastifyintegrated insrc/App.jsx(<ToastContainer />).
- Build with
npm run build(output indist/). - Deploy the static build to your host (Vercel, Netlify, Firebase Hosting, etc.).
- Set environment variables on the hosting platform for Firebase configuration.
Add screenshots to public/ and embed here:
- Instructor: Eng. Ahmed Zaghloul — LinkedIn
- Built by: Basel Embaby (Mansoura, Egypt)
- Website: https://shoolbaba.vercel.app
- GitHub: https://github.com/engbasel
- LinkedIn: (share your profile and we'll add it here)
This project is provided for educational purposes. Add a license (e.g., MIT) if you plan to distribute.
- Draft/Publish flow for posts
- Comments and likes
- Search and tags
- Dark mode polish with DaisyUI themes
- Migrate Firebase config to environment variables