⇦ Back

WDX-180

Web Development X

Week 34 | Mini CMS Project

Week 33 ⇦

Updated: 13/6/2025

⇨ Week 35

Week 34 - Day 1 | Building a Mini CMS - Part 1

Schedule

  • Watch the lectures
  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

  • Part 1: What is a Content Management System (CMS)?
  • Part 2: Setting up our Node.js project

You can find the lecture code here

References & Resources:

Week 34 - Day 2 | System Design

Schedule

  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Since we are going to be designing our Database soon, here are two really interesting videos that will walk you through designing a system (an Instagram-like app in one case, a calendar app in the other).

You can learn a lot from this process, such as thinking about the system from a high level and breaking it up in different modules and deciding on the Database entities (tables) and Schema (columns and types).

Enjoy and gain some insights!

Week 34 - Day 3 | Object Relational Mapping

Schedule

  • Watch the lectures
  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

  • Part 1: Databases & ORMs (Object Relational Mapping)
  • Part 2: Modular architecture and creating and populating Database tables with data

You can find the lecture code here

References & Resources:

Exercises

  • Search for patterns to connect the web server module and the database module
  • Study the sqlite3 API documentation

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week34/progress/progress.draft.w34.d03.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Week 34 - Day 4 | Practice Day

Schedule

  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Today is practice day. Practice on the topics and coding challenges for the Mini CMS project we are working on and spend some time on MDN and other Internet resources to read more about the technologies involved.

Week 34 - Day 5 | Mini CMS: Database Connection

Schedule

  • Practice on the topics and share your questions

Study Plan

Let’s practice! Skip to the Exercises section below for a guide on what to code today.

Exercises

Take this opportunity and try to work on the CMS project (you can find the code to start from here) to accomplish the following tasks:

  • Create a new src/db/basic.ts file and paste the official sqlite3 example found here: https://github.com/TryGhost/node-sqlite3?tab=readme-ov-file#usage. We’ll just keep the other database-related files aside for now.

  • Instead of creating a sample lorem table, like the example, update the code and create 2 tables that will hold our CMS Users and their Blog Posts. Make sure that these two tables have a one-to-many relation, where one User can create many Posts. Make use of the Primary/Foreign Keys to connect the two tables and populate then with a few sample users and posts. ChatGPT can help you come up with some sample user names, blog post titles and sample content.

  • Think carefully about the Schema of these two tables (column names and value types).

  • Rename src/index.ts to src/web.ts and create a new file named src/index.ts. Find a way to import both the src/db/basic.ts and src/web.ts into src/index.ts and “wire” them up correctly so that the web server starts listening when the database has been initialized and the table creation (CREATE TABLE) and population (INSERT INTO) have completed. You will have to create some functions and of course make use of some callbacks in order to achieve that.

  • Create another route named /blog that will read the contents of the Posts table and send the contents back to the user in the form of an HTML page.

Here is some code to get you started:

index.mjs:

  import webInit from "./web.mjs";
  import dbInit from "./db.mjs";

  dbInit( webInit );

web.mjs:

  export default function webInit(db){
    console.log("Web server initialized!");
    function listen(){
      console.log("Table:", db);
    }
    listen();
  }

db.mjs

  export default function dbInit(cb){
    console.log("Database server initialized!");
    setTimeout(()=>{
      console.log("Table ready!");
      cb({ table: "Users" });
    },500);
  }

Run: node index.mjs

Output:

  Database server initialized!
  Table ready!
  Web server initialized!
  Table: { table: 'Users' }

That’s it!

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week34/progress/progress.draft.w34.d05.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Weekly feedback: Hey, it’s really important for us to know how your experience with the course has been so far, so don’t forget to fill in and submit your mandatory feedback form before the day ends. Thanks you!

Project maintained by in-tech-gration Hosted on GitHub Pages — Theme by mattgraham