150 lines
4.5 KiB
Markdown
150 lines
4.5 KiB
Markdown
|
# WDI Website - Complete Setup Guide
|
||
|
|
|
||
|
|
This is a complete setup guide to get the WDI website running locally with **zero errors** after running `npm install` and `npm run dev`.
|
||
|
|
|
||
|
|
## 🚀 Quick Start (One Command Setup)
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm install && npm run dev
|
||
|
|
```
|
||
|
|
|
||
|
|
That's it! The project should now run perfectly at `http://localhost:3000` (or the next available port).
|
||
|
|
|
||
|
|
## ✅ What's Been Fixed
|
||
|
|
|
||
|
|
### 1. **All Dependencies Resolved**
|
||
|
|
- ✅ All missing `@radix-ui` packages added
|
||
|
|
- ✅ Tailwind CSS v4 properly configured
|
||
|
|
- ✅ All peer dependencies resolved
|
||
|
|
- ✅ No version conflicts
|
||
|
|
|
||
|
|
### 2. **All Figma Asset Imports Replaced**
|
||
|
|
Every `figma:asset` import has been replaced with high-quality, relevant placeholder images:
|
||
|
|
|
||
|
|
#### **Components Fixed:**
|
||
|
|
- ✅ `components/CarouselTestimonials.tsx` - Client testimonials with professional headshots
|
||
|
|
- ✅ `components/CaseStudyHighlight.tsx` - Project showcase images
|
||
|
|
- ✅ `imports/Group1597880681.tsx` - Client logo grid
|
||
|
|
|
||
|
|
#### **Pages Fixed:**
|
||
|
|
- ✅ `pages/CaseStudies.tsx` - Complete case study portfolio
|
||
|
|
- ✅ `pages/iOSAppDevelopment.tsx` - iOS development showcase
|
||
|
|
- ✅ All project pages with relevant tech/business images
|
||
|
|
|
||
|
|
### 3. **Image Categories Used**
|
||
|
|
All images are carefully selected from Unsplash with these categories:
|
||
|
|
|
||
|
|
- **🏢 Business/Corporate**: Professional company and team images
|
||
|
|
- **💻 Technology**: Code, devices, and tech-focused imagery
|
||
|
|
- **📱 Mobile Apps**: Smartphone and app development visuals
|
||
|
|
- **👤 People**: Professional headshots for testimonials
|
||
|
|
- **🏭 Industry**: Sector-specific imagery (healthcare, finance, etc.)
|
||
|
|
- **🎨 Design**: UI/UX and creative process imagery
|
||
|
|
|
||
|
|
### 4. **Configuration Fixed**
|
||
|
|
- ✅ PostCSS properly configured for Tailwind v4
|
||
|
|
- ✅ TypeScript configuration optimized
|
||
|
|
- ✅ Vite configuration updated
|
||
|
|
- ✅ ESLint warnings resolved
|
||
|
|
|
||
|
|
## 📁 Project Structure
|
||
|
|
|
||
|
|
```
|
||
|
|
wdi-website/
|
||
|
|
├── components/ # Reusable UI components (all fixed)
|
||
|
|
├── pages/ # Page components (all figma imports replaced)
|
||
|
|
├── imports/ # Asset imports (all converted to URLs)
|
||
|
|
├── styles/ # Global CSS with Tailwind v4
|
||
|
|
└── package.json # All dependencies included
|
||
|
|
```
|
||
|
|
|
||
|
|
## 🖼️ Image Sources
|
||
|
|
|
||
|
|
All images are sourced from **Unsplash** with proper attribution:
|
||
|
|
- High resolution (600x400 for projects, 150x150 for avatars)
|
||
|
|
- Professionally curated and relevant
|
||
|
|
- Optimized for web performance
|
||
|
|
- No licensing issues
|
||
|
|
|
||
|
|
## 🎨 Design System
|
||
|
|
|
||
|
|
The project uses a consistent dark theme with:
|
||
|
|
- **Primary Color**: `#E5195E` (WDI Pink)
|
||
|
|
- **Background**: `#0E0E0E` (Dark)
|
||
|
|
- **Typography**: Manrope font family
|
||
|
|
- **Components**: Glassmorphism design with backdrop blur
|
||
|
|
|
||
|
|
## 🔧 Development Commands
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# Install dependencies
|
||
|
|
npm install
|
||
|
|
|
||
|
|
# Start development server
|
||
|
|
npm run dev
|
||
|
|
|
||
|
|
# Build for production
|
||
|
|
npm run build
|
||
|
|
|
||
|
|
# Preview production build
|
||
|
|
npm run preview
|
||
|
|
|
||
|
|
# Run linting
|
||
|
|
npm run lint
|
||
|
|
```
|
||
|
|
|
||
|
|
## 🌐 Pages Available
|
||
|
|
|
||
|
|
The website includes 100+ pages across:
|
||
|
|
- **Services**: Mobile, Web, AI/ML development
|
||
|
|
- **Industries**: FinTech, HealthTech, EdTech, etc.
|
||
|
|
- **Solutions**: MVP, Legacy modernization, ODC
|
||
|
|
- **Company**: About, Careers, Team, Awards
|
||
|
|
- **Resources**: Case studies, Blog, Insights
|
||
|
|
|
||
|
|
## 🚨 No More Errors!
|
||
|
|
|
||
|
|
After running this setup:
|
||
|
|
- ❌ No more `figma:asset` import errors
|
||
|
|
- ❌ No more missing dependency warnings
|
||
|
|
- ❌ No more Tailwind configuration issues
|
||
|
|
- ❌ No more TypeScript compilation errors
|
||
|
|
- ✅ Clean development experience
|
||
|
|
- ✅ Fast hot reload
|
||
|
|
- ✅ Professional placeholder content
|
||
|
|
|
||
|
|
## 🔄 Updating Images
|
||
|
|
|
||
|
|
To replace placeholder images with real assets:
|
||
|
|
|
||
|
|
1. Add your images to `/public/images/`
|
||
|
|
2. Update the image imports in components:
|
||
|
|
```tsx
|
||
|
|
// Replace this:
|
||
|
|
const projectImage = "https://images.unsplash.com/photo-...";
|
||
|
|
|
||
|
|
// With this:
|
||
|
|
const projectImage = "/images/your-project.jpg";
|
||
|
|
```
|
||
|
|
|
||
|
|
## 🏃♂️ Next Steps
|
||
|
|
|
||
|
|
1. **Start Development**: `npm run dev`
|
||
|
|
2. **Browse the Site**: Visit all pages to see the content
|
||
|
|
3. **Customize Content**: Replace placeholder text with real content
|
||
|
|
4. **Add Real Images**: Replace Unsplash images with actual project images
|
||
|
|
5. **Deploy**: Build and deploy to your hosting platform
|
||
|
|
|
||
|
|
## 📞 Support
|
||
|
|
|
||
|
|
The project now runs completely error-free. If you encounter any issues:
|
||
|
|
|
||
|
|
1. Delete `node_modules` and run `npm install` again
|
||
|
|
2. Clear browser cache and restart dev server
|
||
|
|
3. Check that you're using Node.js v18 or higher
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
**Ready to develop! 🎉**
|
||
|
|
|
||
|
|
The WDI website is now fully functional with professional placeholder content and zero configuration errors.
|