Re_Figma_Code/SETUP_INSTRUCTIONS.md

🎯 Quick Setup Instructions

✅ Project Setup Complete!

Your Royal Enfield Approval Portal has been configured with industry-standard React development tools and structure.

---

🚀 Quick Start (5 Minutes)

Option 1: Automated Migration (Recommended)

For Windows PowerShell:

# 1. Run the migration script
.\migrate-files.ps1

# 2. Install dependencies
npm install

# 3. Start development server
npm run dev

Option 2: Manual Migration

If you prefer manual control:

# 1. Create src directories
mkdir src\components src\utils src\styles

# 2. Move files
move App.tsx src\
move components src\
move utils src\
move styles src\

# 3. Install dependencies
npm install

# 4. Start development server
npm run dev

---

📦 What Was Created

Core Configuration ✅

• ✅ package.json - 50+ dependencies installed
• ✅ vite.config.ts - Build tool (fast, modern)
• ✅ tsconfig.json - TypeScript settings
• ✅ tailwind.config.ts - Styling configuration
• ✅ eslint.config.js - Code quality rules
• ✅ .prettierrc - Code formatting

Project Structure ✅

Re_Figma_Code/
├── src/                    ← NEW! All code goes here
│   ├── main.tsx           ← Entry point (created)
│   ├── App.tsx            ← Move here
│   ├── components/        ← Move here
│   ├── utils/             ← Move here
│   ├── styles/            ← Move here
│   └── types/             ← Type definitions (created)
├── public/                ← Static assets
├── index.html             ← HTML entry
└── [config files]         ← All created

VS Code Setup ✅

• ✅ .vscode/settings.json - Auto-format, Tailwind IntelliSense
• ✅ .vscode/extensions.json - Recommended extensions

---

🔧 After Running Setup

1. Fix Imports in App.tsx

Update these imports:

// OLD (relative paths)
import { Layout } from './components/Layout';
import { Dashboard } from './components/Dashboard';
import { toast } from 'sonner@2.0.3';

// NEW (path aliases)
import { Layout } from '@/components/Layout';
import { Dashboard } from '@/components/Dashboard';
import { toast } from 'sonner';

2. Update Component Imports

In all component files, change:

// OLD
import { Button } from './ui/button';
import { Card } from '../ui/card';

// NEW
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';

3. Verify Everything Works

# Check for TypeScript errors
npm run type-check

# Check for linting issues
npm run lint

# Format code
npm run format

# Build for production (test)
npm run build

---

🎨 Development Workflow

Daily Development

npm run dev          # Start dev server (http://localhost:3000)

Code Quality

npm run lint         # Check for issues
npm run lint:fix     # Auto-fix issues
npm run format       # Format code with Prettier

Building

npm run build        # Production build
npm run preview      # Preview production build

---

🆘 Troubleshooting

Issue: "Module not found"

Solution:

# Clear cache and reinstall
rm -rf node_modules package-lock.json
npm install

Issue: "@/ path alias not working"

Solution:

1. Restart VS Code
2. Press Ctrl+Shift+P → "TypeScript: Restart TS Server"

Issue: "Tailwind classes not applying"

Solution:

1. Check src/main.tsx imports './styles/globals.css'
2. Restart dev server: Ctrl+C then npm run dev

Issue: Build errors

Solution:

npm run type-check   # See TypeScript errors
npm run lint         # See ESLint errors

---

📚 Important Files

Environment Variables

Copy and edit .env.example:

cp .env.example .env

Edit values:

VITE_API_BASE_URL=http://localhost:5000/api
VITE_APP_NAME=Royal Enfield Approval Portal

Type Definitions

Use types from src/types/index.ts:

import type { Request, DealerInfo, Priority } from '@/types';

const request: Request = { /* ... */ };

---

✨ New Features Available

1. Path Aliases

import { Button } from '@/components/ui/button';
import { getDealerInfo } from '@/utils/dealerDatabase';
import type { Request } from '@/types';

2. Code Quality Tools

• ESLint - Catches bugs and enforces best practices
• Prettier - Consistent code formatting
• TypeScript - Type safety and IntelliSense

3. Optimized Build

• Code splitting - Faster load times
• Tree shaking - Smaller bundle size
• Source maps - Easy debugging

4. Development Experience

• Hot Module Replacement - Instant updates
• Fast Refresh - Preserve component state
• Better Error Messages - Easier debugging

---

🎯 Next Steps

1. ✅ Run migration script or move files manually
2. ✅ Install dependencies: npm install
3. ✅ Update imports to use @/ aliases
4. ✅ Fix sonner import
5. ✅ Start dev server: npm run dev
6. ✅ Test all features work
7. ✅ Commit changes to git

---

📖 Documentation

• README.md - Comprehensive project documentation
• MIGRATION_GUIDE.md - Detailed migration steps
• package.json - All available scripts

---

🤝 Team Guidelines

Code Style

• Use path aliases (@/) for all imports
• Format code before committing (npm run format)
• Fix linting issues (npm run lint:fix)
• Write TypeScript types (avoid any)

Git Commits

git add .
git commit -m "feat: add new feature"
git commit -m "fix: resolve bug"
git commit -m "docs: update documentation"

---

✅ Success Checklist

• Dependencies installed (npm install)
• Files migrated to src/
• Imports updated to use @/
• Sonner import fixed
• Dev server runs (npm run dev)
• No console errors
• Application loads correctly
• All features work
• Build succeeds (npm run build)

---

🎉 You're all set! Happy coding!

For detailed help, see MIGRATION_GUIDE.md or README.md