Skip to main content

Lab 4: Social Media Platform Server

Due Date

Wednesday, October 8, 11:59am EST

Learning Goals​

The learning goals are:

  • Server-Side Node.js and JavaScript: Develop more familiarity with server-side JavaScript using Node.js and how to handle HTTP requests and responses.
  • Express.js: Gain experience using the Express.js framework to build web applications and APIs.
  • MVC: Understand the Model-View-Controller (MVC) architecture and how to implement it in a web application.

1. In-Lab Walkthrough​

For the in-lab walkthrough this week, we'll continue using the worksheet we started in class. Complete parts 4-6.

1.1 Set up your virtual environment.​

Create a python virtual environment:

$ cd lab4-user1-user2
$ pwd 
$ /home/username/scratch/lab4-user1-user2/
$ virtualenv venv

Activate your virtual environment. You’ll need to do this every time you want to access your node project.

$ source venv/bin/activate

To deactivate it:

(venv) $ deactivate
$

Install nodeenv and create a node environment inside your python virtual environment:

$ pip install nodeenv
$ nodeenv -p

1.2 Set up a Node.js project and install modules​

$ npm init
$ npm install express ejs
$ npm install --save-dev nodemon

1.3 Update your package.sjon file​

Make sure your package.json file contains the following lines (update/add as necessary):

"type": "module",

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "dev": "nodemon server.js"
  },

1.4 Run your node server with nodemon​

$ npm run dev

2. Lab Assignment​

By the deadline, you should have created sketches, wireframes, and HTML/CSS/JS prototypes for three webpages that closely mirror Reddit.

2.1 Requirements​

  1. Create .ejs files for the three pages (home.ejs, post.ejs, profile.ejs) in a "views" folder. Each page should extend a base template that includes a header and footer (base_header.ejs, base_footer.ejs). Use EJS templating to include dynamic content.
  2. Create a "public" folder to serve static files (CSS, JS, images). Each page should have its own CSS and JS file (home.css, home.js, post.css, post.js, profile.css, profile.js).
  3. Set up an Express.js server (server.js) to handle routing between the three pages. The server should listen on port 8000.
  4. Implement the following routes:
    • GET / : Render the home.ejs page. This page should display the newsfeed with posts. Posts cannot be fetched from the front end in home.js, but rather they should be passed from the server to the template.
    • GET /post/r/:subreddit/comments/:user/:post : Render the post.ejs page for a specific post. Display:
      • Post title
      • Post content (text and image if applicable)
      • Upvote/downvote buttons
      • Comments section with upvote/downvote buttons for each comment. Only display the first 5 comments.
      • When a user upvotes/downvotes, make a POST request to the server using the fetch() API to "/post/r/:subreddit/comments/:user/:post/vote". This data does not need to be stored anywhere except it should be printed to the server's console.
      • The ability to add a new comment. When a user submits a new comment, make a POST request to the server using the fetch() API to "/post/r/:subreddit/comments/:user/:post/comment". This data does not need to be stored anywhere except it should be printed to the server's console.
    • GET /user/:username : Render the profile.ejs page for a specific (real) user.
  5. Record a video accessing each of these three pages to demonstrate that your code works. Link to it in your README.md file.

Files to submit:

  • public/
    • css/
      • styles.css (if needed)
      • home.css
      • post.css
      • profile.css
      • any other relevant CSS files
    • js/
      • scripts.js (if needed)
      • home.js
      • post.js
      • profile.js
      • any other relevant JS files
    • images/ (if needed)
  • views/
    • partials/
      • base_header.ejs
      • base_footer.ejs
    • home.ejs
    • post.ejs
    • profile.ejs
  • package-lock.json
  • package.json
  • server.js
  • README.md: contains a Google Drive link for your screen recording.
  • .gitignore: 
    # Dependencies
    /node_modules

    # Production
    /build
    /venv

    # Generated files
    .docusaurus
    .cache-loader

    # Misc
    .DS_Store
    .env.local
    .env.development.local
    .env.test.local
    .env.production.local

    npm-debug.log*
    yarn-debug.log*
    yarn-error.log*