Nexflow

A fast, single-page task board with drag-and-drop status columns, priorities, labels, a progress timeline, and light/dark theming — synced to your account via Firebase, so it follows you across devices. No build step, no framework, one index.html.

This guide walks through everything end to end: creating the GitHub repo, pushing this code, setting up Firebase, and hosting it on Vercel for free.

---

What's in this repo

nexflow/
├── index.html          the entire app (markup, styles, logic)
├── firestore.rules      security rules to paste into Firebase
├── vercel.json          static hosting config for Vercel
├── LICENSE
├── .gitignore
└── README.md

---

Part 1 — Create the GitHub repository

Option A: on github.com (no terminal needed)

1. Go to https://github.com/new
2. Repository name: nexflow
3. Set visibility to Private or Public (your choice — there's no secret key committed to this repo, since Firebase web config is not a secret, but Private is a reasonable default for a personal tool).
4. Do not initialize with a README, .gitignore, or license — this project already includes those. Click Create repository.
5. GitHub will show you a page with setup instructions — keep it open, you'll need the repo URL in Part 2.

Option B: with the GitHub CLI

gh repo create nexflow --private --source=. --remote=origin

(Run this from inside the project folder once you've added the files — see Part 2 — and skip the git remote add step below since gh does it for you.)

---

Part 2 — Push this code to GitHub

Open a terminal in the folder containing index.html, firestore.rules, etc., and run:

git init
git add .
git commit -m "Initial commit: Nexflow"
git branch -M main
git remote add origin https://github.com/YOUR_USERNAME/nexflow.git
git push -u origin main

Replace YOUR_USERNAME with your GitHub username. If you used the GitHub CLI in Option B above, git push -u origin main is the only line you still need.

You should now see all the files live in your nexflow repo on GitHub.

---

Part 3 — Set up Firebase (free tier)

This gives Nexflow a real backend: accounts (email/password) and a database (Firestore) so tasks sync across every device you sign into.

1. Go to https://console.firebase.google.com → Add project.

2. Name it anything (e.g. nexflow). Google Analytics is optional — skip it unless you want it.

3. Once the project is created, on the project overview page click the web icon (</>) to register a new web app. Nickname it nexflow-web.

4. Firebase will show a firebaseConfig object like this — copy it, you'll need it in Part 4:

   const firebaseConfig = {
     apiKey: "AIza...",
     authDomain: "nexflow-xxxxx.firebaseapp.com",
     projectId: "nexflow-xxxxx",
     storageBucket: "nexflow-xxxxx.appspot.com",
     messagingSenderId: "1234567890",
     appId: "1:1234567890:web:abcdef123456"
   };

5. Turn on Authentication: Left sidebar → Build → Authentication → Get started → under Sign-in method, click Email/Password → enable it → Save.

6. Turn on Firestore: Left sidebar → Build → Firestore Database → Create database → choose production mode → pick a region close to you → Enable.

7. Apply the security rules: In Firestore, open the Rules tab, delete the default contents, and paste in everything from firestore.rules in this repo:

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
       match /users/{userId}/tasks/{taskId} {
         allow read, write: if request.auth != null && request.auth.uid == userId;
       }
     }
   }
   

   Click Publish. This ensures every account can only read or write its own tasks — nobody else's.

---

Part 4 — Connect the app to your Firebase project

1. Open index.html in your editor (either locally, or directly on GitHub by clicking the file and then the pencil/edit icon).

2. Find this block near the bottom of the file, inside <script type="module">:

   const firebaseConfig = {
     apiKey: "YOUR_API_KEY",
     authDomain: "YOUR_PROJECT.firebaseapp.com",
     projectId: "YOUR_PROJECT_ID",
     storageBucket: "YOUR_PROJECT.appspot.com",
     messagingSenderId: "YOUR_SENDER_ID",
     appId: "YOUR_APP_ID"
   };

3. Replace it with the real firebaseConfig object you copied in Part 3, step 4.

4. Commit and push the change:

   git add index.html
   git commit -m "Add Firebase config"
   git push

   (If you edited directly on GitHub, just commit from the web editor — no terminal needed.)

---

Part 5 — Deploy to Vercel

1. Go to https://vercel.com and sign up/log in — the easiest path is Continue with GitHub, which also makes importing the repo one click.
2. Click Add New… → Project.
3. Under Import Git Repository, find and select nexflow. If you don't see it, click Adjust GitHub App Permissions and grant Vercel access to the repo.
4. On the configuration screen:
   • Framework Preset: choose Other (this is a plain static site, no build step).
   • Build Command: leave blank.
   • Output Directory: leave as ./ (project root).
5. Click Deploy. Vercel will finish in a few seconds and give you a live URL like https://nexflow.vercel.app or https://nexflow-yourname.vercel.app.

---

Part 6 — Authorize your live domain in Firebase

Firebase blocks sign-ins from domains it doesn't recognize, so this step is required or login will fail on the deployed site.

1. In the Firebase console: Authentication → Settings → Authorized domains.
2. Click Add domain and enter your Vercel domain, e.g. nexflow.vercel.app (no https://, no trailing slash).
3. Save.

---

Part 7 — Use it

1. Visit your Vercel URL.
2. Click Create an account, enter an email and password (6+ characters).
3. Start adding tasks. Sign in with the same account from your phone, another browser, or another computer — everything syncs live through Firestore.

---

Updating the app later

Any time you want to change something:

# edit index.html locally
git add .
git commit -m "Describe your change"
git push

Vercel automatically redeploys on every push to main — no extra steps.

---

Custom domain (optional)

If you own a domain and want e.g. nexflow.yourdomain.com:

1. Vercel dashboard → your project → Settings → Domains → add your domain and follow the DNS instructions Vercel gives you.
2. Once it's live, go back to Firebase → Authentication → Settings → Authorized domains and add that custom domain too, or sign-in will fail there just like with the .vercel.app domain.

---

Notes & troubleshooting

• Blank board / "Firebase isn't configured" notice: you haven't replaced the placeholder values in firebaseConfig yet (Part 4).
• "This domain is not authorized" error on sign-in: you skipped Part 6 — add your Vercel URL to Firebase's authorized domains list.
• Data doesn't sync between devices: double check you're signed into the same account (same email) on both, and that Firestore rules were published correctly (Part 3, step 7).
• Deleting an account: removing a user from Firebase Authentication does not delete their Firestore data automatically. That's fine for personal use, but if it matters to you, it can be handled with a small Cloud Function later.
• Cost: Firebase's free "Spark" plan covers this kind of personal, low-traffic use comfortably. Vercel's free "Hobby" plan does too.