A Laravel 5, Google Polymer 1.0, and D3.js one page web app for fitness tracking. The app tracks your progress in different weightlifting exercises, and displays your work out history in a central graph. Details:
- Laravel handles all of the server-side functionality and the basic app structure.
- Polymer handles the browser-side templating, view-related data-binding, and general user flow. I chose Polymer since I haven't used it before, and I wanted to try making a true one page app that uses dynamic data-binding to update the layout, instead of using multiple static templates or pages.
- I used D3 for the main graph that tracks work out sessions. Similar to the page template, the graph is dynamic and autoupdates when the underlying data changes. It interfaces with the Laravel back end using AJAX calls. I hadn't tried blending D3 with Laravel or Polymer before, either, and aside from needing to pay a little more attention to function scopes, all three work together really nicely.
- The app uses three MySQL tables: registered user e-mail addresses, a list of exercise names, and a table to hold invidual workout session records.
- User input is validated on the server inside the models with additional validation inside some of the controller functions. Values are also validated in browser before AJAX calls are made.
- The app uses two sets of CRUD operations: the first set manages the list of exercise names/categories, and the second manages the records of individual work out sessions.
- Users are authenticated using the Google OAuth2 API. After passing Google authentication, the app only needs the user's e-mail address to link exercises/sessions to that user.
http://www.screencast.com/t/aqFgh3iVZpI
- For testing, I made two test accounts: [email protected] and [email protected] (the passwords are listed in the Canvas submission page). These accounts are pre-seeded with randomly-generated values for a short list of exercises. They show how the app works when it's filled with content.
- If you also try using your own Gmail account, or a different Gmail account, the app will load completely empty of content. The only big difference is that loading the app without content shows how the main input bar and graph slider and reset button "unlock" and become available to use as user input takes place and new records are saved.
- The app was written for Chrome (latest version) and for larger desktop monitors. It struggles with Internet Explorer, even using Edge or IE10, and with Firefox for Windows. These browsers don't seem to recognize some of the SVG components or imports used by Polymer, but without always throwing specific errors. For example, the initial welcome/sign in modal sometimes only displays properly in IE after you open the F12 developer tools panel. I've fixed what I could and added some crossbrowser compatibility, but the front end components only work the way I intended in Chrome.
- The W3 HTML validator doesn't recognize the custom DOM tags or link hrefs that Polymer needs to work. I'm not sure that it's validating all of the generated DOM or Shadow DOM elements that Polymer uses inside the app, either. The W3 CSS validator doesn't seem to recognize the D3/SVG style rules in app.css, or some of the vendor prefixes used by normalize.css or the app. Polymer is still pretty new, so I think this might be unavoidable. Otherwise, the rest of the HTML and CSS seems to validate.
- Laravel 5: http://laravel.com
- Polymer 1.0: https://www.polymer-project.org/1.0/ and this tutorial
- Google Web Components OAuth2 sign in button: https://elements.polymer-project.org/elements/google-signin
- D3.js: http://d3js.org/ and http://bl.ocks.org/mbostock
- jQuery 2.1.4: https://jquery.com/download/
- jQuery dateFormat polyfill (for IE): https://github.com/phstc/jquery-dateFormat