Let's Chat
CS50W project

Wiki

A web-based encyclopedia built with Django, where Markdown-powered entries can be searched, created, edited, and explored.

  • Python
  • Django
  • HTML
  • CSS
  • Markdown
View on GitHub Watch the screencast
Wiki encyclopedia interface built with Django
a markdown encyclopedia

THE IDEA

A web encyclopedia, Markdown all the way down.

Wiki is a web-based encyclopedia built as part of CS50's Web Programming with Python and JavaScript (CS50W). Entries live as Markdown files on disk, and every page is rendered server-side by Django - no database to manage, just files that read and write.

The brief was deceptively simple: browse an index, look up an entry, search for one, create a new one, edit an existing one. The interesting work is in the parts invisible on screen - reading files, converting Markdown, routing titles to pages, and keeping duplicate entries out.

HOW THE WIKI WORKS

Three loops, one encyclopedia.

Reading, creating, and editing each follow a clean server-side path.

SEARCH / INDEX → READ
  1. Search or open the index
  2. Find the entry
  3. Read the Markdown
  4. Convert to HTML
  5. Display the entry
CREATE
  1. Submit a title and body
  2. Write the Markdown to disk
  3. View the new entry
EDIT
  1. Load the existing Markdown
  2. Update the content
  3. Save changes back to disk

WHAT I BUILT

The core features.

Seven focused features cover the whole encyclopedia - nothing claimed that wasn't built.

01

Entry pages

  • Unique URLs for every entry
  • The entry title becomes the page heading
  • Missing entries get a clear error page
02

Search

  • Exact matches redirect straight to the entry
  • Partial matches list every relevant result
  • Results stay one click away from their entries
03

Create page

  • A title field plus a Markdown textarea
  • New entries are saved straight to disk
  • The app redirects to the finished page
04

Edit page

  • Existing Markdown is pre-filled for editing
  • Changes save back over the entry file
05

Random

  • One route to any entry
  • A dice roll that lands somewhere new
06

Markdown

  • Entries written and stored in Markdown
  • Converted to HTML before it reaches the page
07

Index

  • Every entry name, listed in one place
  • A clickable map of the whole encyclopedia

FROM MARKDOWN TO HTML

Stored small, served big.

Entries are kept as lightweight Markdown files. Each request reads the file, converts the Markdown to HTML, and hands the rendered page to the template.

entry.md
# Python
Python is a programming
language.
rendered.html
<h1>Python</h1>
<p>Python is a programming
language.</p>
Markdown fileRead contentConvertHTMLRendered entry
the same content, re-rendered every request

EDIT THE ENCYCLOPEDIA

Created and edited from the browser.

No database admin. The encyclopedia grows and changes through plain forms.

CREATE NEW PAGE

Add an entry.

  1. Enter a unique title
  2. Write the body in Markdown
  3. Save the entry
  4. Duplicate title? Get told off clearly
  5. Redirect to the new entry
EDIT EXISTING PAGE

Change an entry.

  1. Open an existing entry
  2. The current Markdown fills the form
  3. Edit as much as you like
  4. Save changes back to the file
  5. Return to the updated entry

EDGE CASES

The failure paths, built in.

The invisible work of a web app is how it fails.

MISSING ENTRY

"An error occurred"

Request an entry that doesn't exist and Django serves a clear error page instead of crashing.

DUPLICATE ENTRY

One title, one entry.

Trying to create a page whose title already exists is rejected - the encyclopedia never clobbers an existing entry.

UNDER THE HOOD

How it's built.

The request flows through a small set of Django pieces.

Backend
PythonDjango
Frontend
HTMLCSS
Content
Markdown
URLsA urlpatterns map that turns entry names into routes.
ViewsFunctions that find entries, render pages, and handle search, create, edit, and random.
TemplatesHTML shells that receive data - and the rendered Markdown - from the views.
FilesystemThe entry store: plain .md files under entries/.
UtilA thin helper module that lists, reads, and writes those files.
MarkdownThe conversion step turns stored Markdown into HTML at request time.

A FILE-BASED ENCYCLOPEDIA

No database - just files.

The whole encyclopedia is a folder of Markdown files. A title is a filename, a page is a file read from disk, and the conversion happens fresh on every request.

  1. Entry title
  2. Markdown file
  3. Filesystem
  4. Django view
  5. Markdown → HTML
  6. Entry page

the database is a directory

WHY DJANGO?

The batteries that mattered.

URL routingViewsTemplatesFormsServer-side handlingRedirectsError handling

Django supplied routing, views, templates, and forms out of the box - and its server-side discipline keeps all the encyclopedia logic in one place.

WHAT THIS PROJECT TAUGHT ME

Server-side, start to finish.

The whole loop - request, route, render, write - is one Django application.

Titles become routesEach entry's name maps to its own URL - and Django routes that request to the matching view.
The filesystem is the databaseEntries live as .md files on disk. Listing, reading, and writing entries all talk straight to the filesystem.
Rendering happens on the serverStored Markdown is converted to HTML in the view, not in the browser - a clean server-side render.
Search keeps its promisesAn exact match jumps straight to the entry; anything else returns a breadcrumb of partial matches.
Forms feed the file storeCreating and editing are ordinary form submissions that write Markdown back to disk.
Edge cases get real pagesDuplicate titles and missing entries fail loudly and clearly instead of silently.
Small, readable codeVirtually all logic lives in a handful of views and a small helper module - easy to follow.

PROJECT STRUCTURE

A small, tidy Django layout.

The documented project layout - a classic Django-simple structure.

entries/The encyclopedia itself - one Markdown file per entry.
templates/HTML templates for the layout, index, entries, search, and edit pages.
views.pyThe application's logic: index, entry lookup, search, create, edit, random.
urls.pyMaps URLs to views, including the /wiki/TITLE entry routes.
util.pyHelpers that list, read, and write the entry files.

BUILT WITH CS50W

A course project, built to learn.

Wiki is a CS50W project through and through - a chance to put Python, Django, and server-side rendering into practice with a real, working application rather than an exercise.

CS50W project

PROJECT DETAILS

The essentials.

ProjectWiki
CategoryCS50W project
Built withPython, Django, HTML, CSS, Markdown
Repositorygithub.com/ujjwaluzu/cs50w-wiki
ScreencastYouTube

Want to see the encyclopedia?

Browse the Django views, walk the entry files, and watch the screencast.

View Wiki on GitHub Watch the screencast
Back to all projects

RELATED VIDEO

Watch CS50W - Wiki | Ujjwal Baunthiyal