Join - Task Management Application

A modern task management application built with Angular frontend and Django REST Framework backend.

🏗️ Architecture

• Frontend: Angular 19.2.x (TypeScript, Angular Material, Angular CDK)
• Backend: Django 5.2.x with Django REST Framework 3.16.x
• API: RESTful API for authentication, tasks, and contacts management

🚀 Deployment Options

Production Deployment with Docker 🐳

For production deployment with Docker and Traefik reverse proxy with HTTPS support:

📖 Documentation:

• Quick Reference Guide - Commands and common operations
• Full Deployment Guide - Complete setup and configuration

🚀 Quick start with HTTPS:

cp .env.example .env
# Edit .env with your configuration

# Deploy (HTTPS enabled by default with Traefik's self-signed certificate)
docker compose up -d --build

# Or use the helper script
./deploy.sh

Access your application at https://localhost

• Frontend: https://localhost
• Backend API: https://localhost/api/
• Django Admin: https://localhost/admin/

Note: Browser will show a security warning (expected for Traefik's default certificate in development)

Development Setup 💻

For local development without Docker, follow the instructions below.

📋 Prerequisites

Before you begin, ensure you have the following installed on your system:

• Node.js (v18.x or higher) and npm (v9.x or higher)
• Python (v3.10 or higher)
• pip (Python package manager)
• Git

Check Your Installations

node --version  # Should be v18.x or higher
npm --version   # Should be v9.x or higher
python3 --version  # Should be v3.10 or higher
pip3 --version

🚀 Setting Up the Development Environment

1. Clone the Repository

git clone https://github.com/pirus99/join.git
cd join

2. Backend Setup (Django REST Framework)

Navigate to Backend Directory

cd backend

Create a Virtual Environment

# On Linux/macOS
python3 -m venv venv
source venv/bin/activate

# On Windows
python -m venv venv
venv\Scripts\activate

Install Python Dependencies

pip install -r requirements.txt

The backend uses the following key packages:

• Django 5.2.8
• djangorestframework 3.16.1
• django-cors-headers 4.9.0

Run Database Migrations

python manage.py migrate

Create a Superuser (Optional)

python manage.py createsuperuser

Follow the prompts to create an admin account for accessing the Django admin panel.

Start the Django Development Server

python manage.py runserver

The backend API will be available at http://localhost:8000/

Important API Endpoints:

• Authentication: http://localhost:8000/api/v1/auth/
• Tasks: http://localhost:8000/api/v1/task/
• Contacts: http://localhost:8000/api/v1/contact/

3. Frontend Setup (Angular)

Open a new terminal window/tab (keep the backend server running).

Navigate to Frontend Directory

cd frontend

Install Node Dependencies

npm install

This will install all required Angular packages including:

• Angular Core & Common modules
• Angular Material & CDK
• RxJS
• And other dependencies

Start the Angular Development Server

npm start
# or
ng serve

The frontend application will be available at http://localhost:4200/

The app will automatically reload when you make changes to the source files.

🔧 Development Workflow

Running Both Servers Simultaneously

For full-stack development, you need both servers running:

1. Terminal 1 - Backend:

   cd backend
   source venv/bin/activate  # On Windows: venv\Scripts\activate
   python manage.py runserver

2. Terminal 2 - Frontend:

   cd frontend
   npm start

3. Open your browser and navigate to http://localhost:4200/

Building the Frontend

Development Build

cd frontend
npm run build -- --configuration development

Production Build

cd frontend
npm run build

Build artifacts will be stored in the frontend/dist/ directory.

🧪 Testing

Backend Tests

cd backend
python manage.py test

Frontend Tests

cd frontend
npm test

📁 Project Structure

join/
├── backend/                    # Django REST Framework backend
│   ├── core/                  # Django project settings
│   ├── contacts_app/          # Contacts management app
│   ├── tasks_app/             # Tasks management app
│   ├── user_auth_app/         # User authentication app
│   ├── manage.py              # Django management script
│   └── requirements.txt       # Python dependencies
│
├── frontend/                   # Angular frontend
│   ├── src/
│   │   ├── app/
│   │   │   ├── features/     # Feature modules (pages)
│   │   │   ├── shared/       # Shared components & services
│   │   │   └── ...
│   │   └── ...
│   ├── package.json           # Node dependencies
│   └── angular.json           # Angular configuration
│
└── README.md                   # This file

🛠️ Angular CLI Commands

Code Scaffolding

Generate a new component:

ng generate component component-name

For a complete list of available schematics:

ng generate --help

Running End-to-End Tests

ng e2e

Note: Angular CLI does not include an e2e testing framework by default. You can choose one that suits your needs.

📚 Additional Resources

• Angular Documentation
• Angular CLI Overview
• Django Documentation
• Django REST Framework

🐛 Troubleshooting

Port Already in Use

If you get a "port already in use" error:

Backend (port 8000):

# Find and kill the process
lsof -ti:8000 | xargs kill -9  # On Linux/macOS
# On Windows, use Task Manager or:
netstat -ano | findstr :8000
taskkill /PID <PID> /F

Frontend (port 4200):

# The Angular dev server will automatically try port 4201 if 4200 is busy
# Or you can specify a different port:
ng serve --port 4201

Python Virtual Environment Issues

If you have issues with the virtual environment:

# Deactivate current environment
deactivate

# Remove the old virtual environment
rm -rf venv

# Create a new one
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt

Node Modules Issues

If you encounter frontend dependency issues:

cd frontend
rm -rf node_modules package-lock.json
npm install

📝 License

This project is for educational purposes.