FBLACER

• 

  Before FBLACER no study tools or analytics

• 

  Dark mode for visually impaired / eye strain

• 

  Public leaderboard with secure, rule-validated score submissions, no login required.

• 

  Instant analytics for anyone

• 

  Turning studying into data, visualizing performance over time.

• 

  Security by constraint leaderboard writes allowed only if data satisfies mathematical invariants

• 

  Simple JSON and folder structure adaptable to any test

💡 Inspiration

I watched someone in my FBLA chapter scrolling through Quizlet right before a competition, hoping last-minute cramming would be enough. There was no organized preparation system no progress tracking, no leaderboard, no sense of improvement. That moment made me realize that without a structured system, effort becomes guesswork.

FBLACER was born from that gap—not just to study, but to measure growth and engineer motivation.

🎯 What it does

FBLACER is a minimalist competitive flashcard platform built for FBLA members. Users can:

• Study through a game-like flashcard interface
• Submit scores to a public leaderboard
• Track performance progression as data over time
• See structured analytics that turn studying into a measurable system

All of this runs on a static website, with data validation enforced purely through Firestore rules as a security and logic layer.

🛠️ How I built it

I decided to avoid heavy frameworks to keep it lean and resilient.

• Frontend: Vanilla JS, HTML, CSS
• Database: Firebase Firestore with mathematical validation rules
• Automation & Analytics: Google Apps Script + n8n
• Hosting: Firebase Hosting
• Security: Rate-limited, rule-based Firestore write validation + input sanitization

To allow unregistered users to still post valid leaderboard entries, I used mathematically enforced constraints directly in Firestore security rules, ensuring fairness without login friction.

⚠️ Challenges I ran into

• Designing a public leaderboard without allowing spam or vandalism
• Converting human behavior limits into logic-based Firestore rule constraints
• Debugging Firebase Auth inconsistencies across deployment environments
• Making the UI competitive without adding distracting UI complexity
• Ensuring the entire codebase could be public on GitHub without exposing vulnerabilities

🏆 Accomplishments I'm proud of

• Built a fully public leaderboard system that can't be abused, even without login
• Converted Firebase rules into something close to a formal verification system
• Members of my chapter now see their growth visualized as data, not just guesses
• Watching someone improve their score because they saw their name drop on the leaderboard was the moment it became more than just code

📚 What I learned

• Security is not something you “add later”—it’s embedded in architecture
• Firebase rules can be used almost like writing logical invariants
• A simple system, if designed with intention and constraints, can rival complex full-stack solutions
• Real engineering isn’t building features—it’s designing systems that change behavior

🚀 What's next for FBLACER

• Expanding analytics to generate personal improvement graphs over time
• Optional account linking to track long-term competitive metrics
• Opening API endpoints so other chapters nationwide can plug into the same leaderboard infrastructure
• Turning FBLACER into a template system for other student organizations to adopt competitive studying

Built With

• chart.js
• css
• firebase
• github
• html
• javascript
• json