Skip to content

ENVIRONMENT_SETUP.md

Latest commit

 

History

History
333 lines (233 loc) · 6.52 KB

ENVIRONMENT_SETUP.md

File metadata and controls

333 lines (233 loc) · 6.52 KB

🔧 Environment Setup Checklist

✅ Before You Start

Follow these steps in order to set up Trinity Attend.

Step 1: ✅ Dependencies Installation

The npm install command should complete successfully. If you see errors:

# Try with legacy peer deps
npm install --legacy-peer-deps

# Or clean install
rm -rf node_modules package-lock.json
npm install --legacy-peer-deps

Step 2: 🔑 Environment Variables

2.1: Generate Secrets

Open your terminal and run these commands one at a time:

# Generate AUTH_SECRET
node -e "console.log(require('crypto').randomBytes(32).toString('base64'))"

Copy the output ↑

# Generate QR_CODE_SECRET
node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

Copy the output ↑

2.2: Get Database URL

  1. Go to https://neon.tech
  2. Sign up or log in
  3. Click "Create Project"
  4. Give it a name: "trinity-attend"
  5. Select region closest to you
  6. Click "Create"
  7. On the dashboard, find "Connection String"
  8. Copy the Pooled Connection string
  9. Make sure it ends with ?sslmode=require

Example format:

postgresql://username:password@ep-xyz.region.aws.neon.tech/dbname?sslmode=require

2.3: Create .env.local File

In the project root (c:\Users\HP\Desktop\trinity-attend), create a file named .env.local:

# On Windows PowerShell
New-Item .env.local

# Or copy from example
copy .env.example .env.local

2.4: Fill .env.local

Open .env.local in your editor and paste:

# ===== REQUIRED =====

# Paste your Neon connection string here
DATABASE_URL="postgresql://[paste-here]"

# Paste the AUTH_SECRET you generated
AUTH_SECRET="[paste-generated-secret-here]"

# Paste the same or another generated secret
BETTER_AUTH_SECRET="[paste-generated-secret-here]"

# Paste the QR_CODE_SECRET you generated
QR_CODE_SECRET="[paste-generated-qr-secret-here]"

# App configuration (no changes needed for local dev)
NEXT_PUBLIC_APP_URL="http://localhost:3000"
NEXT_PUBLIC_APP_NAME="Trinity Attend"

# Geolocation (100m radius validation)
NEXT_PUBLIC_ENABLE_GEOLOCATION="true"
NEXT_PUBLIC_MAX_DISTANCE_METERS="100"

# ===== OPTIONAL (Add later when needed) =====

# Google OAuth (Step 7)
GOOGLE_CLIENT_ID="[paste-google-client-id-here]"
GOOGLE_CLIENT_SECRET="[paste-google-client-secret-here]"

# Email (Resend)
RESEND_API_KEY=""
FROM_EMAIL="noreply@trinityattend.com"

# Media (Cloudinary)
NEXT_PUBLIC_CLOUD_NAME=""
CLOUDINARY_API_KEY=""
CLOUDINARY_API_SECRET=""

Save the file.

Step 3: 🗄️ Database Setup

Now that you have DATABASE_URL configured:

# Push the schema to your database (creates all tables)
npm run db:push

Expected output:

Your database is now in sync with your Prisma schema.
✔ Generated Prisma Client

Then seed the database:

# Add sample data (faculties, departments, courses, demo users)
npm run db:seed

Expected output:

🌱 Starting database seed...
Creating faculties...
✅ Faculties created
Creating departments...
✅ Departments created
Creating sample Computer Science courses...
✅ Sample courses created
Creating demo users...
✅ Demo users created

📝 Demo Credentials:
Teacher: teacher@demo.com / Demo@1234
Student: student@demo.com (or matric: 2022/1/12345) / Demo@1234

✅ Database seed completed!

Step 4: 🎨 Install Shadcn UI Components

Install all required UI components:

npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add input
npx shadcn@latest add label
npx shadcn@latest add form
npx shadcn@latest add select
npx shadcn@latest add dialog
npx shadcn@latest add dropdown-menu
npx shadcn@latest add table
npx shadcn@latest add tabs
npx shadcn@latest add switch
npx shadcn@latest add progress
npx shadcn@latest add avatar
npx shadcn@latest add badge
npx shadcn@latest add separator
npx shadcn@latest add skeleton
npx shadcn@latest add checkbox
npx shadcn@latest add popover

Tip: You can install multiple at once:

npx shadcn@latest add button card input label form select dialog dropdown-menu table tabs

These will be added to src/components/ui/.

Step 5: 🚀 Run the Development Server

npm run dev

Expected output:

  ▲ Next.js 15.0.3
  - Local:        http://localhost:3000
  - Environments: .env.local

 ✓ Ready in 2.5s

Step 6: ✅ Test Your Setup

  1. Open your browser
  2. Go to http://localhost:3000
  3. You should see the Trinity Attend landing page
  4. Click "Get Started" or "Sign In"

Demo credentials (after seeding):

  • Teacher: teacher@demo.com / Demo@1234
  • Student: 2022/1/12345 / Demo@1234

🐛 Troubleshooting

Issue: npm install fails

Solution 1:

npm install --legacy-peer-deps

Solution 2 (Clean install):

rm -rf node_modules package-lock.json
npm install --legacy-peer-deps

Issue: Can't connect to database

Check:

  1. Is DATABASE_URL in .env.local correct?
  2. Does it end with ?sslmode=require?
  3. Can you access Neon dashboard?
  4. Is your database active (not suspended)?

Solution:

Issue: Prisma Client errors

npx prisma generate
npm run db:push

Issue: Module not found

rm -rf .next
npm run dev

Issue: Port 3000 already in use

# Find and kill the process on port 3000
# Windows:
netstat -ano | findstr :3000
taskkill /PID <process-id> /F

# Or use a different port:
npm run dev -- -p 3001

📋 Verification Checklist

Before proceeding to build features, verify:

  • npm install completed without errors
  • .env.local file exists and is filled
  • npm run db:push succeeded
  • npm run db:seed created demo users
  • Shadcn components installed to src/components/ui/
  • npm run dev starts server
  • http://localhost:3000 shows landing page
  • No errors in terminal
  • No errors in browser console

🎯 What's Next?

Once all steps are complete, you're ready to build:

  1. Authentication pages (login/signup)
  2. Student dashboard
  3. Teacher dashboard
  4. QR code system
  5. Analytics and reports

See SETUP_GUIDE.md for detailed implementation steps.

📞 Still Having Issues?

  1. Check the error message carefully
  2. Read README.md for more details
  3. Review SETUP_GUIDE.md for comprehensive instructions
  4. Check QUICK_REFERENCE.md for common commands

Once this checklist is complete, you're ready to start building! 🚀