A PWA CRUD App

Progressive Web App (PWA) is a new google developed technology that allows developers to create web based applications that makes the appstore redundant. Create Read Update Delete (CRUD) Apps deal with data editing, sharing and dsiplaying. All done in the web!

Installations

HTML, CSS, Javascript Editing Tools
Firebase for authentication and storage

Project Motivation

This was a project in a web user-facing development class. It puts together comprehensive knowledge and understanding of long-present HTML, CSS, and Javascript. These langauges have been around for a long time with good reason, they are hard to beat. Recently Google has made a huge jump in web technology with their development of PWA technology. It is next level, and has the potential to wipe out app stores.

This app is meant for a soccer team. The coach can add games to the schedule, players to a roster, and even statistics real-time during a game that can then be followed by other people such as players or parents wherever they are.

File Descriptions

addPlayer.js: javascript file for adding a player
addplayer.html: markup for add player page.
addgame.html: markup for adding a game page
addgame.js: javascript for adding games
custom.css: style of page
data.json: data is stored here
db.js: connects app with firebase database
editGame.html: markup for editing an existing game
editGame.js: javascript to enable game editing
editPlayer.js: javascript to enable player information editing
editplayer.html: markup for player editing page
form.css: all forms in the app follow this style
game_stats.css: styling of game stats
home.css: styling of home page
homeDisplay.js: enables display of homepage
index.html: landing page in app
loadData.js: enables original population of data
login.html: login page if user is not yet logged in
login.js: enables log in (Firebase) and authentication
logout.js: enables log out (Firebase)
manifest.json: firebase information
nav.css: styles the navbar
permission.js: makes sure a user is authenticated for any kind of operation they want to do (for example edit team information)
player.js: displaying player information
schedule.js: displaying schedule information
signup.css: style signup page
signup.html: markup for signup page
signup.js: enables interactive signing up
squad.js: interactive squad display
stats.html: framework for displaying stats
stats.js: makes stats display interactive
sw.js: PWA ServiceWorker that acts as an intermediary between the network and the app. Defines how app deals with loss of connection etc.
table.css: styles tables in app
viewSchedule.html: defines framework for viewing schedule
viewSquad.html: defines framework for viewing squad
viewplayer.html: defines framework for viewing player

Files for App Logo (different screen sizes):

soccer_ball.png
soccer_ball1.png
soccer_ball2.png
soccer_ball3.png
soccer_ball_big.png

Process

Visit the app, and sign up with your information. If you have authentication as a manager then you can edit stats, roster information, schedule information etc. As a parent you can follow the statistics of individual players, or the team. Look at the recent run of form, and anything else you would want form a soccer app!

This is meant to be a mobile app, so make sure to visit on a mobile (android) device! Visit here

Licensing, Authors, Acknowledgements, etc.