Welcome to the Web Slide Player!

Go to Slide Master


Features this online web player includes ...

Auto Note Saving

Ever forget to save notes for one of the slides, well web slide player saves each notes individually that are added!

Note Taker

Allows you to add individual notes for each slide in the slide player, as well as view those notes later on when you come back!


Ever get bored of looking at lectures without music. Well your search is over because audio is provided here!


The following below is the list of development techniques and technologies used for web slide master!


Used Jquery because it is small, fast, a feature-rich javascript library, which facilitates event handling, document traversal. Jquery also includes ajax which plays a role in our auto note saving feature!

Json File Store

Used Foundation JS because it is one of the most advanced responsive front-end frameworks in the world! Foundation is a easy to learn, customizable framework!


Also used bootstrap which is another popular html, css, and JS responsive framework used to enhance the web slide player on mobile!


Used NodeJS because of its event-driven, non-blocking I/O model that makes it lightweight and efficient. It is also easy to use and quick to learn!


Used Express JS, a minimal and flexible nodejs web framework because of the robust set of features it includes for web and mobile applications!

Cloud 9

Used cloud 9 an open source online integrated development environment that supports hundreds of programming lanuguages. It allowed us to all work together on the same project at the same time!


Below is the design and structure of how the Web Slide Player was created.

  • Beginning

    The hardest part of any application is the starting point. After discussing the requirements with the group we decided that the best fit design pattern is MVC(Model View Controller).

  • Model

    Hozaifa Abdalla

    Created the Data model through a JSON File store on the server end. The Web Slide Player application contains a JSON lecture object is passed between the client and Server. After the lecture object is received by the client, the slidemaster.js file communicates with the controller.js file through the data and passes the updated object.

  • View

    Alex Kiefer

    Created the view component through iframes communicating with the Controller for the data. The view is created through a local client side lecture object that is received. The view becomes updated through the updated lecture being passed from the client to the server and vice versa.

  • Controller

    Daniel Lopez

    Created the slidemaster controller which was responsible for sending commands to the model for the data, also handled the user interaction through the icons, buttons, and inputs. The controller also communicated with the view with the updated model to display new notes!

  • The

Our Amazing Team

Lead developers from Penn State Behrend.

Hozaifa Abdalla

Lead Full Stack Developer

Daniel Lopez

Lead Backend Developer

Alex Kiefer

Lead Frontend Developer

Web Slide Player is a final project for Net Centric Computing using Node JS, Express JS, Json File Store and was crafted with perfection!