Explore

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

TEAMName.zip⁠

⁠

For example:

TheAmazingPeanut.zip⁠

⁠

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.

https://www.pkware.com/products/pkzip⁠

⁠

Use PKZIP

https://www.dropbox.com/scl/fi/f55uxc5thwswzt29f3rw0/pkz144028w64en.exe?rlkey=578z2c2z7b5vokc5zmrkfdm0h&dl=0⁠

— or — download the free 30 day trial of Winzip from

Winzip.com⁠

⁠

Upload your ZIP FILE: Thursday Section:

https://www.dropbox.com/request/s9Jka5pn2GUi5a4JoWBL⁠

⁠

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

npmjs.com⁠

and MongoDB Realm to become familiar with it.

⁠

https://www.dropbox.com/scl/fi/jpi9f2x6psh3ugsfz65fu/Building_the_Full_Stack_Web_Application_Volume_2.pdf?rlkey=ldxmott5q7kcd9nrshh2x9o9f&dl=0⁠

⁠

Delivery Use Cases:

It is enough to show an HTML page served up by Express.js

Forms:

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:

⁠

https://www.dropbox.com/request/dioyfMY9U9l3mvJSUInN⁠

⁠

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

TRELLO Board URL

Overleaf / Latex : Put the edit link for Overleaf into this text file)

Resources:

⁠

Node.js application that showcases the use of the Pug templating language. coda.io⁠

⁠

Working with MONGO DB

⁠

JavaScript Functions, Objects, and working with MONGO DB coda.io⁠

⁠

Doing NPM Publish

⁠

An Introduction to Node.js and NPM for Web Application Development coda.io⁠

⁠

Using the PUG Templating Language:

⁠

Building the Node.js 3 Tier Application with the PUG Templating Language coda.io⁠

⁠

Project Instructions Video

https://app.knowmia.com/l74y

Instructor’s Trello Board to get Ideas from:

⁠

https://trello.com/invite/b/ThhfiIEZ/ATTIcf2718168742ea4860c70efd91390209769860D1/s23-31033-project-board⁠

⁠

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

NPMJS.com⁠

URL to your uploaded project.

Trello Board LINKS to : Overleaf Account, GitHub Repo

Latex Document: LINKS to TRELLO Board, GitHub, Each Team Member’s

NPMJS.com⁠

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

TRELLO Board

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

NPMJS.com⁠

- each individual team member should do this to learn how and put your

NPMJS.com⁠

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

NPMJS.com⁠

⁠

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:

⁠

Ajax as the communication between the front end web page and the back end Node.js controller program. coda.io⁠

⁠

Loading coda.io⁠

⁠

JavaScript BOM Exercises Drill coda.io⁠

⁠

Project Due: Week 13

Project Dropbox:

https://www.dropbox.com/request/HfV7x9hlbSHkU3XvkBSv⁠

⁠

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:

HTML

CSS

jQuery

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 NPMjs.com

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

Trello.com⁠

Account

⁠

Using TRELLO to do Software Project Management youtu.be⁠

⁠

Loading www.dropbox.com⁠

⁠

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:

⁠

Overleaf.com⁠

: make an account

Present the Edit URL for your Overleaf Account in your Project Control File.

Make a TRELLO Board for the Team: Name

Peter@PeterSigurdson.net⁠

to be a Member of the Trello Board. Put your Trello board Share LINK in your Text File.

⁠

Upload your Text File to:

⁠

https://www.dropbox.com/request/dioyfMY9U9l3mvJSUInN⁠

⁠

Resources:

⁠

Ajax as the communication between the front end web page and the back end Node.js controller program. coda.io⁠

⁠

This is the starter template for your Project:

⁠
`s23 CSD 31-3 S3 Full Stack JavaScript Application Development coda.io`⁠
⁠

jQuery Lab:

⁠

Loading coda.io⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.

S23 CSD3103 Full Stack JavaScript Development Term Project Code Book

Upload your Text File to:

Resources:

Working with MONGO DB

Doing NPM Publish

Using the PUG Templating Language:

Project Instructions Video

Instructor’s Trello Board to get Ideas from:

Project Assets you will create:

Project Due: Friday August 18

Project Grading Rubric

Recipe 0 : How to set started:

Project and Test Study resources:

Project Due: Week 13

The story of this Project:

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

Upload your Text File to:

This is the starter template for your Project:

⁠s23 CSD 31-3 S3 Full Stack JavaScript Application Developmentcoda.io⁠⁠

jQuery Lab:

⁠
`s23 CSD 31-3 S3 Full Stack JavaScript Application Development coda.io`⁠
⁠