COMSATS University Islamabad

Vehari Campus

● ● ●

📱 INSTAGRAM
Social Media Application
Software Requirements Specification & Project Report

Course Software Construction &

Development

Submitted To Mam Ambreen Kouser

Submitted By Amna Shakeel (FA23-BSE-117)

Maida Amjad (FA23-BSE-128)

Date 07 March 2026

Tech Stack Django · [Link] · SQLite

Assignment 01 — Software Requirements & Design

Instagram App — SRS & Project Report | COMSATS University Islamabad, Vehari Campus

Table of Contents
TOC \h \o "1-3"

Instagram Project Report | Amna Shakeel & Maida Amjad | COMSATS Vehari
Instagram App — SRS & Project Report | COMSATS University Islamabad, Vehari Campus

1. Project Overview

1.1 Introduction
Instagram is a photo and video sharing social networking service that enables users to upload, share,
and interact with media content. This report documents the Software Requirements Specification
(SRS), system design diagrams, implementation details, refactoring analysis, UI screenshots, and test
cases for a Django/React-based clone of the Instagram application.

1.2 Project Scope

The application replicates the core Instagram experience including:
• User registration, authentication, and authorization
• User profile creation and editing
• Post creation, viewing, and deletion
• A personalized news feed from followed users
• Like and comment interaction on posts
• Follow and unfollow functionality between users
• Username-based search with partial keyword support
• Instagram Stories — 24-hour expiring photo and video stories with viewer tracking

1.3 Tech Stack

Frontend Backend Database Tools

HTML, CSS, Python, Django SQLite (Development) StarUML, VS Code

JavaScript Bootstrap, Framework Django PostgreSQL Git, Postman
[Link] REST Framework (Production)

Instagram Project Report | Amna Shakeel & Maida Amjad | COMSATS Vehari
Instagram App — SRS & Project Report | COMSATS University Islamabad, Vehari Campus

2. Software Requirements Specification (SRS)

2.1 Purpose
This SRS document defines the functional and non-functional requirements for the Instagram Clone
application. It serves as the foundation for the design, development, and testing phases of the project.

2.2 System Overview

The system is a web-based social media platform. Users interact with the application through a [Link]
frontend that communicates with a Django REST API backend. Data is persisted in an SQLite
database. The architecture follows the MVC/MVT pattern.

2.3 Module 1: User Authentication & Authorization

Functional vs Non-Functional Requirements
Functional Requirements Non-Functional Requirements

✔ Users can register with username, email, and ⚡ Passwords hashed with bcrypt / PBKDF2
password secure algorithm

✔ Input fields are validated before registration ⚡ Authentication response time must not exceed
2 seconds

✔ Registered users can log in with valid ⚡ System must be horizontally scalable for
credentials concurrent users

✔ Users can log out securely; session is ⚡ Login tokens expire after a configurable idle
terminated timeout

✔ Unauthorized users are blocked from ⚡ Brute-force login attempts are rate-limited
protected pages

2.4 Module 2: User Profile

Functional vs Non-Functional Requirements
Functional Requirements Non-Functional Requirements

✔ Users can create and edit their profile ⚡ Profile pages load within 3 seconds
information

✔ Profile displays picture, bio, and post count ⚡ Profile images optimized (compressed / CDN-
served)

✔ Users can view any other user's public profile ⚡ UI is fully responsive across mobile and
desktop

✔ Profile shows follower and following counts ⚡ Profile data cached for 60 seconds to reduce

Instagram Project Report | Amna Shakeel & Maida Amjad | COMSATS Vehari
Instagram App — SRS & Project Report | COMSATS University Islamabad, Vehari Campus

DB load

2.5 Module 3: Post Management

Functional vs Non-Functional Requirements
Functional Requirements Non-Functional Requirements

✔ Users can upload image posts with captions ⚡ Uploaded image files must not exceed 10 MB

✔ Users can delete their own posts only ⚡ Post upload process must complete within 5
seconds

✔ Posts displayed in reverse chronological order ⚡ Data integrity enforced via DB transactions

✔ Post creation date and time are stored and ⚡ Images stored on file system / object storage
shown

2.6 Module 4: News Feed

Functional Requirements Non-Functional Requirements

✔ Feed displays posts from all followed users ⚡ Feed loading time must not exceed 3 seconds

✔ Feed refreshes automatically after a new post ⚡ Feed queries paginated to support growing
is created post volume

2.7 Module 5: Like & Comment

Functional Requirements Non-Functional Requirements

✔ Users can like or unlike any post ⚡ Like/unlike action updates within 1 second

✔ Users can add comments to any post ⚡ Comment length limited to 500 characters

✔ Users can delete only their own comments ⚡ Like counts are consistent across concurrent
sessions

2.8 Module 6: Follow / Unfollow

Functional Requirements Non-Functional Requirements

✔ Users can follow or unfollow any other user ⚡ Follow/unfollow actions process within 2
seconds

✔ Follower and following counts are always ⚡ Database enforces uniqueness constraints on
displayed follow pairs

✔ System prevents a user from following

Instagram Project Report | Amna Shakeel & Maida Amjad | COMSATS Vehari
Instagram App — SRS & Project Report | COMSATS University Islamabad, Vehari Campus

themselves

2.9 Module 7: Search

Functional Requirements Non-Functional Requirements

✔ Users can search for other users by username ⚡ Search uses indexed DB fields for O(log n)
lookup

✔ Matching profiles are returned and displayed ⚡ Search results displayed within 2 seconds

✔ Partial keyword / prefix search is supported

2.10 Module 8: Instagram Stories

Functional vs Non-Functional Requirements
Functional Requirements Non-Functional Requirements

✔ Users can create a story by uploading a photo ⚡ Story media upload must complete within 5
or short video seconds

✔ Stories are automatically deleted after 24 ⚡ Story expiry runs via a scheduled background
hours job (e.g. Celery)

✔ Users can view active stories from followed ⚡ Story viewer list updates in near real-time (< 2
users in the story bar seconds)

✔ Story owner can see a list of viewers for their ⚡ Story video length limited to 15 seconds per
story clip

✔ Users can reply to a story which is sent as a ⚡ Story media files stored on object storage (S3 /
direct message local FS)

✔ Users can delete their own story at any time ⚡ Story bar loads within 2 seconds on page open

✔ Users can add text overlays and stickers to ⚡ Story viewer is full-screen responsive on all
stories device sizes

✔ Muted users' stories are hidden from the story ⚡ System enforces max story count (e.g. 30
bar active stories per user)

Instagram Project Report | Amna Shakeel & Maida Amjad | COMSATS Vehari
Instagram App — SRS & Project Report | COMSATS University Islamabad, Vehari Campus

3. System Design Diagrams

The following diagrams were created using StarUML and describe the structure and behaviour of the
Instagram application. Attach the actual exported diagram images from StarUML in the spaces
indicated.

3.1 Use-Case Diagram

The Use-Case Diagram shows the interactions between the system actors (Guest, Registered User,
Admin) and the core use cases of the Instagram application.
📸 Screenshot: Use-Case Diagram (StarUML export)
[Attach actual screenshot of the Use-Case Diagram (StarUML export) in the running application here]

┌────────────────────────────────────────────────────────────┐
│ USE-CASE ACTORS & USE-CASES OVERVIEW │
├────────────────────────────────────────────────────────────┤
│ Actors: Guest User | Registered User | Admin │
│ │
│ Guest: Register | Login │
│ Registered: View Feed | Create Post | Delete Post │
│ Like / Unlike | Comment / Delete Comment │
│ Follow / Unfollow | Search Users │
│ View Profile | Edit Profile | Logout │
│ Create Story | View Story | Delete Story │
│ Reply to Story | View Story Viewers │
│ Admin: Manage Users | Delete Posts | View Reports│
└────────────────────────────────────────────────────────────┘

3.2 Sequence Diagrams

3.2.1 Login / Register Sequence
Illustrates the message flow between the Client (React), Django View, and Database during login and
registration.
📸 Screenshot: Login/Register Sequence Diagram
[Attach actual screenshot of the Login/Register Sequence Diagram in the running application here]
┌────────────────────────────────────────────────────────────┐
│ SEQUENCE: User Registration │
├────────────────────────────────────────────────────────────┤
│ Client Django View Database │
│ | | | │
│ |-- POST /register->| | │
│ | |-- validate input | │
│ | |-- hash password | │
│ | |-- INSERT User ----->| │
│ | |<-- user saved ------| │
│ |<-- 201 Created --| | │
└────────────────────────────────────────────────────────────┘

Instagram Project Report | Amna Shakeel & Maida Amjad | COMSATS Vehari
Instagram App — SRS & Project Report | COMSATS University Islamabad, Vehari Campus
3.2.2 Like / Comment / Delete Comment Sequence
📸 Screenshot: Like/Comment/Delete Comment Sequence Diagram
[Attach actual screenshot of the Like/Comment/Delete Comment Sequence Diagram in the running application
here]
┌────────────────────────────────────────────────────────────┐
│ SEQUENCE: Like a Post │
├────────────────────────────────────────────────────────────┤
│ Client Django View Database │
│ | | | │
│ |-- POST /like/7 ->| | │
│ | |-- check auth | │
│ | |-- INSERT Like ----->| │
│ | |<-- like saved ------| │
│ |<-- 200 {count} --| | │
└────────────────────────────────────────────────────────────┘

3.2.3 Create / Delete Post Sequence

📸 Screenshot: Create/Delete Post Sequence Diagram
[Attach actual screenshot of the Create/Delete Post Sequence Diagram in the running application here]
┌────────────────────────────────────────────────────────────┐
│ SEQUENCE: Create Post │
├────────────────────────────────────────────────────────────┤
│ Client Django View Database / Storage │
│ | | | │
│ |-- POST /posts ->| | │
│ | (image+caption) | | │
│ | |-- save image ------>| │
│ | |-- INSERT Post ----->| │
│ |<-- 201 {post} --| | │
└────────────────────────────────────────────────────────────┘

3.2.4 Follow / Unfollow Sequence

📸 Screenshot: Follow/Unfollow Sequence Diagram
[Attach actual screenshot of the Follow/Unfollow Sequence Diagram in the running application here]

3.2.5 Search & View Profile Sequence

📸 Screenshot: Search & View Profile Sequence Diagram
[Attach actual screenshot of the Search & View Profile Sequence Diagram in the running application here]

3.2.6 Instagram Stories Sequence

Illustrates the create story, view story, and 24-hour expiry flow.
📸 Screenshot: Instagram Stories Sequence Diagram
[Attach actual screenshot of the Instagram Stories Sequence Diagram in the running application here]
┌────────────────────────────────────────────────────────────┐
│ SEQUENCE: Create & View Story │
├────────────────────────────────────────────────────────────┤
│ Client Django View Database / Storage Scheduler│
│ | | | |│
│ |-- POST /story ->| | |│
│ | (media+expiry) | | |│
│ | |-- save media ------>| |│

Instagram Project Report | Amna Shakeel & Maida Amjad | COMSATS Vehari
Instagram App — SRS & Project Report | COMSATS University Islamabad, Vehari Campus
│ | |-- INSERT Story ---->| |│
│ | |-- schedule expiry ->| |│
│ |<-- 201 {story} --| | |│
│ | | | |│
│ | [24hrs later] | | expire_stories()|│
│ | |<-- trigger --------|<-----------------|│
│ | |-- DELETE Story ---->| |│
└────────────────────────────────────────────────────────────┘

3.3 Data Flow Diagrams (DFD)

3.3.1 DFD Level 0 – Context Diagram
Shows the system as a single process interacting with external entities.
📸 Screenshot: DFD Level 0 (StarUML export)
[Attach actual screenshot of the DFD Level 0 (StarUML export) in the running application here]
┌────────────────────────────────────────────────────────────┐
│ DFD LEVEL 0 — Context Diagram │
├────────────────────────────────────────────────────────────┤
│ │
│ [User] -----> (Instagram System) -----> [User] │
│ | │
│ [Administrator] │
│ │
│ Inputs: Credentials, Posts, Likes, Comments │
│ Outputs: Feed, Profile, Search Results │
└────────────────────────────────────────────────────────────┘

3.3.2 DFD Level 1 – System Breakdown

Decomposes the system into its main sub-processes: Authentication, Profile, Posts, Feed, Interactions,
and Search.
📸 Screenshot: DFD Level 1 (StarUML export)
[Attach actual screenshot of the DFD Level 1 (StarUML export) in the running application here]

3.4 Activity Diagram

The Activity Diagram models the workflow of key user journeys — from login through post creation,
interactions, and logout.
📸 Screenshot: Activity Diagram (StarUML export)
[Attach actual screenshot of the Activity Diagram (StarUML export) in the running application here]
┌────────────────────────────────────────────────────────────┐
│ ACTIVITY DIAGRAM: Post Creation Flow │
├────────────────────────────────────────────────────────────┤
│ [Start] --> Login --> View Feed │
│ --> Click 'Create Post' │
│ --> Select Image --> Add Caption │
│ --> Submit --> [Validate Input] │
│ |-- Valid --> Save Post --> Show Feed │
│ |-- Invalid --> Show Error --> Retry │
│ --> [End] │
└────────────────────────────────────────────────────────────┘

Instagram Project Report | Amna Shakeel & Maida Amjad | COMSATS Vehari
Instagram App — SRS & Project Report | COMSATS University Islamabad, Vehari Campus

4. Code Refactoring

4.1 Overview
Refactoring improves code readability, maintainability, and performance without changing observable
behaviour. The following table documents the refactoring changes applied to the Instagram project
codebase.

4.2 Refactoring Log

Module Before Refactoring After Refactoring Technique

Authentication authenticate() had 80+ lines Extracted into: Extract Function

mixing validation, hashing, validate_credentials(),
and DB logic in one function hash_password(), and
create_session() helper
functions

Post Model Post model had hard-coded Moved constraints to model- Move Field /
image size limit and caption level validators: Replace Magic
length scattered in multiple validate_image_size(), Number
views validate_caption()

Feed Query Feed view used raw SQL Replaced with Django ORM Replace Raw
string with repeated joins queryset with select_related() SQL / ORM
across four tables and prefetch_related() for Query
efficiency Optimization

Like Toggle like_view() had nested if/else Refactored using Replace

30 lines deep checking get_or_create() + boolean Conditional with
existence and toggling toggle with atomic transaction Polymorphism /
wrapper Simplify
Conditional

Search View search() re-implemented user Deleted duplicate; now Remove

lookup logic already present in delegates to Duplicate
UserQuerySet [Link](query) Code / Extract
custom manager method Method

React PostCard component Split into PostCard, Decompose

Components rendered like count, comment LikeButton, CommentSection, Component /
count, and actions inline (250 and PostActions sub- Single
lines) components Responsibility

Error Handling All views had individual Created @api_error_handler Introduce

try/except blocks returning decorator that normalizes all Parameter
inconsistent error JSON error responses Object / DRY
shapes Principle

Follow Logic Follow and Unfollow were two Merged into a single Consolidate
separate endpoints PATCH /follow/{id}/ endpoint Duplicate
duplicating user-lookup and with toggle semantics Conditional
count-update logic Fragments

Instagram Project Report | Amna Shakeel & Maida Amjad | COMSATS Vehari
Instagram App — SRS & Project Report | COMSATS University Islamabad, Vehari Campus

4.3 Before/After Code Example

Like Toggle — Before Refactoring
┌────────────────────────────────────────────────────────────┐
│ BEFORE: like_view() — verbose nested conditional │
├────────────────────────────────────────────────────────────┤
│ def like_view(request, post_id): │
│ post = [Link](id=post_id) │
│ existing = [Link]( │
│ user=[Link], post=post).first() │
│ if existing: │
│ [Link]() │
│ liked = False │
│ else: │
│ [Link](user=[Link], post=post) │
│ liked = True │
│ count = [Link](post=post).count() │
│ return JsonResponse({'liked': liked, 'count': count}) │
└────────────────────────────────────────────────────────────┘

Like Toggle — After Refactoring

┌────────────────────────────────────────────────────────────┐
│ AFTER: Atomic toggle using get_or_create() │
├────────────────────────────────────────────────────────────┤
│ @api_error_handler │
│ @[Link] │
│ def like_view(request, post_id): │
│ post = get_object_or_404(Post, id=post_id) │
│ like, created = [Link].get_or_create( │
│ user=[Link], post=post) │
│ if not created: │
│ [Link]() │
│ return JsonResponse({ │
│ 'liked': created, │
│ 'count': [Link]() │
│ }) │
└────────────────────────────────────────────────────────────┘

Instagram Project Report | Amna Shakeel & Maida Amjad | COMSATS Vehari
Instagram App — SRS & Project Report | COMSATS University Islamabad, Vehari Campus

5. Application Screenshots
The following screenshots capture each functional module of the running Instagram application. Attach
the actual application screenshots in the designated spaces.

5.1 User Authentication

5.1.1 Registration Page
📸 Screenshot: User Registration Page
[Attach actual screenshot of the User Registration Page in the running application here]

5.1.2 Login Page

📸 Screenshot: User Login Page
[Attach actual screenshot of the User Login Page in the running application here]

5.2 User Profile

5.2.1 Own Profile Page
📸 Screenshot: User Profile — Own Profile View
[Attach actual screenshot of the User Profile — Own Profile View in the running application here]

5.2.2 Edit Profile Page

📸 Screenshot: Edit Profile Page
[Attach actual screenshot of the Edit Profile Page in the running application here]

5.2.3 Other User's Profile

📸 Screenshot: Other User's Profile View with Follow Button
[Attach actual screenshot of the Other User's Profile View with Follow Button in the running application here]

5.3 Post Management

5.3.1 Create Post
📸 Screenshot: Create Post Page — Image Upload and Caption
[Attach actual screenshot of the Create Post Page — Image Upload and Caption in the running application here]

5.3.2 Post Detail / Delete

📸 Screenshot: Post Detail View with Delete Option
[Attach actual screenshot of the Post Detail View with Delete Option in the running application here]

5.4 News Feed

📸 Screenshot: News Feed — Posts from Followed Users
[Attach actual screenshot of the News Feed — Posts from Followed Users in the running application here]

Instagram Project Report | Amna Shakeel & Maida Amjad | COMSATS Vehari
Instagram App — SRS & Project Report | COMSATS University Islamabad, Vehari Campus

5.5 Like & Comment

5.5.1 Like a Post
📸 Screenshot: Post with Like / Unlike Interaction
[Attach actual screenshot of the Post with Like / Unlike Interaction in the running application here]

5.5.2 Comments Section

📸 Screenshot: Comments Section — Add and Delete Comment
[Attach actual screenshot of the Comments Section — Add and Delete Comment in the running application here]

5.6 Follow / Unfollow

📸 Screenshot: Follow and Unfollow Button on Profile Page
[Attach actual screenshot of the Follow and Unfollow Button on Profile Page in the running application here]

5.7 Search
📸 Screenshot: Search Page — Username Search with Results
[Attach actual screenshot of the Search Page — Username Search with Results in the running application here]

5.8 Instagram Stories

5.8.1 Story Bar on Home Feed
📸 Screenshot: Story Bar — Active Stories from Followed Users
[Attach actual screenshot of the Story Bar — Active Stories from Followed Users in the running application here]

5.8.2 Create a Story

📸 Screenshot: Create Story Page — Image/Video Upload with Text Overlay
[Attach actual screenshot of the Create Story Page — Image/Video Upload with Text Overlay in the running
application here]

5.8.3 Story Viewer

📸 Screenshot: Full-Screen Story Viewer with Progress Bar and Reply Field
[Attach actual screenshot of the Full-Screen Story Viewer with Progress Bar and Reply Field in the running
application here]

5.8.4 Story Viewers List

📸 Screenshot: Story Viewers List — Who Viewed Your Story
[Attach actual screenshot of the Story Viewers List — Who Viewed Your Story in the running application here]

Instagram Project Report | Amna Shakeel & Maida Amjad | COMSATS Vehari
Instagram App — SRS & Project Report | COMSATS University Islamabad, Vehari Campus

6. Test Cases
All test cases for this project are documented in the accompanying Excel file:
Instagram_TestCases.xlsx. The file contains 8 dedicated worksheets — one per module — following
the standard test case template with the columns: Scenario TID, Scenario Description, Test Case ID,
Pre Condition, Steps to Execute, Expected Result, Actual Result, Status, Executed QA Name,
Misc/Comments, and Priority.

6.1 Test Case Summary

Med/Low
Module Sheet in xlsx Total TCs High Pri
Pri

Module 1 — Auth & Login 12 8 4

Authentication

Module 2 — User User Profile 7 4 3

Profile

Module 3 — Post Post Management 7 5 2

Management

Module 4 — News News Feed 8 5 3

Feed

Module 5 — Like & Like & Comment 8 4 4

Comment

Module 6 — Follow-Unfollow 6 4 2
Follow/Unfollow

Module 7 — Search Search 6 3 3

Module 8 — Stories Instagram Stories 12 7 5

TOTAL 8 Sheets 66 40 26

6.2 Test Case Format

Each test case sheet follows the template below. Open Instagram_TestCases.xlsx to view, execute,
and fill in the Actual Result and Status columns.

Field Description Example

Scenario TID Unique scenario identifier ST01

Scenario High-level description of the test Valid user registration

Description scenario

Test Case ID Unique test case identifier per module TC_SIGNUP_01

Instagram Project Report | Amna Shakeel & Maida Amjad | COMSATS Vehari
Instagram App — SRS & Project Report | COMSATS University Islamabad, Vehari Campus

Pre System state required before execution User is on signup page

Condition

Steps to Numbered step-by-step execution guide 1. Open browser 2. Enter details...

Execute

Expected The correct system output expected Account created; redirect to home
Result

Actual What actually happened during To be filled during testing

Result execution

Status Pass / Fail / Blocked / Not Executed Pass

Executed QA Name of tester who ran the case Amna Shakeel

Name

Misc / Notes, bugs found, or extra context Valid signup flow

Comments

Pri Priority: High / Medium / Low High

6.3 Module 8 — Instagram Stories Test Cases (Preview)

The 12 test cases for the Stories module are fully documented in the Instagram Stories sheet of
Instagram_TestCases.xlsx. Key scenarios covered include:
• TC_STR_01 — Create story with image (High)
• TC_STR_02 — Create story with video (High)
• TC_STR_03 — Story disappears after 24 hours (High)
• TC_STR_04 — View story from followed user (High)
• TC_STR_05 — Story viewer list displayed (Medium)
• TC_STR_06 — Reply to story via direct message (Medium)
• TC_STR_07 — Delete own story (High)
• TC_STR_08 — Story not visible after expiry to owner (Medium)
• TC_STR_09 — Add text overlay to story (Medium)
• TC_STR_10 — Multiple stories play sequentially (High)
• TC_STR_11 — Story upload exceeds size limit (Medium)
• TC_STR_12 — Mute a user's stories (Low)

Instagram Project Report | Amna Shakeel & Maida Amjad | COMSATS Vehari
Instagram App — SRS & Project Report | COMSATS University Islamabad, Vehari Campus

7. Conclusion
This report presented a comprehensive Software Requirements Specification and design
documentation for the Instagram Clone project built with Django and [Link]. The project covers eight
core modules: Authentication, Profile, Post Management, News Feed, Like/Comment, Follow/Unfollow,
Search, and Instagram Stories.

The SRS clearly defines functional and non-functional requirements for each module. System design
diagrams including Use-Case, Sequence (6 diagrams), DFD, and Activity diagrams (created with
StarUML) provide a thorough view of the system architecture and data flow.

Code refactoring was applied to improve maintainability and performance, following industry best
practices such as Extract Function, Replace Magic Numbers, and the DRY principle. A comprehensive
set of 66 test cases across all 8 modules is documented in the accompanying
Instagram_TestCases.xlsx file, following the standard project test case template with full step-by-step
execution guidance.

Module 8 — Instagram Stories — extends the platform with ephemeral media sharing, viewer tracking,
text overlays, and 24-hour automated expiry via background scheduling, demonstrating advanced
feature design beyond the core CRUD modules.

The project demonstrates practical application of software engineering principles including

requirements analysis, system design, iterative refactoring, and systematic testing.

8. References
• Django Documentation — [Link]
• [Link] Documentation — [Link]
• Bootstrap 5 Documentation — [Link]
• StarUML Documentation — [Link]
• IEEE 830 — IEEE Recommended Practice for Software Requirements Specifications
• Martin Fowler — Refactoring: Improving the Design of Existing Code (2nd Edition, 2018)
• OWASP Authentication Best Practices — [Link]

Instagram Project Report | Amna Shakeel & Maida Amjad | COMSATS Vehari