d1337b4b77
- Create responsive homepage with hero section, features, and animations - Add adventures page with filterable adventure grid - Add routes page with downloadable GPX route library - Implement Header component with responsive navigation - Set up Tailwind CSS with custom adventure theme - Fix Next.js configuration and add Unsplash image support - Add Framer Motion animations throughout - Install and configure all dependencies successfully Features added: - Modern UI with gradient backgrounds and glass morphism - Mobile-responsive design - Interactive animations and hover effects - Adventure browsing and filtering - Route discovery and download system - Professional motorcycle adventure branding
Moto Adventure Website
A Next.js-based website for motorcycle adventure enthusiasts, featuring route tracking, blog posts, and community features.
Features
- 🏍️ Motorcycle adventure route tracking with GPX support
- 📝 Blog system for sharing adventure stories
- 🗺️ Interactive maps with Leaflet integration
- 👤 User authentication with NextAuth.js
- 📊 Analytics and charts with Recharts
- 📱 Responsive design with Tailwind CSS
- 🖼️ Image upload and processing with Sharp
- 🎨 Smooth animations with Framer Motion
Tech Stack
- Framework: Next.js 14 with App Router
- Language: TypeScript
- Styling: Tailwind CSS
- Database: Prisma ORM
- Authentication: NextAuth.js
- Maps: React Leaflet
- Forms: React Hook Form
- Icons: Lucide React
- Animation: Framer Motion
Getting Started
-
Install dependencies:
npm install -
Set up environment variables:
cp .env.example .env.local -
Set up the database:
npx prisma generate npx prisma db push -
Run the development server:
npm run dev -
Open http://localhost:3000 in your browser.
Development
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
License
This project is private and proprietary.