Django backend

A complete Django-based lead generation system with a multi-step contact form, user authentication, dashboard analytics, and REST API.

Project Overview

This project includes:

• Multi-step contact form with real-time validation
• User authentication system with dashboard
• REST API with Django REST Framework
• Lead scoring algorithm and analytics
• Email notifications for new submissions
• Mobile-responsive design with smooth animations
• Admin dashboard with charts and lead management

Local Development Setup

Sannam Vennam

• Python 3.8+ installed on your system
• Git installed

Step 1: Clone the Repository

git clone https://github.com/KeerthX/wahn_design_website.git
cd wahn_design_website

Step 2: Switch to Development Branch

git checkout django-backend-system

Step 3: Install Pipenv (if not already installed)

# On macOS/Linux
pip install pipenv

# On Windows
pip install pipenv

Step 4: Create Virtual Environment and Install Dependencies

# This will create a virtual environment and install all dependencies
pipenv install

# If Pipfile.lock doesn't exist, install from requirements.txt
pipenv install -r requirements.txt

Step 5: Activate Virtual Environment

pipenv shell

Step 6: Set Up Database

# Create database migrations
python manage.py makemigrations

# Apply migrations to create database tables
python manage.py migrate

# Create a superuser account (optional, for admin access)
python manage.py createsuperuser
# You will be promted for password and username dont forget both. 
#P.s put it somthing like username: admin, password: admin123 (it will be needed to login and check our form data.)
#off course in the production this will change. but for ur localhost. to see its needed dont forget. resett cheyan task anne...(i never done it before)

Step 7: Run Development Server

python manage.py runserver

Your server should now be running at: http://127.0.0.1:8000/

Project Structure

wahn_design_website/
├── freelance/              # Main Django project
│   ├── settings.py            # Django settings
│   ├── urls.py               # Main URL configuration
│   └── wsgi.py               # WSGI configuration
├── ourform/               # Main app for forms and leads
│   ├── models.py             # Database models
│   ├── views.py              # API and page views
│   ├── serializers.py        # REST API serializers
│   ├── urls.py               # App URL patterns
│   └── admin.py              # Admin interface
├── static/                # Frontend assets (YOUR DOMAIN!)
│   ├── css/               # Stylesheets
│   ├── js/                # JavaScript files
│   └── images/            # Images
├── templates/             # HTML templates (YOUR DOMAIN!)
│   ├── index.html            # Homepage
│   ├── ourform/           # Form templates
│   └── registration/      # Auth templates
├── requirements.txt          # Python dependencies
├── Pipfile                   # Pipenv configuration
├── manage.py                 # Django management script
└── .gitignore               # Git ignore rules

Main Areas to Edit

1. Homepage Design

File: templates/index.html

Location: /templates/index.html
What to edit: Hero section, portfolio showcase, navigation

2. Multi-Step Contact Form

File: templates/ourform/contact_form.html

Location: /templates/ourform/contact_form.html
What to edit: Form styling, step indicators, animations
Form has 4 steps:
   - Step 1: Business type selection
   - Step 2: Contact information
   - Step 3: Project details 
   - Step 4: Project description

3. Dashboard Interface

File: templates/ourform/dashboard.html

Location: /templates/ourform/dashboard.html
What to edit:  arrum kannula this is for us.

4. Login Page

File: templates/registration/login.html

Location: /templates/registration/login.html
What to edit: Login form styling, branding
Simple authentication form

CSS Files to Edit

1. Main Stylesheet

File: static/css/styles.css

Location: /static/css/styles.css
Contains: Homepage styles, general layout, navigation
Focus areas:
   - Hero section styling
   - Portfolio grid
   - Navigation design
   - Footer design

2. Form Styles

File: static/css/form-styles.css

Location: /static/css/form-styles.css
Contains: Multi-step form styles, animations, validation states
Focus areas:
   - Step indicators
   - Input field designs
   - Button styles
   - Progress bar
   - Error/success messages
   - Responsive form layout

3. Dashboard Styles

File: static/css/dashboard.css

Location: /static/css/dashboard.css
Contains: Admin dashboard styling, charts, tables
Focus areas:
   - Dashboard layout
   - Chart containers
   - Data tables
   - Statistics cards
   - Sidebar navigation

JavaScript Files

1. Homepage Interactions

File: static/js/app.js

Location: /static/js/app.js
Contains: Homepage animations, portfolio filters
You can enhance: Scroll animations, hover effects

2. Form Handler

File: static/js/form-handler.js

Location: /static/js/form-handler.js
Contains: Multi-step form logic, validation
Don't modify: Core form functionality (backend integration)
You can enhance: Animations, transitions, UI feedback

3. Dashboard Scripts

File: static/js/dashboard.js

Location: /static/js/dashboard.js
Contains: Chart.js integration, dashboard interactions
You can enhance: Chart styling, dashboard animations

What to Avoid Changing(oomban chance inde )

• Form field names/IDs (breaks backend integration)
• JavaScript form logic (handles API calls)
• Template structure for forms (Django requires specific structure)

Development Workflow

Making Changes

1. Edit frontend files in static/ and templates/
2. Refresh browser to see changes (CSS/JS changes are immediate)
3. For HTML template changes: Restart Django server if needed

Testing Your Changes

# Run the development server
python manage.py runserver

# Test the contact form
Visit: http://127.0.0.1:8000/contact/

# Test the dashboard (need to login first)
Visit: http://127.0.0.1:8000/dashboard/

# Test the homepage
Visit: http://127.0.0.1:8000/

Committing Changes

# Check what files you've changed
git status

# Add your changes
git add static/ templates/

# Commit with descriptive message
git commit -m "frontend: Update contact form styling and animations"

# Push to the development branch 
git push origin django-backend-system 

Test responsiveness by resizing browser or using browser dev tools.

Troubleshooting

Common Issues

CSS/JS changes not showing:

# Clear browser cache or use hard refresh
Ctrl + Shift + R (Windows/Linux)
Cmd + Shift + R (Mac)

Form not working:

• Don't change input names or IDs
• Check browser console for JavaScript errors

Server not starting:

# Make sure virtual environment is active
pipenv shell

# Check if all dependencies are installed
pipenv install