A premium, modern web application designed to master the integration of React with Firebase (Auth & Firestore). This project focuses on high-end UI design, real-time data synchronization, and secure authentication workflows.

FirebaseFlow is a CRUD-based application that allows users to create, read, update, and delete posts while managing their identity through Firebase Authentication. The application features a stunning "Midnight Slate" theme with glassmorphism effects and a robust CSS design system.

• Real-time Firestore CRUD: Seamlessly manage posts with live updates using Firestore snapshots.
• Secure Authentication: Full login and signup workflow using Firebase Authentication.
• Global Session Management: React Context API used to track and provide user state across the entire app.
• Premium Design System: Custom-built CSS architecture featuring:
  • Dark mode by default (Midnight Slate palette).
  • Modern typography (Outfit & Inter).
  • Responsive glassmorphism cards and navigation.
  • Interactive auth modals with Google login support.

• Frontend: React + Vite
• Backend/Database: Firebase Firestore
• Authentication: Firebase Auth
• Styling: Vanilla CSS (Modern CSS Variables & Flex/Grid)
• State Management: React Context API

1. Architecture Setup: Initialized a Vite project with a modular folder structure for components, firebase configuration, and context.
2. Design System: Developed a comprehensive index.css with a central variable-based design system for consistent UI.
3. Firebase Integration:
   • Configured Firebase initialization in config.js.
   • Set up Firestore collections and Auth instances.
4. Component Development:
   • NavBar.jsx: Built a sticky navigation bar with integrated auth modals.
   • Posts.jsx: Developed a centered post editor and real-time activity feed.
5. Context Logic: Implemented UserContext.jsx to handle onAuthStateChanged and provide global access to the current user session.

• Node.js installed on your machine.
• A Firebase project created in the Firebase Console.

Clone the repository and install dependencies:

git clone <your-repo-url>
cd Firebase-Learning
npm install

Create a .env file in the root directory and add your Firebase credentials:

VITE_API_KEY=your_api_key
VITE_AUTH_DOMAIN=your_auth_domain
VITE_PROJECT_ID=your_project_id
VITE_STORAGE_BUCKET=your_storage_bucket
VITE_MESSAGE_SENDER_ID=your_sender_id
VITE_APP_ID=your_app_id

Start the development server:

npm run dev

This project is released under a Free License for Learning Purposes. You are free to use, modify, and distribute this code for educational and personal growth.

Stackwise Dev
Building modern, scalable, and beautiful web experiences.

Created as part of the Firebase Learning Journey.