172 lines
4.1 KiB
Markdown
172 lines
4.1 KiB
Markdown
# Product Finder Quiz - Flask Web Application
|
|
|
|
A Python Flask web application for product selection through an interactive quiz interface.
|
|
|
|
## Features
|
|
|
|
- Interactive quiz with button-based and form-based questions
|
|
- Dynamic conditional logic based on user responses
|
|
- Product recommendations with images
|
|
- Responsive design
|
|
- Memory storage for user answers
|
|
|
|
## Installation
|
|
|
|
### Prerequisites
|
|
|
|
- Python 3.8 or higher
|
|
- pip (Python package installer)
|
|
|
|
### Setup
|
|
|
|
1. **Install dependencies:**
|
|
```bash
|
|
pip install -r requirements.txt
|
|
```
|
|
|
|
2. **Create environment file (optional):**
|
|
```bash
|
|
copy .env.example .env
|
|
```
|
|
Edit `.env` with your configuration.
|
|
|
|
3. **Run the application:**
|
|
```bash
|
|
python app.py
|
|
```
|
|
|
|
4. **Access the application:**
|
|
Open your browser and navigate to:
|
|
- Main page: `http://localhost:8080/`
|
|
- Quiz page: `http://localhost:8080/quiz`
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
project/
|
|
├── app.py # Main Flask application
|
|
├── config.py # Configuration settings
|
|
├── wsgi.py # WSGI entry point for production
|
|
├── requirements.txt # Python dependencies
|
|
├── templates/ # HTML templates
|
|
│ └── index2.html # Quiz page
|
|
├── css/ # Stylesheets
|
|
│ └── styles.css # Main stylesheet
|
|
├── js/ # JavaScript files
|
|
│ └── script.js # Quiz logic and data
|
|
└── images/ # Product images (optional)
|
|
```
|
|
|
|
## Deployment
|
|
|
|
### Using Gunicorn (Production)
|
|
|
|
1. **Install Gunicorn:**
|
|
```bash
|
|
pip install gunicorn
|
|
```
|
|
|
|
2. **Run with Gunicorn:**
|
|
```bash
|
|
gunicorn -w 4 -b 0.0.0.0:8080 wsgi:app
|
|
```
|
|
|
|
### Deployment on Web Panels
|
|
|
|
#### cPanel/Plesk
|
|
1. Upload all files to your hosting directory
|
|
2. Install Python dependencies via terminal or SSH
|
|
3. Configure the web server to use Python WSGI
|
|
4. Set the application entry point to `wsgi:app`
|
|
|
|
#### PythonAnywhere
|
|
1. Upload files or clone from repository
|
|
2. Create a new web app (Flask)
|
|
3. Set WSGI file path to `wsgi.py`
|
|
4. Install requirements in virtual environment
|
|
5. Reload the web app
|
|
|
|
#### Heroku
|
|
1. Create `Procfile`:
|
|
```
|
|
web: gunicorn wsgi:app
|
|
```
|
|
2. Deploy using Git:
|
|
```bash
|
|
git init
|
|
git add .
|
|
git commit -m "Initial commit"
|
|
heroku create
|
|
git push heroku main
|
|
```
|
|
|
|
#### Docker
|
|
1. Create `Dockerfile`:
|
|
```dockerfile
|
|
FROM python:3.11-slim
|
|
WORKDIR /app
|
|
COPY requirements.txt .
|
|
RUN pip install -r requirements.txt
|
|
COPY . .
|
|
CMD ["gunicorn", "-w", "4", "-b", "0.0.0.0:8080", "wsgi:app"]
|
|
```
|
|
2. Build and run:
|
|
```bash
|
|
docker build -t product-finder .
|
|
docker run -p 8080:8080 product-finder
|
|
```
|
|
|
|
## Configuration
|
|
|
|
Edit `config.py` to modify application settings:
|
|
- `DEBUG`: Enable/disable debug mode
|
|
- `SECRET_KEY`: Set a secure secret key for production
|
|
- Add database URLs, API keys, etc.
|
|
|
|
## API Endpoints
|
|
|
|
- `GET /` - Main landing page
|
|
- `GET /quiz` - Product finder quiz
|
|
- `POST /api/save-selection` - Save user selections (for future use)
|
|
- `GET /api/get-products` - Get product data (for future use)
|
|
|
|
## Customization
|
|
|
|
### Adding New Products
|
|
Edit `js/script.js` and add new product entries to the `questionData` object.
|
|
|
|
### Styling
|
|
Modify `css/styles.css` to change colors, layouts, and appearance.
|
|
|
|
### Questions and Logic
|
|
Update the quiz flow in `js/script.js` by modifying the question structure and conditional logic.
|
|
|
|
## Development
|
|
|
|
Run in development mode with auto-reload:
|
|
```bash
|
|
python app.py
|
|
```
|
|
|
|
The application will be available at `http://localhost:8080`
|
|
|
|
## Production Checklist
|
|
|
|
- [ ] Set `DEBUG = False` in config
|
|
- [ ] Use a strong `SECRET_KEY`
|
|
- [ ] Configure proper database (if needed)
|
|
- [ ] Set up SSL/HTTPS
|
|
- [ ] Configure proper logging
|
|
- [ ] Set up error monitoring
|
|
- [ ] Enable CORS if needed
|
|
- [ ] Configure environment variables
|
|
- [ ] Test all routes and functionality
|
|
|
|
## License
|
|
|
|
Proprietary - All rights reserved
|
|
|
|
## Support
|
|
|
|
For issues and questions, contact your development team.
|