How I developed Lynktrace step by step instructions

First created a folder and ran following comands

To creat a next js project

npx create-next-app@latest

Then install shadcn

npx shadcn@latest init

Select Ui designs by going to https://ui.shadcn.com/blocks and create your pages like

• Landing page
• Dashboard
• Login / Signup

To enhance your pages beauty you could check

https://tailark.com/hero-section

After creating your pages

Add mcp

• Supabase
• Github

Supabse Cli

1️⃣ Go inside your project folder

cd path/to/your/project

2️⃣ Login to Supabase

npx supabase login

👉 Browser will open → log in → it’ll save your token locally.

---

3️⃣ Initialize Supabase in your project

npx supabase init

👉 Creates /supabase folder and basic config.

---

4️⃣ Link to your online Supabase project

(Find Project Reference ID in Dashboard → Settings → General)

npx supabase link --project-ref your-project-ref-id

---

5️⃣ Check connection

npx supabase status

👉 Should show your linked project and DB connection.

---

✅ Done — now you can run commands like:

npx supabase db push       # Push your migrations
npx supabase start         # Start local dev environment
npx supabase functions serve  # Test edge functions locally

Github Cli

⚙️ 1. Install Git and GitHub CLI

For Windows (PowerShell)

winget install --id Git.Git -e --source winget
winget install --id GitHub.cli -e --source winget

Check installation:

git --version
gh --version

---

🔐 2. Login to GitHub

gh auth login

➡️ Steps:

• Choose: GitHub.com
• Choose: HTTPS
• Authenticate: Login with browser
• Copy the code, open GitHub, paste → authorize.

Check status:

gh auth status

---

📁 3. Initialize a Local Repo (if not already)

Go to your project folder:

cd "C:\Users\Desktop\lynktrace"

Initialize Git:

git init

Add all files:

git add .

Commit your first version:

git commit -m "Initial commit"

---

🌐 4. Connect to GitHub Repo

✅ If Repo Already Created on GitHub:

Example repo URL:

https://github.com/username/repo.git

Connect it:

git remote add origin https://github.com/username/repo.git

Verify:

git remote -v

---

🚀 5. Push Code to GitHub

Push your code (first push):

git branch -M main
git push -u origin main

---

🧱 6. Future Updates (Workflow)

When you make code changes:

git status              # see what changed
git add .               # stage all changes
git commit -m "Updated UI and fixed bugs"
git push                # push to GitHub

---

🗑️ Optional Commands

See commit history:

git log --oneline

Undo last commit (soft reset):

git reset --soft HEAD~1

Delete connection (if mislinked):

git remote remove origin

---

Step	Command	Purpose
1	git log --oneline	Find commit to go back to
2	git reset --hard <commit>	Revert to that exact snapshot
3	git clean -fd	Delete untracked (new) files
4	git status	Confirm clean state
5	git push origin main --force	Sync GitHub with restored version

🧠 Pro Workflow (Best Practice)

Step	Command	Description
1	git pull	Always pull before you push (if working with others)
2	git add -p	Stage changes interactively (to control commits)
3	git commit -m "clear, short message"	Always write descriptive commit messages
4	git push	Push to remote
5	git log --graph --oneline	See visual commit tree

---

Would you like me to make a bash script that automates all of these steps (setup + commit + push) so you can just run one command next time?

🧭 1️⃣ Basic check (most common)

git remote -v

Output example:

origin  https://github.com/draurangzebabbas/elite-next-clerk-convex.git (fetch)
origin  https://github.com/draurangzebabbas/elite-next-clerk-convex.git (push)

✅ This shows:

• the remote name (origin)
• the connected GitHub repo URL
• fetch/push permissions

---

🔍 2️⃣ Detailed remote info

git remote show origin

This gives more details, including:

• Fetch & push URLs
• Remote branches
• Local → Remote branch tracking status
• Push and pull configurations

Example:

* remote origin
  Fetch URL: https://github.com/draurangzebabbas/elite-next-clerk-convex.git
  Push  URL: https://github.com/draurangzebabbas/elite-next-clerk-convex.git
  HEAD branch: main
  Remote branch:
    main tracked

---

🧠 3️⃣ List only remote names

git remote

Example output:

origin
upstream

This means:

• origin → your main GitHub repo
• upstream → often the original template repo you forked or cloned from (if any)

---

🚀 Pro Tip:

If you ever want to change your linked GitHub repo:

git remote set-url origin https://github.com/username/new-repo.git

Or remove it entirely:

git remote remove origin