S23 CSD3103 Full Stack JavaScript Development Term Project Code Book

It would be great to have CSS, images, jQuery to make for a nice looking project page.

3 ways to Submit your Project:
Put all the code into GITHUB
For your ZIP File: Name your File as
For example:
Also in your project directory: Make a text file with:
Team Name
Team Member’s Names and Student IDs

A. You can submit a Zip File. Make sure you include the entire Nodejs project directory including the MONGO Database. PKZIP is a freeware version. You should be comfortable working with ZIP Files. ​
Upload your ZIP FILE: Thursday Section:
B. You can npm -publish. See page 1 of your Course Text Book for Instructions.
If you do NPM -publish, you must replicate your MONGO database to Mongo DB realm. This is optional - submitting the ZIP file is enought - however I encourage you to try to do the workflow of Cloud Hosting on and MongoDB Realm to become familiar with it.

Delivery Use Cases:
It is enough to show an HTML page served up by Express.js
I should be able to add records to your database.
Form Field to enter a search term: Button when click this button: Search is performed and matching records are rendered to the HTML screen.

Upload your Text File to:

TUES: s23 CSD3103 s3 Full Stack JavaScript Development Term Project
Upload a text file named as teamname.txt
team members’ names, ids, college email address
git hub repo url
Overleaf / Latex : Put the edit link for Overleaf into this text file)


Working with MONGO DB

Doing NPM Publish

Using the PUG Templating Language:

Project Instructions Video

Instructor’s Trello Board to get Ideas from:

How to submit your Project:
You should by now have uploaded to the Dropbox link provided a Text Name named as teamname.txt
In that text file: Team name, team members’ names and student IDs, Link to Trello Board, Link to Overleaf Latex Projecet, Team GitHub Repo.
Final way of submitting the project assets is as follows:
Each team member does : npm -publish
Left most swimlane in TRELLO: team information: 1 card per each member: Put your own personal URL to your uploaded project.
Trello Board LINKS to : Overleaf Account, GitHub Repo
Latex Document: LINKS to TRELLO Board, GitHub, Each Team Member’s project published link.

Project Assets you will create:

Project Code: Node.js, HTML, CSS, JavaScript and jQuery in the BOM {In your GitHUB}
GitHub Repository
Mongo Database replicated to the Cloud
Latex Overleaf project presentation document

Project Due: Friday August 18


Project Grading Rubric

Your final presentation of your Project will be to do npm publish to - each individual team member should do this to learn how and put your url into your Team Trello Board, and Latex Document.
Your final project grade will be assigned:
50% of the shared team work
50% will be based on Instructor individual interviews with students.
Setting Up Your Development Environment (10%)
Correct installation and setup of Node.js, Express.js, MongoDB, and Mongoose (10 marks)
Understanding of Key Concepts (30%)
Explanation and usage of Node.js and event-driven programming (10 marks)
Explanation and usage of Express.js and routing (10 marks)
Explanation and usage of MongoDB and Mongoose (10 marks)
Creating and Running a Basic Node.js Application (10%)
Successful creation of a Node.js project (5 marks)
Successful creation of a simple server (5 marks)
Usage of Templates in Express.js (10%)
Correct installation and setup of EJS with routing(5 marks)
Successful rendering of data in templates (5 marks)
Connecting to MongoDB using Mongoose (10%)
Correct connection to MongoDB (5 marks)
Defining your Data Model and using MONGOOSE API to do Create, Read, Update, Delete: inserting and finding documents (5 marks)
Generation of Sample Data (5%)
Successful generation and insertion of some test data / Documents in Mongo DB: relevant to the Theme for your Website (5 marks)
Usage of Static Middleware in Express.js (5%)
Correct setup and usage of static middleware to serve images
Your HTML pages should use static images, CSS, and jQuery to make for a nicer visual presentation.
Finalizing your Model View Controller Website (20%)
Successful creation of routes for products (5 marks)
Successful display of products with Nodejs templates (5 marks)
Successful display of images with static middleware (5 marks)
Overall structure, organization, and functionality of the website (5 marks)

Recipe 0 : How to set started:

You know that you are making a Node Application, to be published to
The center of the NodeApp is the directory: Let’s make a directory.
Nature's Edge Emporium
create the directory
npm -init

Project and Test Study resources:

Project Due: Week 13

The story of this Project:

Think about any eCommerce Website you have used (EBay, Amazon)
Project Grade will be assigned as follows:
50% of Project Grade: Shared among all team members
50% based on Individual Interviews during the last 2 classes
Teams can have up to 5 members
You are going to make an MVC 3 tier Web Application.
You will build a Web Application:
Can be any theme your team chooses, subject to the Instructor’s Approval.
Your web application must showcase:
Client Side JavaScript BOM
Server Side JavaScript Node.js: expressjs, MONGO

Must use : Node.js
You must use Mongo DB as the Datastore, which will be cloud hosted using MONGO Realm.
Controller: JavaScript Objects : You may use a JS framework like Angular, VUE or REACT
How to hand in:
NPM Publish: I will provide a document for you to submit your URL for
Instructor will install using NPM install
We will cover how to cloud-host MONGO where you will store your Data.
You will also make a LATEX Project Presentation Document to detail the Screens, Code, Data, and Operations of your e Commerce Web Site.

By now you should have provided me with your Team Details:
You will make a TRELLO Board one per team to organize and brainstorm your discussions, technical planning and delivery, and for Instructor to provide individual feedback.
@NOW: Create a Account

Make your Project Control File (1 per team): named as your TeamName.txt

Come up with a Cool Team Name
Team members’ names and student ids.
Theme for web application.
GitHub Repository URL
Make an Overleaf Latex Document to present the technology plan and details for your project.
do as follows:
: make an account
Present the Edit URL for your Overleaf Account in your Project Control File.
Make a TRELLO Board for the Team: Name to be a Member of the Trello Board. Put your Trello board Share LINK in your Text File.

Upload your Text File to:


This is the starter template for your Project:

jQuery Lab:

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
) instead.