Web Dev Final Project

Group Members

| Josh Zak | Josh-Zak (https://github.com/Josh-Zak)

| Alexander Bianchi | alexBianchi4 (https://github.com/alexBianchi4)

| Wahbi Raihan | Wahbi-R (https://github.com/Wahbi-R)

| Benjamin Tsoumagas | benjamin-tsoumagas (https://github.com/benjamin-tsoumagas)

| Andrew Chai | AndrewChai878 (https://github.com/AndrewChai878)

Description

Welcome to checkmate games!

Our site allows for user to login and play Chess, Checkers, Tic Tac Toe and Connect Four!

Site Running Instructions

• Clone the repo
• Run 'npm i' to install all of the packages
• To run the site run 'npm run serve'

Backend Running Instructions (to be done after cloning the repo)

• cd to the node_server director
• run 'npm i' to install all of the packages
• run 'nodemon' to run the backend node js server
• you may need to run 'npm -g install nodemon' before running the server

Site Elements

User interface, usability

• Our site supports mobile!
• Mobile styling for our games makes our site usable with mobile devices

SVG and HTML

• Pages are structured using HTML within views
• SVG files are used for various graphics throughout the site

CSS and CSS frameworks

• SCSS is used within Vue to style our views
• Bootstrap is used for our navbar

JavaScript, jQuery, D3

• Our games are created entirely in JavaScript
• There is an SVG chart made with D3 on the Chess page
• Though jQuery is not really needed in a Vue project, to showcase the ability to use it, it has been used multiple times in UserSettingsView.vue

DHTML

• We use Vue and JavaScript to make our html based views dynamically interact with users allowing them to play games.

AJAX, web services

• The Vue frontend accesses Firebase for user authentication
• Uses axios to get a quote from the Node.js server

Node.js

• Serves a quote to be displayed on the front end

Views and/or client-side framework

• We use Vue as the framework for our site

Database

• We implemented Firebase authentication, Firebase Realtime Database and Firebase Storage as our database and independent study portion of the project
• User signup saves user's email, username and password
• Users can set their own profile picture which is saved

Independent Study

For our independent study portion, we used Firebase. Firebase is an API created by google that contains many features. In our case we use its features for these purposes:

Authentication

• Firebase Authentication combined with Firebase Realtime Database is used to let users create accounts and login. It stores passwords in a way makes it so that each users password is stored safely and cannot be accessed by anyone (including us).

Information

• Firebase Realtime Database alongside Firebase Storage allows us to store information about the user such as their display name. This lets users do things like change and set their profile picture by uploading it personally or changing their display name on the website.

Hosting

• Firebase Hosting keeps the website running 24/7 without having to run it ourselves with npm run serve. The website is currently hosted at https://webdevfinal-e9585.web.app/ (the node.js server still has to be run manually)

Presentation File:

https://docs.google.com/presentation/d/1bHrRHbIyKQju-FpWhkQ8XGzZlKGQkAAAWPHDS5XHu78/edit?usp=sharing

Things We Think Are Cool

• Animated Quotes!
• Sign Up!
• Swap Your Profile Picture!
• Swap Your Display Name!
• Play Checkers!
• Play Chess (on your phone as well)!
• Play Connect 4!
• Play TicTacToe!