Workbox (https://workbox-revamped.vercel.app/)

A simple project management web application designed to streamline workspace and task management, built with Flask PostgreSQL, Jinja2, and TailwindCSS. Workbox prioritizes security by aligning with the OWASP Top 10 security guidelines.

Table Of Contents

• Project Structure
• Tech Stack
• Installation
• Notes

Project Structure

This project is structured as a monorepo and includes three main directories:

• src/: Contains the source code and logic for the application such as app configs, controllers, models, routes, utils, and the flask app initializer factory.
• static/: Contains the static assets of the application such as the Tailwind CSS build output, static images used throughout the site, and a storage directory for files uploaded by users.
• templates/: Contains the HTML pages built with Jinja2 and styled with Tailwind CSS. Each template provides the front-end layout and structure for various views to render dynamic content based on user interaction and roles.
  
  

├── src/
│ ├── configs/ ──── Configuration settings and environment-specific configs
│ ├── controllers/ ──── Business logic, handling requests and responses
│ ├── db_seed/ ──── Database seeding scripts and initial data
│ ├── models/ ──── Database models and schema definitions (SQLAlchemy)
│ ├── routes/ ──── Route handlers, connecting endpoints to controllers
│ ├── utils/ ──── Utility functions (helpers, validation, security)
│ ├── init.py ──── Factory for initializing the Flask app
│ └── styles.css ──── # Input file for Tailwind CSS styles
├── static/
│ ├── css/ ──── # Compiled Tailwind CSS output for styling
│ ├── images/ ──── # Static images for the site
│ └── upload/ ──── # Directory for user-uploaded files
├── templates/ ──── # Jinja2 templates for HTML pages, styled with TailwindCSS
│ ├── (...).html
│ └── base.html ──── # Base layout template for consistent site structure
├── README.md
├── requirements.txt ──── # List of Python dependencies
├── package.json
├── vercel.json ──── # Configuration file for Vercel deployment
└── .env

Tech Stack

• Flask: Serves as the core framework for building the web application, managing HTTP requests, routing, and integrating extensions for security and form validation. Key libraries include Talisman for security headers, Principal for role-based access control, and WTForms for form management.
• PostgreSQL: A powerful, open-source relational database used to store and manage data securely and efficiently. Integrated with Flask using SQLAlchemy, it allows for seamless data handling and structured querying across application components.
• Jinja2: A templating engine for Python, used with Flask to generate dynamic HTML content. Jinja2 enables separation of the application’s logic from its presentation, making it easy to render data-driven views for users.
• Tailwind CSS: A utility-first CSS framework that provides flexibility and ease of use in designing responsive and modern user interfaces. Tailwind CSS is used in conjunction with Jinja2 to create consistent, responsive, and visually appealing layouts across the application.

Installation

Prerequisites

Make sure you have the following installed:

• Python (v3.11 or higher)
• Node.js (LTS)

Clone the Repository

git clone https://github.com/falarion08/Workbox.git
cd Workbox

Install Dependencies

In Python, without a virtual environment, the dependencies will be installed globally into your machine. To avoid this, open CLI, and install the virtualenv package to create a virtual environment.

pip install virtualenv
python -m virtualenv .venv

After creating a virtual environment, we can access it via CLI again by running the .venv activate script and then we can install the dependencies in the virtual environment by running the following commands:

.venv/Scripts/activate
pip install -r requirements.txt

Now that you have the Python dependencies installed, in a separate terminal, we can install the npm dependencies for Tailwind CSS by running this command:

npm install

Environment Variables

Before proceeding with starting the application, the application uses .env to store URLs, secret keys, and other variables. The required variables in your .env file are as follows:

DATABASE_URL = your_postgresql_db_url
MAX_IMAGE_SIZE = your_preferred_max_image_size
MAX_FILE_UPLOAD_SIZE = your_preferred_max_upload_size
FOLDER_UPLOAD = "static/upload/"
RECAPTCHA_PRIVATE_KEY = your_google_recaptcha_private_key
RECAPTCHA_PUBLIC_KEY = your_google_recaptcha_public_key
SECRET_KEY = your_secure_secret_key

Running the Application

Before running the application, ensure that you have a .env file with the environment variables from the previous section. If you do, you can start the application by running the following commands in the two terminals from earlier:

On the terminal that isn't using the virtual environment:

npm run build

On the terminal using the virtual environment:

python app.py

Alternatively, if you've already built the Tailwind CSS output file, and don't plan on changing any styles, then you do not need to build it with a separate terminal and can just use the virtual environment terminal to run the application directly.

Notes

Dummy Users: You can login to pre-existing accounts by taking a look into the seed.py file in src/db_seed for the user details.

Creating a Workspace: Use the admin account to create a workspace. Current version does not support non-admin workspace creation.

Task File Upload: This feature might be broken.

Development Website URL: http://localhost:5000/

The website is live on: https://workbox-revamped.vercel.app/ (deployed from a forked repo)