Re_Figma_Code/MIGRATION_GUIDE.md

🔄 Migration Guide - Project Setup Complete

✅ What Has Been Created

Configuration Files ✓

• ✅ package.json - Dependencies and scripts
• ✅ tsconfig.json - TypeScript configuration
• ✅ tsconfig.node.json - Node TypeScript config
• ✅ vite.config.ts - Vite build configuration
• ✅ tailwind.config.ts - Tailwind CSS configuration
• ✅ postcss.config.js - PostCSS configuration
• ✅ eslint.config.js - ESLint configuration
• ✅ .prettierrc - Prettier configuration
• ✅ .gitignore - Git ignore rules
• ✅ .env.example - Environment variables template
• ✅ index.html - HTML entry point

VS Code Configuration ✓

• ✅ .vscode/settings.json - Editor settings
• ✅ .vscode/extensions.json - Recommended extensions

Documentation ✓

• ✅ README.md - Comprehensive project documentation
• ✅ MIGRATION_GUIDE.md - This file

Source Files Created ✓

• ✅ src/main.tsx - Application entry point
• ✅ src/vite-env.d.ts - Vite environment types
• ✅ src/types/index.ts - TypeScript type definitions

---

🚀 Next Steps - File Migration

Step 1: Install Dependencies

```bash npm install ```

This will install all required packages (~5 minutes).

Step 2: Migrate Files to src Directory

You need to manually move the existing files to the src directory:

A. Move App.tsx

```bash

Windows Command Prompt

move App.tsx src\App.tsx

Or manually drag and drop in VS Code

```

B. Move Components Directory

```bash

Windows Command Prompt

move components src\components

Or manually drag and drop in VS Code

```

C. Move Utils Directory

```bash

Windows Command Prompt

move utils src\utils

Or manually drag and drop in VS Code

```

D. Move Styles Directory

```bash

Windows Command Prompt

move styles src\styles

Or manually drag and drop in VS Code

```

Step 3: Update Import Paths

After moving files, you'll need to update import statements to use path aliases.

Example Changes:

Before: ```typescript import { Layout } from './components/Layout'; import { Dashboard } from './components/Dashboard'; ```

After: ```typescript import { Layout } from '@/components/Layout'; import { Dashboard } from '@/components/Dashboard'; ```

Files that need updating:

1. src/App.tsx - Update all component imports
2. All files in src/components/ - Update relative imports
3. All modal files in src/components/modals/

Step 4: Fix Sonner Import

In src/App.tsx, update the sonner import:

Before: ```typescript import { toast } from 'sonner@2.0.3'; ```

After: ```typescript import { toast } from 'sonner'; ```

Step 5: Start Development Server

```bash npm run dev ```

The app should open at http://localhost:3000

---

🔍 Common Issues & Solutions

Issue 1: Module not found errors

Problem: TypeScript can't find modules after migration.

Solution:

1. Restart VS Code TypeScript server: Ctrl+Shift+P → "TypeScript: Restart TS Server"
2. Clear node_modules and reinstall: ```bash rm -rf node_modules package-lock.json npm install ```

Issue 2: Path alias not working

Problem: @/ imports show errors.

Solution:

1. Check tsconfig.json paths configuration
2. Check vite.config.ts resolve.alias configuration
3. Restart VS Code

Issue 3: Tailwind classes not applying

Problem: Styles not working after migration.

Solution:

1. Ensure globals.css is imported in src/main.tsx
2. Check tailwind.config.ts content paths
3. Restart dev server: Ctrl+C then npm run dev

Issue 4: Build errors

Problem: TypeScript compilation errors.

Solution:

1. Run type check: npm run type-check
2. Fix any TypeScript errors shown
3. Run build again: npm run build

---

📋 Migration Checklist

Use this checklist to track your migration progress:

Files Migration

• Installed dependencies (npm install)
• Moved App.tsx to src/
• Moved components/ to src/components/
• Moved utils/ to src/utils/
• Moved styles/ to src/styles/
• Created src/main.tsx (already done)

Import Updates

• Updated imports in src/App.tsx
• Updated imports in src/components/Layout.tsx
• Updated imports in src/components/Dashboard.tsx
• Updated imports in all other component files
• Fixed sonner import in App.tsx

Testing

• Dev server starts successfully (npm run dev)
• Application loads at http://localhost:3000
• No console errors
• Dashboard displays correctly
• Navigation works
• New request wizard works
• Claim management wizard works

Code Quality

• ESLint passes (npm run lint)
• TypeScript compiles (npm run type-check)
• Code formatted (npm run format)
• Build succeeds (npm run build)

Environment

• Created .env from .env.example
• Updated environment variables if needed
• VS Code extensions installed

---

🎯 After Migration

1. Clean Up Old Files

After confirming everything works in src/: ```bash

Delete old documentation files from root (optional)

Keep only if you want them at root level

```

2. Commit Changes

```bash git add . git commit -m "feat: migrate to standard React project structure with Vite" ```

3. Update Team

Inform team members about:

• New project structure
• Updated npm scripts
• Path alias usage (@/)
• Required VS Code extensions

---

📚 Additional Resources

Documentation

• Vite Documentation
• React TypeScript Cheatsheet
• Tailwind CSS Docs
• shadcn/ui Components

Scripts Reference

```bash npm run dev # Start development server npm run build # Build for production npm run preview # Preview production build npm run lint # Check for linting errors npm run lint:fix # Auto-fix linting errors npm run format # Format code with Prettier npm run type-check # Check TypeScript types ```

---

💡 Tips for Development

1. Use Path Aliases

```typescript // Good ✓ import { Button } from '@/components/ui/button'; import { getDealerInfo } from '@/utils/dealerDatabase';

// Avoid ✗ import { Button } from '../../../components/ui/button'; ```

2. Type Safety

```typescript // Import types import type { Request, DealerInfo } from '@/types';

// Use them in your components const request: Request = { ... }; ```

3. Code Formatting

Set up auto-format on save in VS Code (already configured in .vscode/settings.json)

4. Commit Conventions

Use conventional commits:

• feat: for new features
• fix: for bug fixes
• docs: for documentation
• style: for formatting changes
• refactor: for code refactoring

---

❓ Need Help?

If you encounter issues:

1. Check this migration guide
2. Check the main README.md
3. Review error messages carefully
4. Check VS Code Problems panel
5. Restart VS Code TypeScript server
6. Clear node_modules and reinstall

---

Migration prepared by the Development Team Date: 2024