https://robinchen.org/tag/Web-Application/Web ApplicationHugo Blox Builder (https://hugoblox.com)en-usThu, 01 Feb 2024 00:00:00 +0000https://robinchen.org/media/logo_hu9727855325976137109.pnghttps://robinchen.org/tag/Web-Application/https://robinchen.org/project/econclasshub/Thu, 01 Feb 2024 00:00:00 +0000https://robinchen.org/project/econclasshub/<p><strong>For:</strong> Team-based courses with presentations and group projects</p> <p><a href="https://econclasshub.netlify.app/" target="_blank" class="btn btn-primary btn-lg">Access ClassHub →</a></p> <h2 id="overview">Overview</h2> <p>ClassHub is a web app that helps instructors manage attendance and peer evaluations in team-based courses.</p> <h2 id="key-features">Key Features</h2> <table> <thead> <tr> <th style="text-align: left">Feature</th> <th style="text-align: left">How It Works</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><strong>Attendance</strong></td> <td style="text-align: left">Generate time-limited codes; students submit via phone/laptop</td> </tr> <tr> <td style="text-align: left"><strong>Teams</strong></td> <td style="text-align: left">Students create or join teams; instructors view rosters</td> </tr> <tr> <td style="text-align: left"><strong>Peer Evaluation</strong></td> <td style="text-align: left">Anonymous teammate ratings on contribution (rank + score)</td> </tr> <tr> <td style="text-align: left"><strong>Team Rankings</strong></td> <td style="text-align: left">Students rate other teams&rsquo; presentations (content, delivery, creativity)</td> </tr> <tr> <td style="text-align: left"><strong>Dashboard</strong></td> <td style="text-align: left">Instructors see all data, manage records, export results</td> </tr> </tbody> </table> <h2 id="problems-solved">Problems Solved</h2> <table> <thead> <tr> <th style="text-align: left">Traditional Method</th> <th style="text-align: left">With ClassHub</th> </tr> </thead> <tbody> <tr> <td style="text-align: left">Paper sign-ins (slow, fakeable)</td> <td style="text-align: left">Digital codes with timestamps</td> </tr> <tr> <td style="text-align: left">Free-riders in teams</td> <td style="text-align: left">Peer evaluations document contributions</td> </tr> <tr> <td style="text-align: left">Manual data entry</td> <td style="text-align: left">Automatic record-keeping</td> </tr> <tr> <td style="text-align: left">Scattered tools</td> <td style="text-align: left">One integrated platform</td> </tr> </tbody> </table> <h2 id="benefits">Benefits</h2> <p><strong>For Instructors:</strong></p> <ul> <li>Save time on attendance and grading</li> <li>Identify struggling students early</li> <li>Data-backed grade adjustments for team members</li> </ul> <p><strong>For Students:</strong></p> <ul> <li>Fair recognition for contributions</li> <li>Develop professional feedback skills</li> <li>Mobile-friendly, instant sync</li> </ul> <h2 id="technical-overview">Technical Overview</h2> <table> <thead> <tr> <th style="text-align: left">Spec</th> <th style="text-align: left">Detail</th> </tr> </thead> <tbody> <tr> <td style="text-align: left">Type</td> <td style="text-align: left">Web app (works on any device)</td> </tr> <tr> <td style="text-align: left">Auth</td> <td style="text-align: left">Firebase Authentication</td> </tr> <tr> <td style="text-align: left">Database</td> <td style="text-align: left">Firebase Firestore (real-time)</td> </tr> <tr> <td style="text-align: left">Hosting</td> <td style="text-align: left">Netlify</td> </tr> <tr> <td style="text-align: left">Cost</td> <td style="text-align: left">Free for typical class sizes</td> </tr> <tr> <td style="text-align: left">Capacity</td> <td style="text-align: left">200+ concurrent users</td> </tr> </tbody> </table> <h2 id="quick-start">Quick Start</h2> <p><strong>Instructor (one-time setup ~15 min):</strong></p> <ol> <li>Create Firebase project</li> <li>Deploy to Netlify</li> <li>Create class → share join code</li> </ol> <p><strong>Students:</strong></p> <ol> <li>Register with instructor&rsquo;s code</li> <li>Join class</li> <li>Submit attendance / complete evaluations</li> </ol>https://robinchen.org/project/bond-price-calculator/Mon, 15 Jan 2024 00:00:00 +0000https://robinchen.org/project/bond-price-calculator/<p><strong>Course:</strong> ECON2132 - Money and Banking | Chapters 4 &amp; 5</p> <p><a href="https://bondpricecalculator.netlify.app/" target="_blank" class="btn btn-primary btn-lg">Launch Calculator →</a></p> <h2 id="overview">Overview</h2> <p>A web-based educational tool that transforms abstract financial formulas into interactive, visual learning experiences. Students can explore bond pricing, yields, and mortgage calculations with instant feedback.</p> <h2 id="key-features">Key Features</h2> <p><strong>📊 Coupon Bond Calculator</strong></p> <table> <thead> <tr> <th style="text-align: left">Feature</th> <th style="text-align: left">Description</th> </tr> </thead> <tbody> <tr> <td style="text-align: left">Bond Pricing</td> <td style="text-align: left">Calculate present value with adjustable inputs</td> </tr> <tr> <td style="text-align: left">Current Yield vs. YTM</td> <td style="text-align: left">Compare yield measures side-by-side</td> </tr> <tr> <td style="text-align: left">Price-Yield Curve</td> <td style="text-align: left">Visualize the inverse relationship</td> </tr> <tr> <td style="text-align: left">Interest Rate Risk</td> <td style="text-align: left">See how duration affects price sensitivity</td> </tr> </tbody> </table> <p><strong>📚 Other Bond Types</strong></p> <p>Simple Loan, Fixed Payment Loan, Discount Bond, Consol (Perpetuity)</p> <p><strong>🏠 Mortgage Calculator</strong></p> <table> <thead> <tr> <th style="text-align: left">Feature</th> <th style="text-align: left">Description</th> </tr> </thead> <tbody> <tr> <td style="text-align: left">Affordability</td> <td style="text-align: left">&ldquo;How much can I afford?&rdquo; using the 28/36 DTI rule</td> </tr> <tr> <td style="text-align: left">PITI Breakdown</td> <td style="text-align: left">Principal, Interest, Taxes, Insurance + HOA + Closing Costs</td> </tr> <tr> <td style="text-align: left">Amortization</td> <td style="text-align: left">Monthly schedule with principal vs. interest charts</td> </tr> <tr> <td style="text-align: left">Loan Comparison</td> <td style="text-align: left">15-year vs. 30-year side-by-side</td> </tr> <tr> <td style="text-align: left">Extra Payments</td> <td style="text-align: left">Calculate savings from additional payments</td> </tr> </tbody> </table> <h2 id="why-this-tool">Why This Tool?</h2> <table> <thead> <tr> <th style="text-align: left">Traditional Teaching</th> <th style="text-align: left">This Calculator</th> </tr> </thead> <tbody> <tr> <td style="text-align: left">Static textbook examples</td> <td style="text-align: left">Unlimited interactive scenarios</td> </tr> <tr> <td style="text-align: left">Abstract formulas</td> <td style="text-align: left">Visual charts + instant results</td> </tr> <tr> <td style="text-align: left">Manual calculations</td> <td style="text-align: left">Immediate verification</td> </tr> <tr> <td style="text-align: left">Theory-focused</td> <td style="text-align: left">Real-world mortgage context</td> </tr> </tbody> </table> <h2 id="benefits">Benefits</h2> <p><strong>For Instructors:</strong></p> <ul> <li>Live classroom demonstrations</li> <li>Instant &ldquo;what-if&rdquo; analysis</li> <li>Less time on arithmetic, more on concepts</li> <li>Supports flipped classroom and assignments</li> </ul> <p><strong>For Students:</strong></p> <ul> <li><em>Understand</em> — See relationships, not just formulas</li> <li><em>Practice</em> — Verify homework, prepare for exams</li> <li><em>Apply</em> — Connect theory to real mortgage decisions</li> <li><em>Retain</em> — Visual learning improves memory</li> </ul> <p><strong>For Learning Outcomes:</strong></p> <ul> <li>Deeper conceptual understanding → better exam performance</li> <li>Real-world context → improved financial literacy</li> <li>Hands-on practice → increased confidence with financial math</li> </ul> <h2 id="access">Access</h2> <table> <thead> <tr> <th style="text-align: left"></th> <th style="text-align: left"></th> </tr> </thead> <tbody> <tr> <td style="text-align: left">Platform</td> <td style="text-align: left">Web browser (any device)</td> </tr> <tr> <td style="text-align: left">Cost</td> <td style="text-align: left">Free</td> </tr> <tr> <td style="text-align: left">Login</td> <td style="text-align: left">Not required</td> </tr> </tbody> </table>