Travel Guide Platform Instructions
Instructions for developing a multilingual travel guide platform focused on foreign tourists, starting with Taiwan/Taipei as the template city.
Project Vision
This platform provides foreign tourists with:
Multilingual travel itineraries (Chinese/English/Japanese)Restaurant menu translations with cultural contextIntelligent trip planning and recommendationsCommunity-driven travel information sharingCultural guides and practical informationProject Structure
When working with this codebase, be aware of these key files:
`documentation/prd.md` - Complete Product Requirements Document with full specifications`taipei.md` / `taipei.en.md` / `taipei.ja.md` - Template itineraries in three languages`public/images/taipei-family-trip/` - Curated photos of Taipei attractions`src/app/[locale]/` - Internationalized Next.js App Router pages`src/components/` - React components including navigation, cards, and UI elements`src/lib/data/` - Sample data for restaurants and itineraries`src/types/` - TypeScript interfaces for data modelsTechnology Stack
The project uses:
**Framework:** Next.js 14 with App Router**Language:** TypeScript**Styling:** Tailwind CSS**UI Components:** shadcn/ui (Button, Card, Badge)**Internationalization:** next-intl (zh/en/ja)**Database:** Supabase or PlanetScale (planned)**Deployment:** VercelDevelopment Guidelines
1. Maintaining Multilingual Content
When adding or modifying content:
Always update all three language versions (zh/en/ja)Use `next-intl` for UI strings and navigationKeep cultural context appropriate for foreign touristsInclude practical details: walking times, MRT stations, pricingEnsure translations are culturally sensitive and accurate2. Taipei as Template
Taipei serves as the foundational template:
Content structure established here will be replicated for other citiesItinerary format and information depth set the baselineOnce perfected, the model expands to other Asian citiesMaintain consistency in data models and component patterns3. Data Models
The project includes TypeScript interfaces for:
Restaurant and menu item translationsMultilingual itinerary planningUser preferences and dietary restrictionsActivity scheduling and location dataCultural notes and local insightsAlways use these interfaces when working with data.
4. Component Development
When building components:
Use shadcn/ui components as the foundationEnsure responsive design for mobile touristsSupport all three languages via next-intlInclude loading states and error handlingFollow the established design patterns in existing components5. Routing and Pages
The app uses Next.js App Router with locale support:
`/[locale]` - Home page with featured content`/[locale]/restaurants` - Restaurant listings with translations`/[locale]/itineraries` - Travel itinerary templates`/[locale]/community` - Community discussions and tipsAlways maintain locale parameter in routes.
Development Workflow
Starting Development
```bash
npm run dev
```
Starts development server with Turbopack at http://localhost:3000
Building for Production
```bash
npm run build
npm run start
```
Code Quality
```bash
npm run lint
```
Always ensure linting passes before committing.
Development Phases
The PRD outlines a 4-phase roadmap:
**Phase 1 - MVP (In Progress)**
Basic UI with internationalizationRestaurant database with menu translationsSimple itinerary plannerCore data models**Phase 2 - Community**
User authenticationCommunity featuresUser-generated content**Phase 3 - Intelligence**
AI recommendationsAdvanced search and filteringPersonalized suggestions**Phase 4 - Commercialization**
Multi-city expansionPremium featuresPartnership integrationsCurrent Status
Completed:
✅ Next.js 14 with TypeScript and App Router✅ Tailwind CSS and shadcn/ui components✅ next-intl internationalization (zh/en/ja)✅ Basic routing structure with locale support✅ TypeScript data models from PRD✅ Sample data for restaurants and itineraries✅ Responsive navigation componentPriority Next Steps
1. **Database Integration** - Connect to Supabase or PlanetScale
2. **Authentication** - Implement user authentication system
3. **Restaurant Search** - Add search and filtering for restaurants
4. **Itinerary Builder** - Create itinerary creation and editing tools
5. **Community Features** - Set up discussion forums and user reviews
Key Considerations
**Foreign Tourist Focus** - All features should prioritize ease of use for international visitors**Cultural Context** - Always include cultural explanations and etiquette tips**Practical Information** - Emphasize transit directions, opening hours, pricing**Accessibility** - Ensure the platform works well on mobile devices**Scalability** - Design patterns should be replicable for other cities**Performance** - Optimize images and data loading for international usersContent Standards
When adding travel content:
Include high-quality, representative photosProvide accurate MRT/transit informationList approximate costs in local currencyAdd cultural notes where relevantInclude English availability informationMention accessibility considerationsNote peak times and booking recommendationsCode Standards
Use TypeScript strictly - avoid `any` typesFollow ESLint rulesUse meaningful variable and function namesComment complex logic, especially cultural contextKeep components focused and reusableWrite clean, readable code suitable for international collaborationGetting Help
Refer to `documentation/prd.md` for detailed specificationsCheck existing components for patterns and examplesReview TypeScript interfaces in `src/types/` for data structuresExamine sample data in `src/lib/data/` for content structure