I successfully developed fullstack project and fulfilled requirements below[ For the final project of the semester, every student will be completing a term project. The purpose of
this project is to bring together all of what you have learned from the previous assignments and
incorporate it into a larger project to help everyone gain experience making a web application. For this
semester, all students will be implementing a video management website that will allow users to post
images, search for images and view and comment on individual image posts. This will be like websites
like https://youtube.com or any other video hosting websites. We will not recreate the entire website
but will focus on the features listed below. If students are willing, you are welcome to go above the
requirements and do extra features for extra credit. We will be using NodeJS and Express as our server-
side technologies.
For most students, this will be one of the larger projects you will have worked on. It is important each
student is committed to completing this project by the due date. A high-level schedule will be given to
help keep students on track as they progress through the project. It is up to the students to
micromanage the allotted time between milestones.
Before any code can be written towards your term project, we will need to setup our software stack. A
software stack is simply a collection of software used to run an application. Each student will have a
similar software stack unless otherwise approved by the instructor. The software stack will be running
on student’s laptops as a localhost application. Students can elect to use a remote server if they like or
the VM from assignment one, but this is not a requirement. Our software stack will comprise of the
following:
• Linux/Windows/MacOS operating system
• NodeJS
• Express JS
• MySQL – installation can be postponed until needed.
The above is mostly referring to the back end of a web application. These are the pieces of software
running on a remote server (in our case, our laptops). The other side, front end, will comprise of a
mixture of HTML, CSS, and JavaScript. Use of libraries or frameworks like Bootstrap, jQuery, React and
the like are allowed. These may not be covered in class if time does not permit. So, it will be on the
students to do the research on how to use them. These front-end technologies do not need to be
installed like the back-end software. In most cases, they are built into most browsers. Then technologies
like Bootstrap and jQuery will need to either be downloaded and included in your project or linked from
a CDN (Content Delivery Network). A framework like ReactJS would need to be installed via NPM and
your front-end would need to be purely built in ReactJS.
During the first milestone, you will be required to install and configure your web stack, and have it
display the expected message through your web application.
Requirements
Each student’s application must satisfy the following requirements. Students will be graded on how
many requirements are completed. The base requirements are non-negotiable, but more functionalities
can be added for extra credit.
• Functional Requirements:
o Unregistered users must be able create a user account.
o Registered users must be able to log in.
o Registered users must be able to log out.
o Registered users must be able to view their profile
o Registered users must be able view posts they have made while viewing their user
profile.
o Registered users must be able to delete their posts.
o Registered users must be able to post a video.
o Registered users must be able to comment on posts.
o Registered users must be able to search for video posts
o Unregistered users must be able to search for video posts.
o Allow users to view many posts on the home(index) page.
▪ The videos shown here should be thumbnails and not the video itself.
o Unregistered user must be able to view individual video posts.
• Non-Functional Requirements:
o User account information must be stored in the application’s database
o User Passwords must be encrypted.
o Post information must be stored in the application’s database
o Logged in users must stay logged in as they navigate your website until they log out.
o All input received from login and registration must be validation on both client and
server side.
• Additional Requirements:
o Students must fill out the README.md with the following information:
▪ Student’s Name
▪ Student’s SFSU Email
▪ Link to Web Application. In most cases, this will be localhost:3000 but in the
case, you change the port, the instructor needs to know.
▪ Instructions on how to run your application. This includes installing all
dependencies, what command is used to run the application (what is used to
start the server-side code) and any additional information needed to run the
application. This is very important, as projects that cannot be built will be
penalized according to the non-build penalty outlined in the syllabus.
o Script used to make Database tables. This will be needed to test your application while
grading. It may be something you can create later towards the end of the term project.
o Presentation of term project to class.
Milestones
Below is a set of milestones to help guide students on planning out the implementation of the
application. The dates attached to each milestone set an expectation of how far along you should be
when it comes to completing the application. It is important that students stay on track. Students are
expected to have the items listed in each milestone completed (or very close to completed) by the date
attached to each milestone. This may be checked randomly. Students will have at least 48 Hours of
notice in advance before checks will occur. Repositories will be checked for completion of tasks. Please
be sure that code used to complete the features are in the repository before they are checked. Rechecks
will NOT be performed. If a feature is broken or incomplete, this may be ok if enough effort went into
its progress. Students are encouraged to commit/push code frequently into their respective
repositories. Failure to keep up with the expected features by the due dates will cause points to be
deducted from your final term project score.
Milestone One
For milestone one, each student will setup their web stack and initialize their application and repository
to its initial state. We will call this our hello world application. It is required that each student get their
application running and pushed to their GitHub repository by the end of milestone one. Please refer to
the Express JS slides on Canvas for a sample file structure for your application. You do not need to follow
this exactly, but your application’s file structure needs to be well thought out. Points will be deducted
for sloppy applications. To complete milestone one each student must do the following:
1. Install all the necessary software so you can run the application on your laptop. These
include NodeJS and MySQL.
a. Installing MySQL is optional for milestone one and can be postponed until
milestone three.
2. Using the same repository created for your assignments, do the following commands:
a. Open a terminal and cd into your local repository:
cd path/to/repo/csc317-code-ghusername/application
where ghusername, is your GitHub Username.
Please also make sure you use the correct path to your local repository
when running the cd command.
b. Run the command to install our application’s dependencies:
npm install
c. Once our dependencies are installed, we can run the app:
npm start
d. Once the app is started, go to your browser and access you application at the
following url : localhost:3000
It is required that you can run your application via Nodejs. Do not use live server
in either in IntelliJ or VS Code. When navigating to your applications URL (
http://localhost:3000 ), it displays “Hello World, I am {{Insert Student name
here}}”.
e. Your final step for completing milestone one is to replace {{Insert Student name
here}} with your name. Note this will not be done in index.hbs but rather in
index.js in the routes folder.
f. Once step e is completed, please commit your code to your repository on the
main branch.
git add .
git commit -m “changed my name for M1”
git push origin main
Milestone Two
For milestone two, each student will need to import their HTML pages from assignments 2, 3, and 4
(code to fetch fake photos can be left out but can be used as reference later) into their Express JS
applications. Each Student will also need to implement the remaining portions of their pages. This will
include but is not limited to comment section for posts, navigation bars, banners, footers and so on. The
Front-end of your application does not need to be completely done by this milestone but the layout and
structure and navigation should be close to complete. Please make sure to put the files in the correct
folders. For our term project we are going to be using a front-end framework called Handlebars.
Handlebars is a templating engine that allows us to easily write dynamic HTML. This is similar to
frameworks like React, Vue, Angular, and so on but handlebars is simpler but it is also not as powerful.
Since we are using Handlebars, each student will need to convert their HTML pages into handlebars
templates. This process will also require breaking your HTML pages down into small chunks called
partials (like the idea of components in React). You can think of partials as small components in your
application that are reusable for multiple pages of your application. Banners, nav bars and footers are
good examples. Partials (and components in react) allow developers to write code once and reuse it
multiple times on different pages of your application (See functions in any language).
Once imported, please note that it is expected that your application has a theme (color wise). This
means all the pages should contain a similar look and feel. It should not be the case that going from
page to page the colors are very different. The imported HTML, CSS, and JS files should be stored in the
correct folders. The CSS and JS files need to be correctly linked to the HTML file as well. Absolute paths
to files ARE NOT ALLOWED. See the express JS slides for a sample file structure.
The completed pages need to be pushed to your term project repository.
Milestone Three
For milestone three, you will begin to implement the remaining portions of your application. This will
include creating routes for the functionality of your application. During this milestone, students should
focus on completing the log in / log out and registration features of their application. This will give your
application the following functionality:
• Allow users to enter information to register a new account on your application.
• Allow users to log in with their credentials on your application.
• Allow users to log out of your application.
• Allow users to view their profile page with populated user information.
o Note at this time, we will not populate the lists of created posts for users.
The code used to implement the above features needs to be pushed to the student’s repository.
Note that to complete these features, your database and the database tables will need to be created as
well. Not having Sessions completed for this milestone is OK.
Milestone Four
For milestone four, you will begin to implement the remaining portions of your application. This will
include creating routes for handling posts in your applications. Students should focus on completing the
following remining features: creating a post, searching for posts, viewing a post, displaying posts on the
home page, and commenting on a post. This will give you application the following functionality:
• Allow registered users to create a new video post
• Allow users to view many posts on the home(index) page.
o The videos shown here should be thumbnails and not the video itself.
• Allow users to search for videos.
• Allow users to view an individual video post.
• Allow registered users to comment on a post.
• Allow logged in users to view a list of video posts they have created on their profile page.
• Allow logged in users to delete their posts from their profile page.
Milestone Five
For milestone five, each student will create a short video demoing their term project. A script is outlined
below help guide you with what features should be shown when demoing
your application.
You may use any form of video recording technology that is available to you. Use of smart phones is OK.
A simple(ish) free opensource video recording software, https://obsproject.com/, can be used to record
videos. It is available on Windows, MacOS and Linux. This is the software used when making the videos
for this course.
When making the video, make sure the highlight all the requirements completed. I would recommend
have the database prepopulated with data to help show certain features. You can use the following
script(outline) to help you demo the main features.
• Introduce yourself
• Introduce your project
• Create a new user
• Show the newly created user in the database
• Log the new user in.
• Create a new post
• Show the newly created post in the database
• Show the newly created post on the home page
• Search for the new created post.
• Click on the searched for post and view the individual post page
• Comment on the post.
• Show the new created comment in the database.
• Show the users profile page.
• Closing remarks. Anything you would like to say about your term project.
• Thank viewers for watching your video.
Please try to keep the demo’s runtime between 2 to 10 minutes. Please be careful of your
surroundings. When recording. Once the recording is complete go to Canvas and click the “Term Project
Demo” discussion in the Term Project Page on Canvas. Create a new entry with the following name:
First-name Last-named Game-demo-name. For example, if I were demoing my project the name would
be “Anthony Souza instructor’s Photo App or iPA”. You can upload your video to Canvas using the Media
site Integration. A video will be posted showing how this can be done.] I want to put on my resume with 3 bullets using start method