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!
- HTML, CSS, Javascript Editing Tools
- Firebase for authentication and storage
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.
- 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
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
Contributors: Mateusz Kucz, Brian Thai