Skip to main content

​
What is Playground?

Playground is a comprehensive productivity web application designed to streamline daily tasks and workflows. Built with Firebase authentication and real-time database integration, it offers a suite of productivity modules accessible through a unified platform. Playground Logo

​
Key Features

Firebase Authentication

Secure user authentication with automatic session management and 8-hour session timeouts

Multiple Productivity Modules

Access calculators, templates, procedures, tools, and scheduling systems in one place

Real-time Database

Firebase Realtime Database integration for instant data synchronization

Customizable Themes

Personalized user experience with custom colors, fonts, and background images

​
Available Modules

Playground includes the following productivity modules:
1

Calculadora (Calculator)

Grade calculator with percentage-based calculations and minimum passing grade features
2

Herramientas (Tools)

Collection of utility tools for various tasks
3

Plantillas (Templates)

Pre-built templates for common workflows
4

Procedimientos (Procedures)

Step-by-step procedure guides and documentation
5

Horarios Stop Jeans

Scheduling system for Stop Jeans operations
6

BlackJack Game

Integrated gaming module for breaks

​
Technology Stack

  • HTML5 with semantic markup
  • CSS3 with custom CSS variables for theming
  • JavaScript (ES6+) for client-side logic
  • Font Awesome for iconography
  • Google Fonts (Nunito, Open Sans)
  • Firebase Authentication (v8.10.0)
  • Firebase Realtime Database for data persistence
  • Netlify Functions for serverless operations
  • Math.js (v9.4.4) for advanced calculations
  • ICS.js for calendar generation

​
User Management

Playground supports multiple users with personalized preferences: 
let agentesA = {
    "andres.yepes": { nombre: "Andrés_Felipe_Yepes_Tascón" },
    "judy.buitrago": { nombre: "Judy_Andrea_Buitrago_Solis" },
    "yeison.torres": { nombre: "Yeison_Torres_Ochoa" },
    "maria.ospina": { nombre: "Maria_Susana_Ospina_Vanegas" },
    "ocaris.arango": { nombre: "Ocaris_David_Arango_Aguilar" },
    "johan.guzman": { nombre: "Johan_Guzman_Alarcon" },
    "diego.usuga": { nombre: "Diego_Alejandro_Úsuga_Yepes" },
    "santiago.ramirez": { nombre: "Santiago_Ramirez_Guzman" }
};
Each user has personalized settings stored in localStorage, including theme preferences, color schemes, and module configurations.

​
Architecture Overview

Playground follows a modular architecture with shared components: 
playground/
├── Authentication Layer (Firebase Auth)
├── Navigation Header (shared across modules)
├── Module Pages
│   ├── Calculadora
│   ├── Herramientas
│   ├── Plantillas
│   ├── Procedimientos
│   └── Horarios
├── Configuration System
├── Theme Engine (PreferenciasColores)
└── Notification System

​
Security Features

Playground implements several security measures:
  • Session timeout after 8 hours
  • Firebase authentication integration
  • Email format validation
  • Protected routes requiring authentication

​
Browser Support

Playground is optimized for modern browsers:
  • Chrome (recommended)
  • Firefox
  • Safari
  • Edge
Mobile responsive design ensures accessibility across devices with viewport meta tags and adaptive layouts.
Copyright (c) 2024 Andrés Felipe Yepes Tascón
Licensed under the MIT License

​
Next Steps

Get Started

Learn how to set up and start using Playground

Authentication Guide

Understand the authentication flow and user management

Build docs developers (and LLMs) love

Get started for freeTalk to us