1 Mission — Community Hub

One Mission. One Community. One Movement.

A premium team onboarding, education, events, resources, and community website for the 1 Mission community (weare1mission.com). Built as a real platform — not a landing page — where members can learn about 1 Mission, complete onboarding, access affiliate training, view the weekly schedule, join community calls, find resources, meet leadership, and track their progress.

---

Table of contents

1. Project overview
2. Technology used
3. Install & run locally
4. Project structure
5. How to edit content (the important part)
   • Navigation
   • Onboarding steps
   • Training modules
   • Weekly schedule
   • Events
   • Leaders
   • Resources / testimonials / contacts
   • Images
   • Video embeds
   • Colors / brand
   • Logo
   • Social links
6. Deploy to GitHub
7. Deploy on Vercel
8. Connect weare1mission.com from GoDaddy
9. Adding Supabase later
10. Before-launch checklist

---

Project overview

Version 1 is a fully static, fast, mobile-first site. Member onboarding and training progress are tracked locally in the browser (localStorage) — no login or database required to launch. The code is organized so a database (Supabase) can be added later without a rewrite.

Pages: Home, Start Here (onboarding), Affiliate Training, Weekly Schedule, Events, Resources, Leadership, Shop (coming soon), Contact, Legal & Disclosures, plus a custom 404.

---

Technology used

• Next.js 14 (App Router) + React 18
• TypeScript (strict)
• Tailwind CSS (warm/editorial brand system in tailwind.config.ts)
• lucide-react icons
• Supabase (@supabase/ssr) — auth (magic link) + Postgres + row-level security for the member area
• localStorage for onboarding/training progress tracking
• Vercel- and GitHub-ready

---

Install & run locally

Prerequisites: Node.js 18.18+ (Node 20+ recommended) and npm.

# 1. Install dependencies
npm install

# 2. Start the dev server
npm run dev
# open http://localhost:3000

# 3. Create a production build (optional — Vercel does this for you)
npm run build
npm run start

Note on fonts: the site loads the Inter font via a stylesheet <link> in src/app/layout.tsx so it builds even on machines without internet. If you build offline you may see a harmless “Failed to download the stylesheet … Skipped optimizing this font” warning — the font still loads normally in the browser and on Vercel.

---

Project structure

weare1mission/
├─ public/
│  ├─ images/              ← put real photos/logos here (see images/README.md)
│  └─ favicon.ico          ← replace the placeholder favicon
├─ src/
│  ├─ app/                 ← one folder per page (App Router)
│  │  ├─ layout.tsx        ← global shell, <head>, fonts, header/footer
│  │  ├─ page.tsx          ← Home
│  │  ├─ start-here/       ← onboarding (client progress logic)
│  │  ├─ training/         ← affiliate training (client progress logic)
│  │  ├─ schedule/ events/ resources/ leadership/ shop/ contact/ legal/
│  │  ├─ sitemap.ts robots.ts not-found.tsx
│  ├─ components/          ← reusable UI (Header, Footer, cards, forms, states…)
│  │  └─ home/             ← homepage sections
│  ├─ data/                ← ★ EDIT YOUR CONTENT HERE ★
│  └─ lib/                 ← helpers (progress hook, timezone, metadata)
├─ tailwind.config.ts      ← brand colors & design tokens
└─ README.md

You will spend almost all your time in src/data/. Those files are plain, heavily-commented TypeScript — change the values and the site updates. You do not need to touch the components.

---

How to edit content

All frequently-updated content lives in src/data/. Each file has comments explaining what to change. After editing, save — the dev server hot-reloads instantly.

Navigation — src/data/navigation.ts

Edit the mainNav array to add/remove/rename top-menu links, primaryCta for the “Join 1 Mission” button, and footerNav for the grouped footer links.

Onboarding steps — src/data/onboarding.ts

Edit onboardingSteps. Each step has a phase, title, description, and optional videoUrl, imageUrl, externalLink, and checklist. Add or reorder steps freely. Keep each step’s id stable once members start — changing an id resets that step’s saved progress. Phase names live in onboardingPhases.

Training modules — src/data/training.ts

Edit trainingModules. Each module has a category, title, description, estimatedTime, optional videoUrl, a written lesson (separate paragraphs with a blank line), actionSteps, and optional resources. Categories are in trainingCategories. Keep ids stable once live.

Weekly schedule — src/data/schedule.ts

1. Set sourceTimeZone to your team’s base IANA timezone (e.g. "America/New_York").
2. Edit scheduleEvents. Store each time in 24-hour "HH:MM" in that source timezone — the site automatically converts it to each visitor’s local time. Set accessLevel (Public/Members Only), category, and any zoomLink/telegramLink/ registrationLink. Set isPlaceholder: false to remove the “editable placeholder” tag.

Events — src/data/events.ts

Edit events. Use an ISO startDate (e.g. "2026-10-17T09:00") so the countdown works, plus a friendly displayDate. Set type (Online / Local / Leadership Retreat / Convention) and status (Registration Open / Coming Soon / Sold Out / Completed). featured: true shows it at the top. Past-event photos go in pastEventGallery.

Leaders — src/data/leadership.ts

Edit leaders. Fill in real name, position, location, bio, expertise, social links, and an optional videoUrl. Do not invent ranks or accomplishments. Add a photo path (see images) and set featured: true to highlight. Leadership values are in leadershipValues.

Resources, testimonials, contacts

• src/data/resources.ts — the searchable library. Each item has a category, type, and a download and/or externalLink. Flags: featured, membersOnly, recentlyAdded.
• src/data/testimonials.ts — ⚠️ all placeholders. Replace with real, permission-granted quotes before launch. No income claims.
• src/data/contactInformation.ts — mentor/support/events/tech contact cards. Replace the placeholder emails, phones, and Telegram handles.
• src/data/siteSettings.ts — brand name, tagline, domain/URL, mission blurb, OG image, support email, and the logo.

Replace images

Until you add real files, every image shows a branded placeholder box automatically. To add real images, drop files in public/images/ and reference them from the relevant data file (e.g. image: "/images/leaders/leader-1.jpg"). See public/images/README.md for the suggested file list (logo, OG image, leaders, events, onboarding).

Add video embeds

Anywhere a data file has a videoUrl, paste an embed URL (not the watch URL). Example for YouTube: https://www.youtube.com/embed/VIDEO_ID. Leaving it empty shows a “video placeholder”.

Change colors / brand

All brand colors are defined once in tailwind.config.ts under theme.extend.colors (navy, primary, medium, light, ice, offwhite, charcoal) and the gradients under backgroundImage. Change them there and the whole site updates.

Update the logo

The header/footer show a text logo (1 MISSION) by default. To use a real transparent PNG:

1. Put your file at public/images/logo.png.
2. In src/data/siteSettings.ts, set logoImage: "/images/logo.png". The Logo component switches to the image automatically.

Update social links

Edit src/data/socialLinks.ts — replace the "#" placeholders with your real Instagram, Facebook, Telegram, YouTube, and TikTok URLs, and set announcementChannel.href to your Telegram announcement channel. Any link left as "" is hidden.

---

Deploy to GitHub

# from the project folder
git init
git add .
git commit -m "Initial commit: 1 Mission website"
git branch -M main

# create an empty repo on github.com first (no README), then:
git remote add origin https://github.com/YOUR_USERNAME/weare1mission.git
git push -u origin main

node_modules and .next are already git-ignored.

---

Deploy on Vercel

1. Go to vercel.com and sign in with GitHub.
2. Add New → Project, then Import your weare1mission repo.
3. Vercel auto-detects Next.js. Leave the defaults:
   • Framework Preset: Next.js
   • Build Command: next build (default)
   • Output: (managed by Vercel)
4. Click Deploy. You’ll get a live *.vercel.app URL in ~1 minute.
5. Every future git push to main auto-deploys.

Environment variables: the public site needs none. To enable the member area, add NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY in Vercel → Settings → Environment Variables, then redeploy (see “Member area & backend”).

---

Connect weare1mission.com from GoDaddy

In Vercel → your project → Settings → Domains, add weare1mission.com (and www.weare1mission.com). Vercel will show the exact records to add. Then in GoDaddy → your domain → DNS:

Option A — point DNS at Vercel (keep domain at GoDaddy):

• A record — Host @ → Value 76.76.21.21
• CNAME — Host www → Value cname.vercel-dns.com
• Remove any conflicting parking/forwarding records for @ and www.

Option B — use Vercel nameservers (Vercel manages DNS):

• In GoDaddy → Nameservers → Change → Enter the two ns#.vercel-dns.com servers Vercel gives you.

This is the beginning of the README. Read the rest at the original. Read the full README ↗