4.1 KiB
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
-
Install dependencies:
pip install -r requirements.txt -
Create environment file (optional):
copy .env.example .envEdit
.envwith your configuration. -
Run the application:
python app.py -
Access the application: Open your browser and navigate to:
- Main page:
http://localhost:8080/ - Quiz page:
http://localhost:8080/quiz
- Main page:
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)
-
Install Gunicorn:
pip install gunicorn -
Run with Gunicorn:
gunicorn -w 4 -b 0.0.0.0:8080 wsgi:app
Deployment on Web Panels
cPanel/Plesk
- Upload all files to your hosting directory
- Install Python dependencies via terminal or SSH
- Configure the web server to use Python WSGI
- Set the application entry point to
wsgi:app
PythonAnywhere
- Upload files or clone from repository
- Create a new web app (Flask)
- Set WSGI file path to
wsgi.py - Install requirements in virtual environment
- Reload the web app
Heroku
- Create
Procfile:web: gunicorn wsgi:app - Deploy using Git:
git init git add . git commit -m "Initial commit" heroku create git push heroku main
Docker
- Create
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"] - Build and run:
docker build -t product-finder . docker run -p 8080:8080 product-finder
Configuration
Edit config.py to modify application settings:
DEBUG: Enable/disable debug modeSECRET_KEY: Set a secure secret key for production- Add database URLs, API keys, etc.
API Endpoints
GET /- Main landing pageGET /quiz- Product finder quizPOST /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:
python app.py
The application will be available at http://localhost:8080
Production Checklist
- Set
DEBUG = Falsein 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.