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:
171
README.md
171
README.md
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user