A Flask web application allowing multiple users to collaborate on writing scenarios for different episodes of an educational mobile app. Fully localized in Arabic with RTL support.
- User login (with hashed passwords).
- Admin panel (
/admin) for managing Users and Episodes (requires login as 'admin' user). - Dashboard displaying all episodes, highlighting assigned ones.
- Episode page with separate, toggleable View/Edit sections for 'Plan' and 'Scenario'.
- Markdown support for Plan and Scenario content.
- Block-based commenting on the Scenario section.
- Ability for users/admins to assign users to episodes.
- Ability for users to unassign themselves.
- Ability for comment authors and admins to delete comments.
- Ability for assigned users and admins to delete episodes (from dashboard or admin panel).
- Server-side PDF export for Plan and Scenario content.
- Arabic interface with RTL layout.
collaborative-scenario-writer/
├── app.py # Main Flask application file
├── models.py # Database models (SQLAlchemy)
├── requirements.txt # Python dependencies
├── README.md # This file
├── .env # Optional: For environment variables (e.g., SECRET_KEY) - *Create this file*
├── instance/ # Folder created automatically by Flask/SQLAlchemy for the database
│ └── app.db # SQLite database file (created automatically)
├── static/
│ └── css/
│ └── style.css # Optional: Custom CSS
│ └── js/
│ └── script.js # Frontend JavaScript
└── templates/
├── base.html # Base HTML template
├── login.html # Login page
├── dashboard.html # User dashboard
└── episode.html # Episode editing page
-
Prerequisites (for PDF Export):
- Install WeasyPrint system dependencies. This varies by OS:
- Debian/Ubuntu:
sudo apt-get update && sudo apt-get install libpango-1.0-0 libcairo2 libpangoft2-1.0-0 libgdk-pixbuf2.0-0 libffi-dev shared-mime-info - macOS (Homebrew):
brew install pango cairo libffi gdk-pixbuf - Windows: See WeasyPrint documentation for installing GTK+ dependencies.
- Debian/Ubuntu:
- Install WeasyPrint system dependencies. This varies by OS:
-
Clone the Repository:
git clone <your-repository-url> # Or download the files cd collaborative-scenario-writer
-
Create a Virtual Environment:
python -m venv venv # Activate: # Windows: .\venv\Scripts\activate # macOS/Linux: source venv/bin/activate
-
Install Python Dependencies:
pip install -r requirements.txt
-
Create a
.envfile: (Optional but recommended forSECRET_KEY) Create a file named.envin the project root directory and add a secret key:SECRET_KEY='a_very_strong_and_random_secret_key_please_change_me' -
Initialize/Recreate the Database: (Important: If you previously had an
instance/app.dbfile, delete it first to apply new seeding/model changes). Run the following command in your terminal (make sure your virtual environment is active):flask create-db
This will create the
instance/app.dbSQLite database file, create the necessary tables, and seed the initial users (admin,ahmed_a,ahmed_s,hakim,jawhar) with hashed passwords.
- Make sure your virtual environment is activated.
- Run the Flask development server:
flask run # Or: python app.py - Access the Application: Open
http://127.0.0.1:5000. - Login:
- Admin:
admin/adminpassword - Normal Users: e.g.,
ahmed_a/ahmed_a2023
- Admin:
- Access Admin Panel: Log in as
adminand go tohttp://127.0.0.1:5000/admin.
- Authentication: Uses Flask-Login with password hashing (pbkdf2:sha256).
- Authorization: Basic admin check via
is_adminflag on User model. Episode/comment actions check assignment or ownership. - Admin: Uses Flask-Admin with basic customization and access control.
- PDF Export: Uses WeasyPrint server-side. Requires system dependencies. PDF styling is basic and defined in
app.py. - Frontend: Uses Tailwind CSS (via CDN), Alpine.js (via CDN), Marked.js (via CDN), custom JavaScript (
static/js/script.js). - Language/Direction: Set to Arabic / RTL. Styling uses Tailwind's RTL modifiers where possible, with some CSS overrides.