A complete web application built from scratch to learn Django, web development, and full-stack concepts.
This is NOT just a project - it's a learning resource for understanding how modern web applications work. Everything here is explained so you can understand and build similar apps in the future.
Location: authentication/ folder
What to Study:
models.py- Understand Django's User model and database conceptsforms.py- Learn form validation and custom form classesviews.py- See how to handle registration, login, email sendingurls.py- Understand URL routing (how URLs map to functions)
Key Concepts:
- How passwords are hashed and stored securely
- Email verification and token generation
- User session management
- Form validation on both client and server side
Location: tasks/models.py
What to Study:
- Task model definition (title, description, status, priority, due_date)
- Relationships (ForeignKey - linking tasks to users)
- Model methods (get_status_color, get_priority_color)
- Meta classes for ordering and display
Key Concepts:
- Object-Relational Mapping (ORM) - Django's way of managing databases
- Data types and field validation
- Database migrations (how changes are tracked)
Location: tasks/views.py
What to Study:
@login_requireddecorator - protecting pages from unauthenticated users- QuerySets - filtering database data
- POST vs GET requests
- Redirects and message handling
- CRUD operations (Create, Read, Update, Delete)
Key Concepts:
- Request/Response cycle
- Data filtering and sorting
- User isolation (each user only sees their data)
- Error handling
Location: core/urls.py and tasks/urls.py
What to Study:
- How Django maps URLs to view functions
- Named URL patterns (using
name=parameter) - URL parameters (
<int:pk>for task ID) - App-level vs project-level routing
Key Concepts:
- RESTful URL design
- URL patterns and regex
- Namespace organization
Location: templates/ folder
What to Study:
base.html- Base template inheritance (DRY principle)tasks/task_list.html- Complex template with loops and conditionalstasks/task_form.html- Form rendering and error displays- Template tags:
{% if %},{% for %},{% url %}
Key Concepts:
- Template inheritance (extending base template)
- Template variables and context data
- Conditional rendering
- Forms in templates
- CSRF protection tokens
Location: static/css/style.css
What to Study:
- CSS variables (
:root) for consistent colors - Flexbox and Grid layouts
- Responsive design (@media queries)
- Animations and transitions
- Bootstrap 5 integration
- Custom component styling
Key Concepts:
- CSS specificity
- How to override Bootstrap defaults
- Mobile-first responsive design
- Gradient backgrounds and shadows
- Accessibility (colors, contrast)
Location: All HTML templates
What to Study:
- Grid system (rows and columns)
- Component styling (buttons, cards, forms)
- Utility classes (margins, padding, text alignment)
- Responsive helpers (hiding/showing on mobile)
Key Concepts:
- Pre-built component reuse
- Framework customization
- Responsive web design
myapp/
│
├── 📂 core/ [PROJECT CONFIGURATION]
│ ├── settings.py → Database, installed apps, email config
│ ├── urls.py → Main URL router (entry point)
│ └── wsgi.py → Web server entry point
│
├── 📂 authentication/ [USER AUTH SYSTEM - Study This First!]
│ ├── models.py → User model (extends Django's User)
│ ├── views.py → Register, Login, Password Reset logic
│ ├── forms.py → Form validation for login/register
│ ├── urls.py → Auth URLs (/login, /register, etc)
│ ├── templates/ → Login/Register HTML pages
│ └── migrations/ → Database change history
│
├── 📂 tasks/ [TASK MANAGEMENT SYSTEM - Study Second!]
│ ├── models.py → Task model with fields/methods
│ ├── views.py → Task CRUD operations (Create, Read, Update, Delete)
│ ├── forms.py → Task form validation
│ ├── urls.py → Task URLs (/tasks, /tasks/create, etc)
│ ├── admin.py → Django admin interface
│ ├── templates/ → Task HTML pages
│ └── migrations/ → Database changes
│
├── 📂 static/
│ └── css/
│ └── style.css → Custom CSS styling (study for design!)
│
├── 📂 templates/ [HTML FILES]
│ ├── base.html → Main template (navbar, footer, layout)
│ ├── homepage.html → Landing page
│ └── tasks/ → Task-specific templates
│
├── manage.py → Command-line tool for Django
├── requirements.txt → Python packages needed
└── db.sqlite3 → Database file (auto-created)
- Read:
core/settings.py- Understand what gets configured - Learn: What is Django and why we use it
- Study:
authentication/models.py- Understand database models - Play: Make a simple model with different field types
- Study:
authentication/forms.py- How forms validate data - Learn: Widget attributes and form rendering
- Modify: Change form fields to see what happens
- Practice: Create a custom form validation
- Study:
authentication/views.py- How request/response works - Learn: Decorators like
@login_required - Trace: Follow a registration request from form to database
- Practice: Add a new view function
- Study:
templates/base.html- Template inheritance - Learn: Bootstrap grid system basics
- Experiment:
static/css/style.css- Change colors and layouts - Build: Create a new HTML page from scratch
- Study:
tasks/views.py- All CRUD operations - Learn: QuerySet filtering and ordering
- Practice: Create a new feature (e.g., task search)
- Build: Your own mini-feature
- Learn: Security best practices
- Study: How to optimize queries
- Practice: Add tests
- Build: Deploy to a real server
File: authentication/views.py (Lines 1-60)
# STUDY THIS:
# - How @login_required protects pages
# - How form.is_valid() validates user input
# - How user.is_active controls account status
# - How form.cleaned_data gets validated dataFile: authentication/forms.py
# STUDY THIS:
# - How to inherit from Django's UserCreationForm
# - How to customize form fields with widget attributes
# - How to add CSS classes via Python
# - Form validation methodsFile: tasks/models.py
# STUDY THIS:
# - ForeignKey relationship (Task.user)
# - Model methods that return formatted data
# - Choices for status and priority
# - Meta class for model behaviorFile: tasks/views.py
# STUDY THIS:
# - @login_required decorator
# - Task.objects.filter() - querying filtered data
# - get_object_or_404() - error handling
# - form.save() - saving to database
# - QuerySet methods: filter(), exclude(), order_by()File: templates/base.html
<!-- STUDY THIS: -->
<!-- {% load static %} - loading static files -->
<!-- {% block content %} - template inheritance -->
<!-- {% if user.is_authenticated %} - conditional rendering -->
<!-- {% url 'task_list' %} - URL reversal (dynamic URLs) -->
<!-- CSRF token in forms for security -->File: static/css/style.css
/* STUDY THIS: */
/* :root variables for consistent colors */
/* @media queries for responsive design */
/* Gradient backgrounds and shadows */
/* CSS animations and transitions */
/* How Bootstrap classes work */Goal: Add a new field to tasks (e.g., category)
Learn:
- Add field to
tasks/models.py - Create migration:
python manage.py makemigrations - Update form in
tasks/forms.py - Modify template in
templates/tasks/task_form.html - Update list template to display category
Goal: Search tasks by title
Learn:
- Understand QuerySet
.filter(title__icontains=search_term) - Pass search query from template to view
- Update
tasks/views.pyto filter on search - Add search box to
templates/tasks/task_list.html
Goal: Show user's task statistics
Learn:
- Create a profile view in
authentication/views.py - Query user's tasks:
Task.objects.filter(user=request.user) - Create
templates/authentication/profile.html - Calculate stats: count completed, pending, etc.
Goal: Change app's color scheme
Learn:
- Edit
:rootvariables instatic/css/style.css - Understand color inheritance
- Add custom animations
- Create new component styles
- Why: Handles database, user auth, routing, and templates automatically
- File to Study:
core/settings.py(the "brain" of the app) - Alternative: Flask (simpler but less batteries included)
- Why: Write Python instead of SQL
- File to Study:
tasks/models.py - Concept: Models map to database tables, fields to columns
- Why: Pre-built responsive components
- File to Study: All HTML templates
- Alternative: Tailwind CSS (more customizable)
- Why: Perfect for development
- File:
db.sqlite3(auto-created) - Production Alternative: PostgreSQL
When you click "Create Task", here's what happens:
1. Browser sends POST request with form data
↓
2. Django matches URL in urls.py
↓
3. View function receives request
↓
4. Form validates data (forms.py)
↓
5. Model saves to database (models.py)
↓
6. Template renders response HTML
↓
7. Browser displays page to user
File to trace: tasks/views.py → task_create() function
- Define Model (
models.py) - What data structure looks like - Create Migration (
makemigrations) - Creates SQL instructions - Apply Migration (
migrate) - Executes SQL, creates tables - Query Data (in views) - Get data using ORM
Your database file: db.sqlite3
- Contains all user and task data
- Deleted and recreated during development
- Use manager.py to inspect:
python manage.py shell
- Where: CSRF token in every form
- Why: Prevent unauthorized form submissions
- File: See
{% csrf_token %}in all forms
- How: Passwords stored as hashes, not plain text
- File:
authentication/forms.pyuses UserCreationForm - Django handles:
user.set_password()in the background
- How: ORM uses parameterized queries
- File:
tasks/views.pyuses.filter()not raw SQL - Never do:
Task.objects.raw("SELECT * WHERE id = " + str(id))
- File:
tasks/views.py- Every query filters byuser=request.user - Why: Users can only see their own tasks
| Concept | File to Study | Time to Learn |
|---|---|---|
| Models & Databases | tasks/models.py |
2-3 hours |
| Forms & Validation | authentication/forms.py |
2-3 hours |
| Views & Logic | authentication/views.py |
3-4 hours |
| URL Routing | core/urls.py |
1-2 hours |
| Templates | templates/base.html |
2-3 hours |
| CSS & Responsive Design | static/css/style.css |
3-4 hours |
| Django Admin | tasks/admin.py |
1 hour |
Total Learning Time: ~15-20 hours to understand all concepts
# Create a new Django app
python manage.py startapp appname
# Create migration file
python manage.py makemigrations
# Apply migrations to database
python manage.py migrate
# Open Python shell with Django context
python manage.py shell
# Create superuser (admin account)
python manage.py createsuperuser
# Access admin panel
# Visit: http://127.0.0.1:8000/admin/
# Run tests
python manage.py test
# Format code
python manage.py format
# Check for issues
python manage.py check-
Build Similar Projects:
- Note-taking app
- Blog platform
- Todo list with categories
- Expense tracker
-
Learn Advanced Topics:
- Django REST Framework (building APIs)
- Testing (unit tests, integration tests)
- Authentication (social login, JWT tokens)
- Deployment (Heroku, AWS, DigitalOcean)
-
Explore Related Tech:
- JavaScript/React (frontend frameworks)
- PostgreSQL (production database)
- Redis (caching)
- Docker (containerization)
- Official Django Docs: https://docs.djangoproject.com/
- Bootstrap Docs: https://getbootstrap.com/docs/
- Django for Beginners (Free Book): https://djangoforbeginners.com/
- Mozilla Web Dev Docs: https://developer.mozilla.org/
- Read
core/settings.pyand understand what each setting does - Study
authentication/models.py- understand User relationship - Study
authentication/views.py- trace registration flow - Study
authentication/forms.py- understand validation - Study
tasks/models.py- understand Task model - Study
tasks/views.py- trace create/update/delete flows - Read
templates/base.html- understand template inheritance - Read
templates/tasks/task_list.html- understand loops and conditionals - Study
static/css/style.css- understand styling approach - Do at least 2 of the exercises above
- Add one new feature on your own
This project teaches:
- ✅ How web apps work (request/response)
- ✅ How databases store data (models)
- ✅ How servers process requests (views)
- ✅ How browsers display pages (templates)
- ✅ How to secure applications (auth, CSRF)
- ✅ How to make responsive designs (CSS)
You now understand real-world web development!
Version: 2.0 (Educational Edition)
Last Updated: February 12, 2026
Next Goal: Deploy this app to the internet!
- User Registration with email validation
- Secure Login/Logout
- Password Reset via Email
- Email Confirmation System
- User Profile Management
- Create Tasks: Add new tasks with title, description, priority, and due dates
- Edit Tasks: Modify existing tasks anytime
- Delete Tasks: Remove completed or unwanted tasks
- Task Status Tracking: Mark tasks as Pending, In Progress, or Completed
- Priority Levels: Set Low, Medium, or High priority
- Due Dates: Set deadlines for tasks
- Task Statistics: View total, completed, pending, and high-priority task counts
- Filter & Search: Filter by status and priority
- Professional, modern design
- Responsive layout (mobile, tablet, desktop)
- Beautiful color scheme with gradients
- Font Awesome icons throughout
- Bootstrap 5 components
- Smooth animations and transitions
myapp/
├── core/ # Django project settings
│ ├── settings.py # Project configuration
│ ├── urls.py # URL routing
│ ├── wsgi.py # WSGI configuration
│ └── asgi.py # ASGI configuration
│
├── authentication/ # User authentication app
│ ├── models.py # User-related models
│ ├── views.py # Login, Register, Password Reset views
│ ├── forms.py # Authentication forms
│ ├── urls.py # Auth URLs
│ └── templates/ # Auth templates
│
├── tasks/ # Task management app (NEW)
│ ├── models.py # Task model
│ ├── views.py # Task CRUD views
│ ├── forms.py # Task creation form
│ ├── urls.py # Task URLs
│ ├── admin.py # Django admin configuration
│ └── migrations/ # Database migrations
│
├── static/
│ └── css/
│ └── style.css # Custom styling
│
├── templates/
│ ├── base.html # Base template with navbar/footer
│ ├── homepage.html # Home page
│ ├── authentication/ # Auth templates
│ └── tasks/ # Task templates (NEW)
│ ├── task_list.html # Task dashboard
│ ├── task_form.html # Create/Edit task form
│ └── task_confirm_delete.html
│
├── manage.py # Django management script
├── requirements.txt # Python dependencies
└── db.sqlite3 # SQLite database
- Python 3.8+
- pip (Python package manager)
- Virtual environment (recommended)
cd "c:\Users\EB204_04\Desktop\Task Mgmt System\myapp"python -m venv venv
venv\Scripts\activate # Windows
# or
source venv/bin/activate # Mac/Linuxpip install -r requirements.txtpython manage.py migratepython manage.py createsuperuser
# Follow prompts to create admin accountpython manage.py collectstatic --noinputpython manage.py runserverOpen your browser and go to:
http://127.0.0.1:8000/
- Visit Homepage: Go to
http://127.0.0.1:8000/ - Register: Click "Get Started" or "Register"
- Fill Registration Form:
- Username (unique, no spaces)
- Email (for verification)
- Password (8+ chars, with mix of letters/numbers/symbols)
- Confirm Password
- Verify Email: Check email and click activation link
- Login: Use your credentials to log in
- Access Dashboard: Automatically redirected to task dashboard
- Login: Go to
http://127.0.0.1:8000/→ Click "Login" - Dashboard: View task statistics and all your tasks
- Create Task: Click "Create Task" button
- Enter title (required)
- Add description (optional)
- Set priority (Low/Medium/High)
- Set status (Pending/In Progress/Completed)
- Set due date (optional)
- Manage Tasks:
- Edit: Click edit icon to modify task details
- Delete: Click delete icon to remove task (confirmation required)
- Mark as Complete: Click the circle icon to toggle status
- Filter: Use status and priority dropdowns to filter tasks
- Logout: Click "Logout" in navbar
- Pending: Task hasn't been started yet
- In Progress: Currently working on the task
- Completed: Task is finished
- Low (Green): Non-urgent tasks
- Medium (Yellow): Regular priority tasks
- High (Red): Urgent, important tasks
Task
├── user (ForeignKey to User) - Task owner
├── title (CharField) - Task title
├── description (TextField) - Detailed description
├── status (CharField) - Pending/In Progress/Completed
├── priority (CharField) - Low/Medium/High
├── due_date (DateField) - Optional deadline
├── created_at (DateTimeField) - Creation timestamp
└── updated_at (DateTimeField) - Last modification timestampTo enable password reset emails, add your email credentials to core/settings.py:
EMAIL_HOST_USER = 'your-email@gmail.com'
EMAIL_HOST_PASSWORD = 'your-app-password' # Use App Password for GmailEdit core/settings.py if needed:
DEFAULT_FROM_EMAIL = 'noreply@taskmanager.com'- Create a superuser:
python manage.py createsuperuser - Access admin panel:
http://127.0.0.1:8000/admin/ - Manage tasks, users, and more
| Method | URL | Purpose |
|---|---|---|
| GET | / |
Homepage |
| GET | /register/ |
Register page |
| POST | /register/ |
Submit registration |
| GET | /login/ |
Login page |
| POST | /login/ |
Submit login |
| GET | /logout/ |
Logout |
| GET | /tasks/ |
Task dashboard |
| GET | /tasks/create/ |
Create task form |
| POST | /tasks/create/ |
Submit new task |
| GET | /tasks/<id>/update/ |
Edit task form |
| POST | /tasks/<id>/update/ |
Submit task update |
| GET | /tasks/<id>/delete/ |
Delete confirmation |
| POST | /tasks/<id>/delete/ |
Submit deletion |
| POST | /tasks/<id>/toggle/ |
Toggle task status |
Solution: Run python manage.py makemigrations first
Solution: Run python manage.py collectstatic --noinput
Solution:
- Clear browser cache
- Make sure you're logged in
- Check user permissions
Solution:
- Add email credentials to settings
- For Gmail, use App Password (not regular password)
- Enable "Less secure apps" if needed
Solution: Use different port: python manage.py runserver 8001
- Backend: Django 4.2.5
- Frontend: Bootstrap 5, HTML5, CSS3
- Database: SQLite3
- Icons: Font Awesome 6
- Fonts: Google Fonts (Poppins)
See requirements.txt for full dependencies:
- Django==4.2.5
- asgiref==3.7.2
- sqlparse==0.4.4
- tzdata==2023.3
- ✅ CSRF Protection
- ✅ SQL Injection Prevention
- ✅ XSS Protection
- ✅ Secure Password Hashing
- ✅ User Authentication Required
- ✅ Email Verification
- ✅ Password Reset via Email
- Optimized database queries
- Efficient static file serving
- Responsive design reduces bandwidth
- Caching-ready architecture
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
For production deployment:
- Set
DEBUG = Falsein settings.py - Update
ALLOWED_HOSTSwith your domain - Use a production database (PostgreSQL recommended)
- Set up proper email backend
- Use HTTPS
- Set up proper logging
- Use a production WSGI server (Gunicorn)
Potential features for future versions:
- Task categories/tags
- Recurring tasks
- Task reminders/notifications
- Task sharing/collaboration
- Analytics dashboard
- Dark mode
- Mobile app
- API for external integrations
If you encounter issues:
- Check the console for error messages
- Verify all dependencies are installed
- Ensure database migrations are applied
- Check browser console (F12) for frontend errors
- Review Django logs in terminal
This project is provided as-is for educational purposes.
Built with Django, Bootstrap 5, and Font Awesome. Based on Django Authentication Starter template.
- Install requirements:
pip install -r requirements.txt - Run migrations:
python manage.py migrate - Create superuser:
python manage.py createsuperuser - Collect static:
python manage.py collectstatic --noinput - Run server:
python manage.py runserver - Visit:
http://127.0.0.1:8000/ - Register new user
- Create first task
- Test filtering and editing
Status: ✅ Ready for Production Submission
Last Updated: February 12, 2026
Version: 2.0 (Task Management Added) ├── urls.py └── views.py
Important files and directories in the authentication app:
- `forms.py`: This file contains the forms for UserRegistrationForm. UserRegistrationForm is a custom form that inherits from Django's built-in UserCreationForm.
- `urls.py`: This file contains the URL patterns for the authentication views.
- `views.py`: This file contains the views for user authentication features.
### The Core
The core directory contains the project settings and URL configurations. The following is the directory structure of the core directory:
```bash
core
├── __init__.py
├── asgi.py
├── settings.py
├── urls.py
└── wsgi.py
Important files and directories inside the core directory:
settings.py: This file contains the project settings, including authentication settings.urls.py: This file contains the URL patterns for the authentication views.
The templates directory contains the HTML templates for the authentication views. The following is the directory structure of the templates directory:
Note: The HTML contains skeleton code for the views. You can customize the HTML to suit your needs.
templates
├── authentication
│ ├── email_activation
│ │ ├── activate_email_message.html
│ │ ├── activation_successful.html
│ │ ├── activation_unsucessful.html
│ │ └── email_sent.html
│ ├── login.html
│ ├── password_reset.html
│ ├── password_reset_complete.html
│ ├── password_reset_confirm.html
│ ├── password_reset_done.html
│ └── register.html
└── homepage.htmlImportant files and directories inside the templates directory:
authentication/: This directory contains the HTML templates for the authentication views.homepage.html: This file contains the HTML template for the homepage. This is where the user will be redirected after logging in.authentication/login.html: This file contains the HTML template for the login view.authentication/password_reset.html: This file contains the HTML template for the password reset view.authentication/password_reset_complete.html: This file contains the HTML template for the password reset complete view when the password reset is successfulauthentication/password_reset_confirm.html: This file contains the HTML template for the password reset confirm view when the user clicks the link in the email. This containes the form for the user to enter the new password.authentication/password_reset_done.html: This file contains the HTML template for the password reset done view. This is the page that the user will be redirected to after the password reset is successful.authentication/register.html: This file contains the HTML template for the user registration view.authentication/email_activation/: This directory contains the HTML templates for the email activation views.authentication/email_activation/activate_email_message.html: This file contains the HTML template for the email message sent to users for email activation.authentication/email_activation/activation_successful.html: This file contains the HTML template for the email activation successful view.authentication/email_activation/activation_unsuccessful.html: This file contains the HTML template for the email activation unsuccessful view.authentication/email_activation/email_sent.html: This file contains the HTML template for the email sent view.
You can use this project as:
- Starter file for your own Django web applications
- Copy the authentication app into your existing Django project
To use this project as a starter project for your own Django web applications, follow these steps:
-
Clone the repository:
git clone https://github.com/johnmathewdino/init_auth_django.git
-
Navigate to the project directory:
cd init_auth_django -
Create a virtual environment and activate it:
python -m venv venv source venv/bin/activate # On Windows, use `venv\Scripts\activate`
-
Install project dependencies:
pip install -r requirements.txt
-
Set up the email backend (see instructions below).
-
Apply database migrations:
python manage.py migrate
-
Create a superuser to access the Django admin panel:
python manage.py createsuperuser
-
Start the development server:
python manage.py runserver
-
Access the admin panel at
http://localhost:8000/admin/and log in with your superuser credentials.
To copy the authentication app into your existing Django project, follow these steps:
- Copy the
authenticationdirectory into your Django project directory. - Copy the
templatesdirectory into your Django project directory. - Add
authenticationto theINSTALLED_APPSlist in your project'ssettings.pyfile.
INSTALLED_APPS = [
...
'authentication',
...
]- Add the following to your project's
settings.pyfile:
LOGIN_URL = "login"
LOGIN_REDIRECT_URL = "homepage"
LOGOUT_REDIRECT_URL = "login"- Add the following to your project's
urls.pyfile:
from django.urls import path, include
urlpatterns = [
...
path('authentication/', include('authentication.urls')),
...
]The Email Backend will let you send emails to users for email confirmation, password reset, etc. To set up the email backend, follow these steps:
-
Click on Security
-
Set up your 2-Step Verification
-
Click on App Passwords
-
Input an App Name and click on Create
-
Copy the generated password
-
Make sure you have to following in your settings.py file
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend' EMAIL_HOST = 'smtp.gmail.com' EMAIL_PORT = 587 EMAIL_USE_TLS = True EMAIL_USE_SSL = False EMAIL_HOST_USER = '' EMAIL_HOST_PASSWORD = ''
-
Replace EMAIL_HOST_USER with your email address
-
Replace EMAIL_HOST_PASSWORD with the app password you generated
Contributions to this project are welcome! Feel free to submit bug reports, feature requests, or pull requests.