Feature/environment variables setup

.env.example

@@ -0,0 +1,13 @@
+# Firebase Configuration
+VITE_FIREBASE_API_KEY=your_api_key_here
+VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
+VITE_FIREBASE_PROJECT_ID=your_project_id
+VITE_FIREBASE_STORAGE_BUCKET=your_project.firebasestorage.app
+VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
+VITE_FIREBASE_APP_ID=your_app_id
+VITE_FIREBASE_MEASUREMENT_ID=your_measurement_id
+
+# Add other API keys as needed
+# VITE_STRIPE_PUBLIC_KEY=pk_test_...
+# VITE_GOOGLE_MAPS_API_KEY=AIza...
+# VITE_API_BASE_URL=https://api.example.com

.github/workflows/firebase-hosting-merge.yml

@@ -11,7 +11,27 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - run: npm ci && npm run build
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build with environment variables
+        run: npm run build
+        env:
+          VITE_FIREBASE_API_KEY: ${{ secrets.VITE_FIREBASE_API_KEY }}
+          VITE_FIREBASE_AUTH_DOMAIN: ${{ secrets.VITE_FIREBASE_AUTH_DOMAIN }}
+          VITE_FIREBASE_PROJECT_ID: ${{ secrets.VITE_FIREBASE_PROJECT_ID }}
+          VITE_FIREBASE_STORAGE_BUCKET: ${{ secrets.VITE_FIREBASE_STORAGE_BUCKET }}
+          VITE_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.VITE_FIREBASE_MESSAGING_SENDER_ID }}
+          VITE_FIREBASE_APP_ID: ${{ secrets.VITE_FIREBASE_APP_ID }}
+          VITE_FIREBASE_MEASUREMENT_ID: ${{ secrets.VITE_FIREBASE_MEASUREMENT_ID }}
+
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/firebase-hosting-pull-request.yml

@@ -13,7 +13,27 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - run: npm ci && npm run build
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build with environment variables
+        run: npm run build
+        env:
+          VITE_FIREBASE_API_KEY: ${{ secrets.VITE_FIREBASE_API_KEY }}
+          VITE_FIREBASE_AUTH_DOMAIN: ${{ secrets.VITE_FIREBASE_AUTH_DOMAIN }}
+          VITE_FIREBASE_PROJECT_ID: ${{ secrets.VITE_FIREBASE_PROJECT_ID }}
+          VITE_FIREBASE_STORAGE_BUCKET: ${{ secrets.VITE_FIREBASE_STORAGE_BUCKET }}
+          VITE_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.VITE_FIREBASE_MESSAGING_SENDER_ID }}
+          VITE_FIREBASE_APP_ID: ${{ secrets.VITE_FIREBASE_APP_ID }}
+          VITE_FIREBASE_MEASUREMENT_ID: ${{ secrets.VITE_FIREBASE_MEASUREMENT_ID }}
+
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: ${{ secrets.GITHUB_TOKEN }}

ENVIRONMENT_SETUP.md

@@ -0,0 +1,107 @@
+# Environment Variables Setup
+
+This project uses environment variables to securely manage API keys and configuration values.
+
+## 🏠 Local Development
+
+### Manual Setup
+
+Create a `.env.local` file in the project root with your Firebase configuration:
+
+```bash
+# .env.local
+VITE_FIREBASE_API_KEY=your_api_key_here
+VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
+VITE_FIREBASE_PROJECT_ID=your_project_id
+VITE_FIREBASE_STORAGE_BUCKET=your_project.firebasestorage.app
+VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
+VITE_FIREBASE_APP_ID=your_app_id
+VITE_FIREBASE_MEASUREMENT_ID=your_measurement_id
+```
+
+### Steps:
+
+1. **Copy the template** from `.env.example` or use the values above
+2. **Create `.env.local`** in your project root
+3. **Paste the configuration** values
+4. **Start development**: `npm run dev`
+
+## 🚀 Production Deployment (GitHub Actions)
+
+For production deployment, add these secrets to your GitHub repository:
+
+### Step 1: Go to GitHub Secrets
+Navigate to: https://github.com/MarioLJFerreira/mini-dragme/settings/secrets/actions
+
+### Step 2: Add Repository Secrets
+
+Click "New repository secret" and add each of these:
+
+| Secret Name | Value |
+|-------------|-------|
+| `VITE_FIREBASE_API_KEY` | `your_api_key_here` |
+| `VITE_FIREBASE_AUTH_DOMAIN` | `your_project.firebaseapp.comm` |
+| `VITE_FIREBASE_PROJECT_ID` | `your_project_id` |
+| `VITE_FIREBASE_STORAGE_BUCKET` | `your_project.firebasestorage.app` |
+| `VITE_FIREBASE_MESSAGING_SENDER_ID` | `your_sender_id` |
+| `VITE_FIREBASE_APP_ID` | `your_app_id` |
+| `VITE_FIREBASE_MEASUREMENT_ID` | `your_measurement_id` |
+
+### Step 3: Verify Setup
+
+1. **Local testing**: Run `npm run dev` - should work with `.env.local`
+2. **Production testing**: Push to main branch - GitHub Actions will use the secrets
+
+## ➕ Adding New Environment Variables
+
+### For Local Development:
+Add to `.env.local`:
+```bash
+VITE_YOUR_NEW_API_KEY=your_development_key_here
+```
+
+### For Production:
+1. Add the secret to GitHub repository secrets
+2. Update both GitHub Actions workflows to include the new environment variable:
+```yaml
+env:
+  VITE_YOUR_NEW_API_KEY: ${{ secrets.VITE_YOUR_NEW_API_KEY }}
+```
+
+### In Your Code:
+```javascript
+// Use the environment variable in your React components
+const apiKey = import.meta.env.VITE_YOUR_NEW_API_KEY;
+```
+
+## 🔒 Security Notes
+
+- ✅ **Local development**: Uses `.env.local` (not committed to git)
+- ✅ **Production**: Uses GitHub repository secrets (encrypted)
+- ✅ **No hardcoded secrets** in your codebase
+- ✅ **Vite automatically** includes `VITE_` prefixed variables in the build
+
+## 🧪 Testing
+
+```bash
+# Test locally
+npm run dev
+
+# Test build process
+npm run build
+
+# Check if environment variables are loaded (in browser console)
+console.log(import.meta.env.VITE_FIREBASE_API_KEY);
+```
+
+## 💡 Why VITE_ Prefix?
+
+Vite only exposes environment variables that start with `VITE_` to your client-side code for security reasons. This prevents accidentally exposing sensitive server-side variables to the browser.
+
+## ✅ Benefits of This Approach
+
+- **Simple**: No complex setup or external dependencies
+- **Secure**: Secrets are encrypted in GitHub repository secrets
+- **Standard**: Industry-standard approach for environment variables
+- **Scalable**: Easy to add more secrets as needed
+- **Team-friendly**: Clear documentation for all developers

README.md

@@ -41,7 +41,13 @@ To get a local copy up and running, follow these simple steps.
     ```sh
     npm install
     ```
-4.  Run the development server:
+4.  Set up environment variables:
+    ```sh
+    # Copy the example file and add your Firebase configuration
+    cp .env.example .env.local
+    # Edit .env.local with your Firebase values (see ENVIRONMENT_SETUP.md)
+    ```
+5.  Run the development server:
     ```sh
     npm run dev
     ```
@@ -67,68 +73,75 @@ The project is structured to be modular and scalable, with clear separation of c
 ```
 mini-dragme/
 │
+├── .env.example            # Environment variables template for development setup.
+├── .env.local              # Local environment variables (not committed to git).
+├── .firebaserc             # Firebase project configuration.
+├── .gitignore              # Git ignore rules for the project.
+├── ENVIRONMENT_SETUP.md    # Guide for setting up environment variables.
+├── eslint.config.js        # ESLint configuration for code quality.
+├── firebase.json           # Firebase hosting and Firestore configuration.
+├── firestore.indexes.json  # Firestore database indexes configuration.
+├── firestore.rules         # Firestore security rules.
 ├── index.html              # Main HTML entry point for the Vite application.
 ├── package.json            # Project dependencies and scripts configuration.
 ├── package-lock.json       # Locked versions of dependencies for consistent installs.
-├── vite.config.js          # Vite build tool configuration.
-├── .gitignore              # Git ignore rules for the project.
-├── eslint.config.js        # ESLint configuration for code quality.
 ├── README.md               # Project documentation and setup instructions.
+├── vite.config.js          # Vite build tool configuration.
+│
+├── .github/                # GitHub configuration and workflows.
+│   └── workflows/          # GitHub Actions CI/CD workflows.
+│       ├── firebase-hosting-merge.yml      # Deploy to production on main branch.
+│       └── firebase-hosting-pull-request.yml # Deploy preview on pull requests.
+│
+├── public/                 # Static assets served directly by the web server.
+│   ├── 404.html           # Custom 404 error page.
+│   ├── index.html         # Firebase hosting welcome page.
+│   └── vite.svg           # Vite logo.
 │
 └── src/                    # Source code directory.
     │
     ├── assets/             # Static images, icons, and logos.
-    │   └── logo.svg        # App's logo.
+    │   ├── logo.svg        # App's logo.
+    │   └── react.svg       # React logo.
     │
     ├── components/         # Reusable UI components.
-    │   ├── ui/             # Small, foundational UI elements.
-    │   │   ├── Button.jsx  # All button types (primary, secondary, danger).
-    │   │   ├── Input.jsx   # Input fields for forms, search, etc.
-    │   │   ├── Modal.jsx   # Modal component for creating/editing tasks or projects.
-    │   │   ├── Tag.jsx     # Visual component for task tags/categories.
-    │   │   └── Avatar.jsx  # User profile image component.
-    │   │
+    │   ├── auth/           # Authentication-related components.
+    │   ├── board/          # Core components for the drag-and-drop board.
     │   ├── layout/         # Structural components for the application's layout.
-    │   │   ├── Header.jsx      # Top navigation bar.
-    │   │   ├── Sidebar.jsx     # Side navigation for project lists, filters, etc.
-    │   │   └── MainContent.jsx # The main container for the board area.
-    │   │
-    │   └── board/          # Core components for the drag-and-drop board.
-    │       ├── Board.jsx         # The main container for the entire board.
-    │       ├── BoardColumn.jsx     # Represents a single column/list in the board. This component will contain the Droppable logic.
-    │       ├── TaskCard.jsx        # A single task card component. This component will contain the Draggable logic.
-    │       ├── AddTaskCard.jsx     # A button/form for adding new tasks to a column.
-    │       └── ColumnHeader.jsx    # Component for the column title, settings, and menu.
+    │   └── ui/             # Small, foundational UI elements.
     │
-    ├── pages/              # Page-level components that compose the application's views.
-    │   ├── Dashboard.jsx   # The main landing page after login.
-    │   ├── Login.jsx       # The user login page.
-    │   ├── Register.jsx    # The user registration page.
-    │   └── ProjectView.jsx # The primary component for a single project board.
+    ├── context/            # React Context API for global state management.
+    │   ├── AuthContext.jsx     # Manages authentication state across the app.
+    │   ├── BoardContext.jsx    # Manages the state for the current board (tasks, columns, etc.).
+    │   └── ThemeContext.jsx    # Manages the light/dark mode theme.
+    │
+    ├── firebase/           # Firebase configuration and utilities.
+    │   ├── auth.js         # Firebase authentication utilities.
+    │   └── firebase.js     # Firebase app initialization and configuration.
     │
     ├── hooks/              # Custom React hooks for shared logic.
     │   ├── useAuth.js      # Handles user authentication state and logic.
     │   └── useDarkMode.js  # Manages dark mode state and local storage.
     │
-    ├── context/            # React Context API for global state management.
-    │   ├── AuthContext.jsx     # Manages authentication state across the app.
-    │   ├── ThemeContext.jsx    # Manages the light/dark mode theme.
-    │   └── BoardContext.jsx    # Manages the state for the current board (tasks, columns, etc.).
-    │
     ├── lib/                # Utility functions and helper modules.
     │   ├── api.js          # Functions for making API calls to the backend.
     │   └── dndHelpers.js   # Helper functions for the drag-and-drop logic (e.g., reordering arrays).
     │
+    ├── pages/              # Page-level components that compose the application's views.
+    │   ├── Dashboard.jsx   # The main landing page after login.
+    │   ├── Login.jsx       # The user login page.
+    │   ├── ProjectView.jsx # The primary component for a single project board.
+    │   └── Register.jsx    # The user registration page.
+    │
     ├── styles/             # Tailwind CSS Modules for component-specific styling.
     │   ├── buttons.module.css
     │   ├── cards.module.css
     │   ├── forms.module.css
     │   ├── layout.module.css
     │   └── tags.module.css
     │
-    ├── App.jsx             # The root component that renders the application's pages.
     ├── App.css             # Main application styles.
-    ├── index.jsx           # The entry point for the React application.
+    ├── App.jsx             # The root component that renders the application's pages.
     ├── index.css           # Global CSS styles and Tailwind imports.
     ├── main.jsx            # Main entry point that renders the React app.
     └── tailwind.config.js  # Configuration for Tailwind CSS.
@@ -141,6 +154,9 @@ mini-dragme/
   - **React DnD (@hello-pangea/dnd):** The core drag-and-drop logic will be implemented with this library. The `Draggable` and `Droppable` components will be primarily placed within `TaskCard.jsx` and `BoardColumn.jsx`, respectively.
   - **Drag Logic:** Reordering and moving functions will be housed in `lib/dndHelpers.js` for clean separation and reusability.
   - **Board State:** The state of the board (tasks, columns, etc.) will be managed within a combination of `BoardContext.jsx` and the `pages/ProjectView.jsx` component to ensure a single source of truth.
+  - **Firebase Integration:** Authentication and real-time data are handled through Firebase, with configuration managed via environment variables for security.
+  - **Environment Variables:** All sensitive configuration (API keys, Firebase config) is managed through environment variables with `VITE_` prefix for client-side access.
+  - **CI/CD Pipeline:** Automated deployment to Firebase Hosting via GitHub Actions on every push to main branch and preview deployments for pull requests.
 
 -----