Card Legacy Website

A premium custom sports trading card / collectible card platform with a cinematic React landing experience, a 3D collectible card presentation, Products, Customize, and Contacts pages.

Tech Stack

• Vite
• React
• React Router
• Three.js
• React Three Fiber
• Drei
• GSAP ScrollTrigger
• Lucide React
• npm

Requirements

• Node.js 20 LTS or newer recommended
• npm, included with Node.js
• No database is required for the current frontend-only version

Project Structure

src/                    React source code
src/components/         Shared UI and 3D components
src/context/            React context providers
src/data/               Local product data
src/pages/              Routed pages
public/assets/          Static card textures and public assets
.github/                Pull Request template, issue templates, CI workflow
dist/                   Generated production build output, not committed
node_modules/           Installed dependencies, not committed

Local Setup

git clone https://github.com/<your-org-or-user>/card-legacy-website.git
cd card-legacy-website
npm install
cp .env.example .env
npm run dev

Open:

http://127.0.0.1:5173/

On Windows PowerShell, copying the environment example can be done with:

Copy-Item .env.example .env

Common Commands

npm install
npm run dev
npm run build
npm run preview

Available scripts:

• npm run dev - starts the Vite dev server on 127.0.0.1
• npm run build - creates the production build in dist/
• npm run preview - previews the production build locally

This project does not currently define lint, typecheck, or test scripts. Add those scripts before requiring them in CI or Pull Request checks.

Environment Variables

Copy .env.example to .env for local development.

Rules:

• Never commit .env or any real secret files.
• Only commit .env.example.
• Keep placeholder values empty unless they are safe local defaults.
• Do not place production Stripe, database, admin, or session secrets in the repository.

Current frontend code does not require production secrets. Database, Stripe, admin, and guest session variables are placeholders for future backend, payment, admin, and order work.

Developer Collaboration Workflow

Branch roles:

• main = stable production-ready version
• dev = integration/testing branch
• feature/* = individual developer work
• fix/* = focused bug fixes
• chore/* = setup, tooling, documentation, and maintenance

Recommended flow:

1. Pull latest main:

git checkout main
git pull origin main

2. Create a feature branch:

git checkout -b feature/task-name

3. Work locally.

4. Commit:

git add .
git commit -m "clear message"

5. Push:

git push origin feature/task-name

6. Open a Pull Request on GitHub.

7. Review and merge into dev first.

8. After testing dev, merge into main.

Do not commit directly to main for feature work.

Updating Local Code

git checkout main
git pull origin main

Syncing a Feature Branch

git checkout feature/example-task
git pull origin main

If the team is using dev as the integration base:

git checkout feature/example-task
git pull origin dev

Resolve conflicts locally, run the available checks, and push the updated branch.

Recommended Branch Names

• feature/backend-core
• feature/admin-dashboard
• feature/payment-stripe
• feature/order-system
• feature/shipping-system
• feature/frontend-polish
• fix/navbar-badge
• fix/scroll-animation
• chore/github-setup

Codex Workflow

When using Codex:

• Create a new branch for each task.
• Do not commit directly to main.
• Keep changes focused.
• Do not make unrelated changes.
• Summarize changed files.
• Run npm run build before finishing.
• Run lint/typecheck/test when those scripts are added.
• Open a Pull Request when finished.

Recommended Codex instruction:

Please create a new feature branch for this task. Do not commit directly to main. Keep changes focused. After finishing, run build/lint/typecheck if available and open a Pull Request with a summary.

GitHub Remote Setup

If this repository has no GitHub remote yet, create a GitHub repository named:

card-legacy-website

Then connect it:

git remote add origin https://github.com/<your-org-or-user>/card-legacy-website.git
git checkout main
git push -u origin main
git checkout -b dev
git push -u origin dev

If your local branch is not named main yet, rename the current stable branch:

git branch -M main
git push -u origin main

For later feature work:

git checkout dev
git pull origin dev
git checkout -b feature/example-task

Pull Request Policy

• Feature branch -> Pull Request -> dev
• Test dev
• Pull Request -> main
• Merge only after review
• Keep PRs small and focused
• Do not rewrite unrelated files
• Do not redesign unrelated pages
• Never commit secrets

Deployment Notes

Deployment is not configured yet. Vercel, Netlify, or another static hosting provider can be connected later. Configure deployment from main after the GitHub repository and review workflow are stable.