SHPE Web Dev Course

Welcome to SHPE Web Dev's GitHub repo. In this README, we will cover the lecture material created by our own SHPE at UCI Tech Committee students. All the project's code is found under the completed projects folder.

Project 1: Tic Tac Toe

Author – Israel Jimenez

A simple, classic game of Tic Tac Toe implemented on using only HTML, CSS, Bootstrap, and JavaScript. In this project, students learned how the basics of HTML, CSS, Bootstrap, and Javascript.

Built With

• Front-end – HTML, CSS, Bootstrap
• Logic – JavaScript

Video Walkthrough/Example

Project 2: Pokedex

Author – Guillermo Hernandez

A web-based pokedex to view the stats of all your pokemon using the Pokedex API content downloaded as a JSON file. Students learned how to read JSON files using pure JavaScript and place each pokemon data into the HTML site.

Built With

• Front-end – HTML, CSS, Bootstrap
• Logic – JavaScript

Video Walkthrough/Example

Project 3: GitHub Search

Author – Guillermo Hernandez

A web app that searches users from GitHub using GitHub's API and display basic information of the user that was clicked on. In this section students learned how to use jQuery to make API calls using GitHub's API and display the data on the HTML site.

Built With

• Front-end – HTML, CSS, Bootstrap
• Logic – jQuery, JavaScript
• APIs – GitHub's API

Video Walkthrough/Example

Project 4: Mongo Chat

Author – Guillermo Hernandez

A real-time group chat application implemented using Sockets io, MongoDB, Node JS, and Express JS. In this lesson students focused on learning how create their own database using MongoDB Atlas, connecting the database to their project, and be able to create and read data from their database.

Built With

• Front-end – HTML, CSS, Bootstrap
• Backend – Node JS, Socket io, Experess JS
• Database – MongoDB

Video Walkthrough/Example

Project 5: Ecommerce

Author – Osvaldo

A real-time Ecommerce application implemented using MongoDB, Node JS, and Express JS. In this lesson students focused on learning how create their own database using MongoDB Atlas, connecting the database to their project, and be able to create and read data from their database.

Built With

• Front-end – HTML, CSS, Bootstrap
• Backend – Node JS, Experess JS
• Database – MongoDB

Video Walkthrough/Example

Project 6: Crap Maps

Author – Guillermo Sanchez

A web app that utilizes Google Map's APIs in that helps students locate bathroom locations so that they know where to find the bathrooms at the UCI Campus. Users are able to drop down more bathroom pins whenever they find a new bathroom.

Built With

• Front-end – HTML, CSS, Bootstrap
• Logic – JavaScript
• APIs – Google Maps API

Video Walkthrough/Example