<<<<<<< HEAD
A comprehensive Vue.js application for the Yelagiri Hills Tourism Portal, showcasing the natural beauty and tourism services of Yelagiri Hills, Tamil Nadu.
This project is a modern, responsive web application built with Vue 3 and Vite, designed to provide tourists with comprehensive information about Yelagiri Hills including accommodations, attractions, restaurants, tour packages, and local services.
- Frontend Framework: Vue 3 with Composition API
- Build Tool: Vite
- Routing: Vue Router 4
- CSS Framework: TailwindCSS
- Icons: Feather Icons (already available in the project)
- Package Manager: Yarn
- Linting: Biome
- Testing: Vitest
src/
├── components/ # Vue components
│ ├── Header.vue # Global header with navigation
│ ├── Footer.vue # Global footer
│ ├── Home.vue # Homepage with hero slider
│ ├── Attractions.vue # Tourist attractions listing
│ ├── Booking.vue # Hotel booking interface
│ ├── Restaurants.vue # Restaurant listings and menus
│ ├── Packages.vue # Tour packages showcase
│ ├── Guides.vue # Local guides directory
│ ├── Shopping.vue # Local shopping and handicrafts
│ ├── Events.vue # Events and festivals calendar
│ ├── Blog.vue # Travel blog and articles
│ ├── Contact.vue # Contact form and information
│ └── Transport.vue # Transportation options
├── pages/ # Page components (existing)
│ ├── Home.vue # Original home page
│ └── Login.vue # Authentication page
├── router.js # Vue Router configuration
├── App.vue # Root component
├── main.js # Application entry point
├── assets/ # Static assets
│ └── Inter/ # Font files
└── data/ # Data management
├── session.js # Session handling
└── user.js # User data management
- Responsive Design: Fully responsive across all devices (mobile, tablet, desktop)
- Modern UI: Clean, modern interface with TailwindCSS
- Interactive Components: Sliders, modals, and dynamic content
- Vue Router: Client-side routing for seamless navigation
- Reactive Data: Vue 3 Composition API for reactive state management
- Hero slider with auto-rotation
- Overview sections with key highlights
- Feature showcase
- Statistics display
- Call-to-action sections
- Featured attractions carousel
- Filterable attraction listings
- Detailed attraction modals
- Adventure activities showcase
- Category-based filtering
- Advanced search and filtering
- Hotel listings with detailed information
- Price range filtering
- Amenity-based filtering
- Rating-based sorting
- Detailed hotel modals
- Featured restaurants showcase
- Category-based filtering
- Local specialties section
- Detailed restaurant modals with menus
- Contact information and features
- Curated package offerings
- Adventure, family, romantic, and wellness packages
- Custom package builder
- Package benefits and features
- Direct booking integration
- Local guide directory
- Specialization-based filtering
- Language capabilities
- Rating and review system
- Direct booking functionality
- Local handicrafts showcase
- Product categories
- Shopping cart functionality
- Local product information
- Event calendar
- Festival information
- Cultural event listings
- Event details and booking
- Travel articles and tips
- Category-based organization
- Article previews
- Full article reading
- Contact form with validation
- Contact information display
- Quick links navigation
- Support information
- Transportation options
- Pricing information
- Booking functionality
- Service details
- Node.js (v16 or higher)
- Yarn package manager
-
Clone the repository
git clone <repository-url> cd ytp-frontend
-
Install dependencies
yarn install
-
Start development server
yarn dev
-
Build for production
yarn build
-
Preview production build
yarn preview
# Development server
yarn dev
# Build for production
yarn build
# Preview production build
yarn preview
# Run linter
yarn lint
# Run tests
yarn test
# Run tests with coverage
yarn test:coverage- Primary Green:
#1e5631(Dark Green) - Secondary Green:
#2d7a4d(Medium Green) - Accent Orange:
#ff6b35(Orange) - Background:
#f8f9fa(Light Gray) - Text:
#333333(Dark Gray)
- Font Family: Inter (loaded from assets)
- Headings: Bold weights (700, 600)
- Body Text: Regular weight (400)
- Responsive: Scales appropriately across devices
- Cards: Rounded corners with subtle shadows
- Buttons: Rounded with hover effects
- Forms: Clean inputs with focus states
- Navigation: Sticky header with backdrop blur
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px
- Large Desktop: > 1400px
- CSS Grid: Used for complex layouts
- Flexbox: Used for component alignment
- TailwindCSS: Responsive utility classes
- Base styles for mobile devices
- Progressive enhancement for larger screens
- Touch-friendly interface elements
- Optimized images and assets
The application uses Feather Icons (already available in the project) instead of emojis for a more professional look:
- Navigation: Menu, user, search icons
- Features: Mountain, hotel, restaurant, car icons
- Actions: Book, contact, share icons
- Status: Star ratings, checkmarks, alerts
- Header: Navigation and branding
- Footer: Links and contact information
- Self-contained: Each page manages its own state
- Reusable: Components can be reused across pages
- Modular: Clear separation of concerns
- Local State: Component-level reactive data
- Props: Parent-child communication
- Events: Child-parent communication
- Computed Properties: Derived reactive data
- Click on any card or item to open detailed modal
- Modals are implemented with Vue's reactive state
- Background click or close button closes modal
- Body scroll is disabled when modal is open
- Responsive: Adapts to different screen sizes
- Scrollable: Content scrolls if it exceeds viewport
- Accessible: Proper focus management
- Animated: Smooth open/close transitions
yarn build- Optimized assets in
dist/directory - Static files ready for deployment
- Base path configured for
/assets/ytp/frontend/
- Static Hosting: Netlify, Vercel, GitHub Pages
- CDN: CloudFront, CloudFlare
- Server: Nginx, Apache
- Input Validation: Form inputs are validated
- XSS Prevention: Vue's built-in protection
- HTTPS: Recommended for production
- Environment Variables: Sensitive data in env files
- Code Splitting: Lazy-loaded routes
- Image Optimization: Responsive images
- Bundle Analysis: Vite's built-in analysis
- Caching: Browser caching strategies
- Unit Tests: Component testing with Vitest
- Integration Tests: Router and API testing
- E2E Tests: Full user journey testing
- Coverage: Comprehensive test coverage
- Fork the repository
- Create a feature branch
- Make your changes
- Run tests and linting
- Submit a pull request
This project is part of the Yelagiri Tourism Portal initiative by Bosco Soft Technologies Pvt. Ltd. & Don Bosco College, Yelagiri Hills.
For support and queries:
- Email: info@yelagirihills.com
- Phone: +91 XXXXX XXXXX
- Support: 24/7 Customer Support Available
ytp
You can install this app using the bench CLI:
cd $PATH_TO_YOUR_BENCH
bench get-app $URL_OF_THIS_REPO --branch development
bench install-app ytpThis app uses pre-commit for code formatting and linting. Please install pre-commit and enable it for this repository:
cd apps/ytp
pre-commit installPre-commit is configured to use the following tools for checking and formatting your code:
- ruff
- eslint
- prettier
- pyupgrade
This app can use GitHub Actions for CI. The following workflows are configured:
- CI: Installs this app and runs unit tests on every push to
developbranch. - Linters: Runs Frappe Semgrep Rules and pip-audit on every pull request.
mit
origin/dev