Migrate from Next.js to Flask: Complete motorcycle adventure community website

- Replace Next.js/React implementation with Python Flask
- Add colorful blue-purple-teal gradient theme replacing red design
- Integrate logo and Transalpina panoramic background image
- Implement complete authentication system with Flask-Login
- Add community features for stories and tracks sharing
- Create responsive design with Tailwind CSS
- Add error handling with custom 404/500 pages
- Include Docker deployment configuration
- Add favicon support and proper SEO structure
- Update content for Pensiune BuonGusto accommodation
- Remove deprecated Next.js files and dependencies

Features:
 Landing page with hero section and featured content
 User registration and login system
 Community section for adventure sharing
 Admin panel for content management
 Responsive mobile-first design
 Docker containerization with PostgreSQL
 Email integration with Flask-Mail
 Form validation with WTForms
 SQLAlchemy database models
 Error pages and favicon handling
This commit is contained in:
ske087
2025-07-23 14:42:40 +03:00
parent 282cd0dfcb
commit fc463dc69a
45 changed files with 1572 additions and 11044 deletions

171
README.md
View File

@@ -1,62 +1,159 @@
# Moto Adventure Website
# Motorcycle Adventure Community
A Next.js-based website for motorcycle adventure enthusiasts, featuring route tracking, blog posts, and community features.
A Flask-based web application for motorcycle enthusiasts featuring adventure stories, route sharing, and accommodation recommendations.
## 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
- **Landing Page**: Hero section with call-to-action, featured adventures, and accommodation promotion
- **User Authentication**: Registration and login system with Flask-Login
- **Community Section**: Share stories, tracks, and experiences
- **Admin Panel**: Content management for administrators
- **Responsive Design**: Built with Tailwind CSS for mobile-first design
- **Error Handling**: Custom 404 and 500 error pages
## Tech Stack
## Technology 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
- **Backend**: Python Flask 3.0.0
- **Database**: SQLAlchemy with PostgreSQL support
- **Authentication**: Flask-Login
- **Email**: Flask-Mail
- **Forms**: WTForms with validation
- **Styling**: Tailwind CSS (CDN)
- **Deployment**: Docker with Gunicorn
## Getting Started
## Project Structure
1. Install dependencies:
```
/
├── app/
│ ├── __init__.py # Flask app factory
│ ├── models.py # Database models
│ ├── forms.py # WTForm definitions
│ ├── routes/ # Route blueprints
│ │ ├── main.py # Main routes (index, about)
│ │ ├── auth.py # Authentication routes
│ │ └── community.py # Community features
│ ├── templates/ # Jinja2 templates
│ │ ├── base.html # Base template
│ │ ├── index.html # Landing page
│ │ ├── auth/ # Auth templates
│ │ └── errors/ # Error pages
│ └── static/ # Static assets
│ ├── favicon.ico
│ └── images/
├── config.py # Application configuration
├── requirements.txt # Python dependencies
├── run.py # Application entry point
├── Dockerfile # Docker configuration
└── docker-compose.yml # Docker Compose setup
```
## Quick Start
### Local Development
1. **Clone the repository**
```bash
npm install
git clone <repository-url>
cd motorcycle-adventure-community
```
2. Set up environment variables:
2. **Create virtual environment**
```bash
cp .env.example .env.local
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
```
3. Set up the database:
3. **Install dependencies**
```bash
npx prisma generate
npx prisma db push
pip install -r requirements.txt
```
4. Run the development server:
4. **Set environment variables**
```bash
npm run dev
export FLASK_APP=run.py
export FLASK_ENV=development
export SECRET_KEY="your-secret-key-here"
export DATABASE_URL="sqlite:///motorcycle_adventures.db"
```
5. Open [http://localhost:3000](http://localhost:3000) in your browser.
5. **Initialize database**
```bash
flask db init
flask db migrate -m "Initial migration"
flask db upgrade
```
## Development
6. **Run the application**
```bash
python run.py
```
- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run start` - Start production server
- `npm run lint` - Run ESLint
### Docker Deployment
1. **Build and run with Docker Compose**
```bash
docker-compose up --build
```
2. **Access the application**
- Web application: http://localhost:5000
- PostgreSQL database: localhost:5432
## Configuration
The application supports multiple environments through environment variables:
- `FLASK_ENV`: development, testing, production
- `SECRET_KEY`: Flask secret key for sessions
- `DATABASE_URL`: Database connection string
- `MAIL_SERVER`: SMTP server for email
- `MAIL_USERNAME`: Email username
- `MAIL_PASSWORD`: Email password
## Features Overview
### Landing Page
- Hero section with stunning mountain panorama background
- Call-to-action for adventure community
- Featured adventures showcase
- Pensiune BuonGusto accommodation promotion
### Authentication System
- User registration with email validation
- Secure login/logout functionality
- Password hashing with Werkzeug
- Session management with Flask-Login
### Community Features
- Story and track sharing
- User profiles
- Image uploads for adventures
- GPX file support for route sharing
- Comment system
- Like/rating system
### Admin Panel
- User management
- Content moderation
- Analytics dashboard
- System configuration
## Contributing
1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## License
This project is private and proprietary.
This project is licensed under the MIT License - see the LICENSE file for details.
## Acknowledgments
- Beautiful Transalpina panorama background image
- Tailwind CSS for responsive design
- Flask community for excellent documentation
- Bootstrap icons for UI elements