Understanding the Folder Structure in the CS50W Wiki Project (Django)

[Rajeev Bagra]

Project Reference:
https://cs50.harvard.edu/web/projects/1/wiki/

Introduction

In Project 1: Wiki of Harvard’s CS50’s Web Programming with Python and JavaScript, students build a simplified Wikipedia-style encyclopedia using the Django web framework. The project provides a distribution code that already contains a basic Django structure so that students can focus on implementing features such as viewing entries, search, editing pages, and Markdown rendering. (edX)

When opening the distribution code, many learners become confused by the folder structure. The instructions say:

“In the distribution code is a Django project called wiki that contains a single app called encyclopedia.” (edX)

However, when looking at the extracted files, you may notice something like this:

wiki/
│
├── manage.py
├── wiki/
└── encyclopedia/

This often raises the question:

Why is there a folder named wiki inside another folder named wiki?

Understanding this requires understanding how Django organizes projects and apps.

---

Understanding Django’s Project–App Structure

Django separates a website into two main levels:

1. Project

The project represents the entire website configuration.

It contains:

• global settings
• root URL configuration
• server configuration (WSGI / ASGI)

2. App

An app represents a specific feature or component of the website.

For example:

• blog
• authentication
• comments
• encyclopedia entries

One Django project can contain multiple apps.

---

The Actual Structure of the CS50 Wiki Project

When the distribution code is unzipped, the structure looks like this:

wiki/
│
├── manage.py
│
├── wiki/                ← Django project configuration
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   ├── asgi.py
│   └── wsgi.py
│
└── encyclopedia/        ← Django application
    ├── templates/
    ├── static/
    ├── urls.py
    ├── views.py
    ├── util.py
    └── migrations/

So there are three important components:

Component	Role
wiki (outer folder)	Project root directory
wiki (inner folder)	Django project configuration
encyclopedia	Django app implementing the wiki

---

Why Django Creates a Folder Inside Another Folder

This happens automatically when creating a Django project using:

django-admin startproject wiki

Django generates:

wiki/
    manage.py
    wiki/
        settings.py
        urls.py

Meaning:

• Outer folder → project workspace
• Inner folder → configuration module for Django

This design allows Python to import project settings using the module path:

wiki.settings

---

What the encyclopedia App Does

The encyclopedia app is where the actual functionality of the Wiki project is implemented.

Inside this app you will find:

File	Purpose
views.py	Contains Python functions that respond to requests
urls.py	Maps URLs to view functions
templates/	HTML templates
util.py	Helper functions for reading and saving entries
static/	CSS, JS, images

The project instructions specifically ask students to examine:

encyclopedia/urls.py

Here you will find a default route like:

path("", views.index, name="index")

This means visiting the app’s root URL will trigger the index view function.

---

How URL Routing Works in This Project

Django uses two layers of routing.

Step 1 — Project-level routing

Inside:

wiki/urls.py

the project routes requests to apps.

Example:

path("", include("encyclopedia.urls"))

This tells Django:

Send incoming requests to the encyclopedia app.

---

Step 2 — App-level routing

Inside:

encyclopedia/urls.py

specific routes are mapped to view functions.

Example:

path("", views.index, name="index")

This connects the URL to:

views.index

inside views.py.

---

Request Flow in the Wiki Project

When a user visits the site:

Browser
   ↓
wiki/urls.py
   ↓
encyclopedia/urls.py
   ↓
views.py
   ↓
HTML template

This layered routing is one of Django’s core design principles.

---

Why Django Uses Apps

Django encourages breaking websites into reusable modules.

A large project might look like this:

wiki/
│
├── manage.py
├── wiki/
│
├── encyclopedia/
├── users/
├── comments/
└── search/

Each app focuses on a specific feature, making large projects easier to maintain.

---

Key Takeaway

The structure in the CS50 Wiki project is completely normal for Django:

• Outer wiki folder → project workspace
• Inner wiki folder → project configuration
• encyclopedia folder → app containing the wiki functionality

Once you understand the project vs app concept, the folder structure becomes much easier to navigate.

---

If you continue working through this project, the next important concept to understand is how Django connects URLs → views → templates, which forms the core request–response cycle of every Django application.

[Author]

Posts