One Mission 거래 생태계: AI 시장 정보·금 분석·자동 거래 도구·실시간 교육·구조 기반 커뮤니티
원문 보기
The One Mission trading ecosystem — AI market intelligence, Gold analysis, automated trading tools, live trading education and a community built around structure.
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.
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.
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.
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
Set sourceTimeZone to your team’s base IANA timezone (e.g. "America/New_York").
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:
Put your file at public/images/logo.png.
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
Add New → Project, then Import your weare1mission repo.
Vercel auto-detects Next.js. Leave the defaults:
Framework Preset: Next.js
Build Command: next build (default)
Output: (managed by Vercel)
Click Deploy. You’ll get a live *.vercel.app URL in ~1 minute.
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.
DNS can take from a few minutes up to 48 hours to propagate. Vercel issues the HTTPS certificate
automatically once it detects the records. Follow the values Vercel shows you — they take
precedence over the examples above if different.
Adding Supabase later
Onboarding/training progress still uses the browser (src/lib/useProgress.ts). The member area
is already built on Supabase — see the next section to turn it on.
Member area & backend (Supabase)
The site has a full, gated member portal at /portal with magic-link sign-in and content that
unlocks by membership tier:
/login — passwordless magic-link sign-in (enter email → click the link we email you).
Access model: anyone can sign up; what they see is gated by tier (starter → core →
elite) and role (member / admin). Admins see everything. Tiers/roles are defined in
src/lib/access.ts and enforced both in the app and by Postgres row-level security.
The public site works without any of this. Until you add the two env vars, the member pages
show a friendly “almost ready” notice and the build still passes.
SQL Editor → New query → paste all of supabase/schema.sql → Run. This creates the
profiles, team_updates, live_sessions, and trading_content tables, the auto-profile
trigger, RLS policies, and seed placeholder content.
Project Settings → API → copy the Project URL and the anon public key.
Add them as environment variables (locally in .env.local, and in Vercel → Settings → Env Vars):
Authentication → URL Configuration: set Site URL to your domain
(e.g. https://weare1mission.com) and add https://weare1mission.com/auth/callback (and your
Vercel preview URL) to Redirect URLs. Email magic links are enabled by default.
Redeploy. The member area goes live automatically.
Managing members & content
Change someone’s tier/role: Supabase → Table editor → profiles → edit their tier
(starter/core/elite) or role (member/admin).
Post content: add rows in team_updates, live_sessions, or trading_content.
Set each item’s required_tier to control who sees it; set published to show/hide.
Make yourself admin: sign in once (creates your profile), then set your role to admin.
Where to extend later
Content is currently managed from the Supabase dashboard. To build an in-app admin editor,
add admin-only insert/update RLS policies and a protected /portal/admin page.
The auth guard lives in src/middleware.ts + src/lib/supabase/middleware.ts.
Before-launch checklist
Replace all placeholder testimonials (data/testimonials.ts) with real, approved quotes.
Replace leadership names, photos, and bios (data/leadership.ts) — no invented ranks.
Fill in real contact details (data/contactInformation.ts).
Set real social + Telegram links (data/socialLinks.ts).
Update the schedule to real times and links; set sourceTimeZone.
Add real events, images, and registration links.
Add real resource files/links; replace "#" placeholders.
Add the real logo and OG share image; replace the favicon.
⚠️ Have a qualified attorney review src/app/legal/page.tsx. The legal text is a
placeholder template, not legal advice.
Confirm no income guarantees, fake stats, or guaranteed results anywhere.
Member area: create the Supabase project, run supabase/schema.sql, set the two env
vars, and configure Auth redirect URLs (see “Member area & backend”).
Replace the seed placeholder member content (team_updates, live_sessions,
trading_content) with real content.
Make your own account an admin and set members’ tiers.
Built for the 1 Mission community. Educational purposes only — trading involves risk, results
vary, and nothing here is individualized financial advice.
