Let's Chat
CS50W project

Network

A Django-powered social network where users can post, follow, like, edit, and explore a personalized feed through AJAX-driven interactions.

  • Python
  • Django
  • JavaScript
  • HTML
  • CSS
  • AJAX
  • Bootstrap 4
  • SQLite
View on GitHub

posts, profiles, following, likes.

THE IDEA

People, posts, and the connections between them.

Network is a social media web application built with Django as part of Harvard's CS50 Web Programming with Python and JavaScript (CS50W). It explores how a social-media-style application comes together - users creating posts, connecting with other users, and interacting with each other's content.

The project combines users, posts, following, likes, AJAX, and pagination into one connected application. The backend handles the data and logic; JavaScript adds the responsive, no-reload feel.

USERSPOSTSFOLLOWINGLIKESAJAXPAGINATION

THE SOCIAL GRAPH

People. Posts. Connections.

The whole application is built on two simple loops: creators publish content, and users connect with each other. Everything else flows from those.

CONTENT LOOP
  1. USER
  2. CREATES POST
  3. OTHER USERS SEE IT
  4. LIKE / INTERACT
CONNECTION LOOP
  1. USER
  2. FOLLOWS ANOTHER USER
  3. FOLLOWING FEED
  4. SEES THEIR POSTS

WHAT I BUILT

Seven core flows, one connected app.

Every feature the network needs - built around the documented spec.

01

New posts

  • Create new posts from anywhere
  • Publish them straight into the application
  • Compose and submit in one flow
02

All posts

  • Browse all posts in a paginated feed
  • See every post regardless of who wrote it
the AJAX core03

Edit posts

  • Edit your own posts
  • AJAX-powered updates without a full page reload
04

Profiles

  • A profile page for every user
  • See their posts, followers, and following
05

Following

  • Follow and unfollow other users
  • A dedicated Following feed for personalized browsing
07

Pagination

  • Paginated post feeds
  • Paginated profile pages and Following feed

AJAX EXPERIENCE

No need to reload.

AJAX powers the interactions that should feel instant. Instead of a full browser refresh, the client makes a request in the background and the page updates just the part that changed.

AJAX-driven interactions

EDIT POSTFOLLOW / UNFOLLOWLIKE / UNLIKE

These are the actions that update the page in place - no full browser refresh.

USER ACTIONJAVASCRIPT / AJAXDJANGORESPONSEPAGE UPDATE
in-place updates, no full reload

POSTS

The posting loop.

Users create new posts, browse the feed, and edit their own posts. Editing is AJAX-powered - the post interface updates in place without a full page reload.

  1. CREATE
  2. PUBLISH
  3. VIEW
  4. EDIT
  5. INTERACT

PROFILES

Your profile, your network.

Every user has a profile page that brings their corner of the network together: the posts they've made, their follower count, and their following count.

@userposts · followers · following
every profile shows its corner of the network

FOLLOWING SYSTEM

Building the feed.

Following creates the personalized side of the network: a dedicated Following feed shows the posts of the users you follow.

USER AFOLLOWSUSER BUSER B'S POSTSFOLLOWING FEED
Follow usersUnfollow usersDedicated Following feedAJAX-powered follow / unfollow

LIKE SYSTEM

Like. Unlike. Update.

Likes are a simple toggle. The like count updates in place through an AJAX request - no page refresh needed to see the number change.

  1. ♡ LIKE
  2. AJAX
  3. LIKE COUNT
  1. ♥ UNLIKE
  2. AJAX
  3. UPDATED COUNT
the count changes in place

PAGINATION

Keeping the feed moving.

Content is split across pages so long feeds stay readable.

Post feedsProfile pagesFollowing feed
PREVIOUSNEXT

UNDER THE HOOD

One app, a few layers.

Django owns the data and logic, JavaScript makes it feel alive, and the structure stays simple.

Backend
PythonDjango
Client
JavaScriptAJAXHTMLCSS
Styling
Bootstrap 4
Data
SQLite
DJANGO
  • Application logic
  • Views
  • Routing
  • Server-side behaviour
JAVASCRIPT
  • AJAX interactions
  • Dynamic interface updates
  • Client-side behaviour
HTML / CSS
  • Page structure
  • Styling
BOOTSTRAP 4
  • Interface / layout utilities
SQLITE
  • Application data storage

CORE APPLICATION MODEL

Users to posts. Posts to likes.

Users and posts are connected through social interactions: every user can publish posts, follow other users, and be followed, while posts collect likes.

USER
POST

AUTHENTICATION

The account flow.

A standard, documented loop: register an account, log in, use the network, and log out when you're done.

REGISTERLOGINUSE NETWORKLOGOUT

THE FEED

From everyone to following.

Network offers different views into posts. The Following feed personalizes what the user sees based on the users they follow - nothing more, nothing invented.

ALL POSTS

Every post in the application, in one paginated feed.

FOLLOWING

Only the posts of users you follow, in their own feed.

WHAT THIS PROJECT TAUGHT ME

The web is a conversation.

A social app is really about the requests and responses between users, servers, and pages.

Django application developmentViews, routing, models, and server-side behaviour all live in one Django project.
JavaScript / AJAX interactionsCore actions use AJAX so the page stays put while the data behind it changes.
DOM updatesPosts, like counts, and follow states update in place through the DOM.
User relationshipsFollowing and followers give the app its social graph - and its personalized feed.
Follow / unfollow logicThe relationship between users is created and removed through clean, AJAX-backed endpoints.
Like / unlike logicA toggle that tracks, persists, and renders the like state of every post.
PaginationFeeds and profiles are split into pages so content stays readable.
Profile pagesEach user gets their own page with their posts and their connection counts.
Server / client interactionDjango answers the front end, and the front end decides what to repaint.

PROJECT STRUCTURE

A Django application.

A single Django application powers the whole experience - views serve the data, templates render it, and JavaScript keeps the interface responsive.

  1. DJANGO APPLICATION
  2. VIEWS
  3. TEMPLATES
  4. JAVASCRIPT / AJAX
  5. DYNAMIC UI
conceptual architecture - layout verified in the repository

TECHNICAL FLOW

From click to update.

This is the request round-trip behind every AJAX interaction - a user action, a background request, a server response, and a DOM update. No WebSockets, no real-time stream, just clean requests and responses.

  1. USER CLICKS
  2. JAVASCRIPT
  3. AJAX REQUEST
  4. DJANGO
  5. SERVER RESPONSE
  6. DOM UPDATE
  7. USER SEES CHANGE
← click, request, respond, repaint

BUILT WITH CS50W

From idea to feed.

Network was built as part of Harvard's CS50 Web Programming with Python and JavaScript. The project applies Django and JavaScript concepts to a social-media-style web application.

CS50W project

PROJECT DETAILS

The essentials.

ProjectNetwork
CategoryCS50W project
Built withPython, Django, JavaScript, HTML, CSS, AJAX, Bootstrap 4, SQLite
Repositorygithub.com/ujjwaluzu/cs50w-network

Want to see the code?

The full social network lives on GitHub - the Django application, its templates, and the AJAX layer.

View Network on GitHub
Back to all projects