Coding United Commons Project Plan: A Visual Guide

Guiding Principles

Our project plan is built on key pedagogical and management strategies to ensure a supportive and effective learning environment for everyone.

🧩

Project-Based Learning

Learn by doing! Apply concepts directly by building a real-world application from scratch.

🧑‍🤝‍🧑

Collaboration & Teamwork

Develop crucial skills through paired programming, code reviews, and shared project goals.

📈

Gradual Learning Curve

Technologies are introduced sequentially in focused modules to prevent overwhelm.

🎯

Real, Valuable Knowledge

Gain practical, contextualized skills to contribute effectively at each stage.

🛠️

Problem-Solving Focus

Analyze challenges, break them down, and experiment to build resilience.

📊

Visual Project Management

Utilize tools like Kanban boards, Jira, Trello, and more for regular check-ins to track progress and support.

Project Scope & Learning Focus

This project provides a balanced learning experience across different areas of web development. Here's a conceptual breakdown of the learning focus:

Our voted on and chosen tech stack has a relative emphasis on Backend. However, the little donut above me is to illustrate the approximate split. So, you can expect to gain a balanced experience throughout the project and find value no matter the career path :)

Project Phases: The Roadmap

We've built out structured roadmap where, phase by phase, we will build our full-stack web application. Each phase builds upon the last, introducing new skills and concepts.

Phase 1

Environment & Tooling

Setting up a consistent Dockerized environment.

🐳 Docker & Docker Compose
🔧 Git & GitHub
📄 Dockerfile & .gitignore

Phase 2

Django Project Setup

Initializing the backend framework.

🐍 Django MVT Architecture
⚙️ `manage.py` Commands
📝 `settings.py` & App Config

Phase 3

Frontend Stack Setup

Integrating modern frontend tools.

🎨 TailwindCSS via npm
💡 Alpine.js (CDN)
🚀 HTMX (CDN)

Phase 4

Page Development

Building the core website pages.

🏠 Home, About, Projects
📅 Events, Contact
🧱 Models, Views, Templates

Phase 5

Layout, UI & Styling

Polishing the user experience.

📄 `base.html` & Inheritance
📱 Responsive Design
✨ Favicon & Meta Tags

Phase 6

Deployment & DevOps

Taking your application live!

⚙️ `collectstatic`
🔒 Production Settings
☁️ PaaS Deployment (Render, etc.)

Technology Learning Emphasis

This project introduces several key technologies. The radar chart below offers a conceptual view of their learning emphasis and integration points.

Scores (1-5) are mostly conceptual: 1 = Basic Intro (Git Bash, basic HTMX, etc.), 5 = Deep Dive/Core Focus (More emphasis chosen primary stack, i.e., Django).

Foundations & Learning Resources

Before diving into the project phases, we highly recommend exploring these resources. They'll provide you with foundational knowledge of the key technologies we'll be using, making the subsequent phases smoother and more understandable.

🐳 Docker Fundamentals

Get Started with Docker - Official Docker introduction.
Docker Crash Course for Absolute Beginners - by TechWorld with Nana (YouTube).

🔧 Git & GitHub Basics

Git Introduction - W3Schools tutorial.
Git Explained in 100 Seconds - Fireship (YouTube).

🐍 Django Core Concepts

Django Tutorial for Beginners - by Programming with Mosh (YouTube).
Django with HTMX Tutorial - Introduction - by Net Ninja (YouTube, relevant for later phases too).

🚀 HTMX & 💡 Alpine.js Intros

HTMX Tutorial for Beginners - by Net Ninja (YouTube).
Alpine.js Crash Course - by Net Ninja (YouTube).

💾 SQLite Database Basics

SQLite Introduction - Beginners Guide - by Caleb Curry (YouTube).
Django Tutorial - SQLite3 DataBase Tutorial - by Tech With Tim (YouTube, connects SQLite to Django).

🌐 General Web Dev (HTML, CSS, JS)

Basic HTML/CSS Tutorial + Reference Guide - by Cheshire.
1h JavaScript Course for Beginners - by Programming with Mosh (YouTube).

Phase Deep Dives

Phase 1: Environment & Tooling Setup

Objective: Establish a consistent, reproducible Dockerized development environment for all students, minimizing setup issues.

Key Technologies & Tools:

🐳 Docker & Docker Compose: Containerization for consistency.
🔧 Git: Version control for collaboration.
📄 `Dockerfile`: Blueprint for the application image.
⚙️ `docker-compose.yml`: Defines and runs multi-container apps.
🙈 `.gitignore`: Specifies untracked files.
🔑 `.env`: Manages environment variables.

Illustrative `Dockerfile` Snippet:

# Stage 2: Main Python/Django application stage
FROM python:3.11-slim
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

RUN apt-get update && apt-get install -y nodejs # For Tailwind
WORKDIR /app
COPY requirements.txt /app/
RUN pip install --no-cache-dir -r requirements.txt
COPY . /app/
EXPOSE 8000
CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]

Focus: Python base, Node.js for frontend tools, dependency installation, and running the dev server.

Phase 2: Django Project Setup

Objective: Initialize and configure the Django project, understanding its MVT architecture and core components.

Key Concepts & Tasks:

🏛️ MVT Architecture: Model, View, Template.
🚀 `manage.py`: Django's command-line utility.
🏗️ `startproject` & `startapp`: Structuring the project.
⚙️ `settings.py`: Configuring `INSTALLED_APPS`, `TEMPLATES`, `STATICFILES`.
👤 Django Admin: Superuser creation and basic setup.
🔄 Migrations: Initial database schema setup.

`settings.py` Focus (Static & Templates):

# settings.py
INSTALLED_APPS = [..., 'clubapp']
TEMPLATES = [{'DIRS': [BASE_DIR / 'templates'], 'APP_DIRS': True, ...}]
STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / 'static']

Focus: Integrating the new app, defining template locations, and setting up static file handling for development.

Phase 3: TailwindCSS + Alpine.js + HTMX Setup

Objective: Integrate modern frontend tools for styling and client-side interactivity directly within the Django project structure.

Key Technologies & Tasks:

🎨 TailwindCSS: Install via npm inside Docker, initialize config (`tailwind.config.js`), create `input.css`.
📦 `package.json`: Add script for building CSS (`tailwindcss -i ./input.css -o ./static/css/styles.css --watch`).
💡 Alpine.js: Add via CDN in `base.html`.
🚀 HTMX: Add via CDN in `base.html`.
📁 Static Files: Mount `/static/` folder into Docker for compiled CSS.
👁️ Watch Process: Run `npm run build:css` inside Docker.

`package.json` Script Example:

// package.json
"scripts": {
  "build:css": "tailwindcss -i ./input.css -o ./static/css/styles.css --watch"
}

Focus: Setting up the automated build process for TailwindCSS to compile utility classes into a usable stylesheet.

`base.html` CDN Links:

<!-- base.html -->
<link href="/static/css/styles.css" rel="stylesheet">
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://unpkg.com/htmx.org@1.9.x"></script>

Focus: Including compiled Tailwind styles and the necessary JavaScript libraries for Alpine.js and HTMX functionality.

Phase 4: Page Development

Objective: Construct the core pages of the website, applying MVT patterns and integrating frontend tools for styling and interactivity.

Key Pages:

🏠 Home Page
👥 About Us Page
💼 Projects Page (with Model & Admin)
📅 Events Page (with Model & Admin)
✉️ Contact Page (with Django Forms)

Process per Page:

🔗 URL Configuration (`urls.py`)
🧠 View Logic (`views.py`)
📄 Template Creation (HTML, DTL)
🎨 TailwindCSS Styling
✨ HTMX/Alpine.js for Interactivity

Example: Project Model Snippet

# models.py
class Project(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField()
    image = models.ImageField(blank=True)
    # ... other fields ...

Focus: Defining data structures that will be managed via Django Admin and displayed on pages.

Phase 5: Layout, UI, and Styling

Objective: Create a consistent site-wide layout, implement responsive design, and apply cohesive styling using TailwindCSS.

Core Tasks:

📄 `base.html`: Develop master template with Navbar, Footer, and script includes (Tailwind CSS, Alpine.js, HTMX).
🧱 Layout Inheritance: Use `{% extends 'base.html' %}` and `{% block content %}` in child templates.
🎨 Global Styling: Apply Tailwind utility classes for consistent look and feel across all pages.
📱 Responsive Design: Test and ensure usability on various screen sizes (mobile, tablet, desktop).
🖼️ Favicon & Meta Info: Add site icon and essential meta tags for SEO and browser display.

`base.html` Structure Focus:

<!-- base.html -->
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}My Club{% endblock %}</title>
    <link href="/static/css/styles.css" rel="stylesheet">
    <!-- other meta/links -->
</head>
<body>
    <nav>... Navbar ...</nav>
    <main>
        {% block content %}{% endblock %}
    </main>
    <footer>... Footer ...</footer>
    <script defer src="alpine.js_cdn"></script>
    <script src="htmx.org_cdn"></script>
</body>
</html>

Focus: Creating a reusable base structure for all pages, incorporating navigation, content blocks, and essential scripts.

Phase 6: Deployment & DevOps

Objective: Prepare the application for production and deploy it to a cloud platform, ensuring all static files are handled correctly and security best practices are followed.

Key Deployment Steps:

📦 Static Files: Run `python manage.py collectstatic` to gather all static assets. Update `docker-compose.yml` for `collectstatic` volume if needed.
💅 Production CSS: Ensure TailwindCSS is built in production mode (`--minify`).
npx tailwindcss ... -o ./static/css/styles.css --minify
🔒 Environment Variables: Set `DEBUG=False`, configure `ALLOWED_HOSTS`, and use a strong `SECRET_KEY` in a `.env.production` file or platform environment variables.
📜 Documentation: Update `README` with build and deployment instructions.
☁️ Deployment Platform: Choose and deploy to a PaaS like Render, Railway, Fly.io, or a VPS.

Production `settings.py` Considerations:

# settings.py (production adjustments)
import os
DEBUG = os.environ.get('DJANGO_DEBUG', '') != 'False' # Default to True if var not set
SECRET_KEY = os.environ['DJANGO_SECRET_KEY']
ALLOWED_HOSTS = os.environ.get('DJANGO_ALLOWED_HOSTS', 'localhost').split(',')

# Ensure STATIC_ROOT is set for collectstatic
STATIC_ROOT = BASE_DIR / 'staticfiles'

Focus: Using environment variables for sensitive settings, disabling debug mode, specifying allowed hosts, and configuring `STATIC_ROOT` for `collectstatic`.

🌟 Bonus Tasks & Enhancements

Ready for more? These optional tasks allow for deeper exploration and adding advanced features to your application.

🌙 Dark Mode Toggle

Implement using Alpine.js and Tailwind's `dark:` variants.

🔍 Project Search

Add keyword search for projects using HTMX and Django queries.

✍️ Markdown Support

Allow Markdown in descriptions and render as HTML.

📄 Pagination

Add to Project/Event lists for better navigation.

⏳ Loading Indicators

Provide visual feedback for HTMX requests.

🔑 User Authentication

Implement basic signup, login, and logout functionality using Django's auth system.