A comprehensive collection of five full-stack web development projects completed as part of Harvard's CS50 Web Development Course. This portfolio showcases progressive learning from frontend basics to complex backend systems, demonstrating proficiency in HTML, CSS, JavaScript, Python, Django, SQL, and modern web architecture patterns.
Frontend-Only | HTML & CSS
A pixel-perfect frontend replica of Google's core search interfaces. This foundational project covers HTML semantics, CSS styling, responsive design, and form handling without any JavaScript or backend logic.
- Google Search – Centered search interface with iconic styling
- Image Search – Specialized search interface for image queries
- Advanced Search – Multi-field search with various filtering options
Key Technologies: HTML5, CSS3, Flexbox, Bootstrap, Accessibility
Folder: project0-search/
Full-Stack | Python/Django & Markdown
A Wikipedia-like encyclopedia platform where entries are stored as Markdown files and dynamically rendered to HTML. Users can view, search, create, and edit entries with a clean, structured interface.
Features:
- 📄 View Entries – Markdown to HTML conversion for display
- 🔍 Search – Exact title matches and substring search
- ✍️ Create/Edit – Add new entries or modify existing ones
- 🎲 Random Entry – Discover random encyclopedia pages
- 📋 Sidebar Navigation – Quick access to all entries
Key Technologies: Django, Django Templates, Markdown2, Python 3.x
Database: File-based storage (Markdown .md files)
Folder: project1-wiki/
Full-Stack | Python/Django & SQLite
A fully-featured online auction platform similar to eBay. Users can list items, place bids, comment on products, manage watchlists, and browse by category. Demonstrates advanced Django patterns, authentication, and database relationships.
Features:
- 🔐 Authentication – User registration, login, secure sessions
- 📦 Listings – Create auctions with description, starting bid, category, image
- 💰 Bidding System – Dynamic bid updates with validation
- ⭐ Watchlist – Save and manage favorite listings
- 💬 Comments – Leave reviews on auction items
- 🗂️ Categories – Browse and filter by product categories
- 🛠️ Admin Panel – Full CRUD operations for backend management
Key Technologies: Django, SQLite3, Bootstrap 4, Django ORM, Custom Forms
Folder: project2-commerce/
Frontend-Heavy | JavaScript & Django API
A single-page email application mimicking Gmail's core functionality. Built with vanilla JavaScript (no frameworks) consuming Django REST-like endpoints, demonstrating advanced frontend state management, async operations, and API integration.
Features:
- 🔐 Authentication – Register, login, logout with Django auth
- ✉️ Compose & Send – Send emails to multiple recipients
- 📥 Mailboxes – Inbox, Sent, and Archive views with dynamic loading
- 📖 Email Detail – Full email view with sender, recipients, timestamp
- ✅ Read Status – Automatic marking of emails as read
- 🗂️ Archive Management – Archive/unarchive received messages
- ↩️ Reply – Quick reply with auto-filled fields and quoted body
- ⚡ SPA Behavior – All navigation via JavaScript (no page reloads)
Key Technologies: JavaScript (Vanilla), HTML5, CSS3, Bootstrap 4, Fetch API
Backend API: Django with custom REST endpoints
Folder: project3-mail/
Full-Stack | Python/JavaScript/Django
A Twitter-like social network platform where users can create posts, follow others, like posts, and view personalized feeds. Combines Django backend with interactive JavaScript frontend for a modern user experience.
Features:
- 👤 User Profiles – Profile pages with bio, followers/following counts
- 📝 Posts – Create, view, and manage posts
- ❤️ Like System – Like/unlike posts with real-time updates
- 👥 Follow System – Follow/unfollow users
- 🏠 Personalized Feed – View posts from followed users
- 📅 All Posts – Browse timeline of all posts
- 🔄 Pagination – Load posts dynamically in batches
- 💬 Interactive Comments – Edit and manage post interactions
Key Technologies: Django, JavaScript, Bootstrap 4, Django ORM
Database: SQLite with relational models
Folder: project4-network/
For more detailed information about each project, refer to the README files in each project folder:
- Project 0:
project0-search/README.md - Project 1:
project1-wiki/README.md - Project 2:
project2-commerce/README.md - Project 3:
project3-mail/README.md - Project 4:
project4-network/README.md
These are academic projects completed as part of CS50 Web. While they're primarily for portfolio purposes, improvements and enhancements are welcome!
If you'd like to contribute or suggest improvements:
- Fork the repository
- Create a feature branch (
git checkout -b feature/improvement) - Commit your changes (
git commit -m 'Add improvement') - Push to the branch (
git push origin feature/improvement) - Open a pull request
This project collection is provided as-is for educational and portfolio purposes. Please refer to individual project licenses if applicable.
Shlok Mehndiratta
These projects were completed as part of Harvard CS50 Web Development Course, instructed by David J. Malan and the CS50 team. Special thanks to the course staff for excellent curriculum and guidance.
Last Updated: February 2026
Made with ❤️ as part of CS50 Web Development