PlayaSegura is a web application built to register lifeguard interventions and daily incidents in a clear, organized and practical way.
The project was designed as a frontend solution for lifeguard services, municipalities or beach safety teams that need to record operational activity, store daily interventions and build a better foundation for future analysis and decision-making.
🌐 Live demo: https://playa-segura.netlify.app/
🔗 Repository: https://github.com/Lucas-Epherra/PlayaSegura
- Overview
- Project status
- Tech stack
- Main features
- Problem it solves
- Project structure
- Local installation
- What I practiced
- Challenges
- Future improvements
- Why this project matters
- Author
PlayaSegura was created with a real-world use case in mind.
In many beach safety operations, daily interventions are still recorded manually or in fragmented formats. This makes it difficult to review information later, identify patterns or make better operational decisions.
The goal of this project is to centralize that information in a simple digital system where incidents can be registered, displayed, edited, deleted and stored locally.
Beyond basic CRUD functionality, the long-term goal is to support data-driven decisions such as:
- Identifying high-incident areas.
- Improving staff distribution.
- Evaluating resource needs.
- Analyzing intervention patterns over time.
- Supporting operational planning with structured information.
Current status: frontend CRUD prototype.
The project currently includes:
- Intervention registration.
- Structured incident table.
- Edit and delete actions.
- Local data persistence.
- Basic multi-view structure.
- Simple and practical user interface.
This version works as a frontend MVP and can be evolved into a more complete operational system with authentication, backend integration and analytics.
- HTML5
- CSS3
- JavaScript
- LocalStorage
- Netlify
- Create new intervention records.
- Display incidents in a structured table.
- Edit existing records.
- Delete records.
- Persist data locally with LocalStorage.
- Organize daily operational information.
- Provide a simple interface for practical field use.
- Support the concept of future analytics based on historical records.
Lifeguard services often need better visibility into what happens during daily operations.
Without structured data, it becomes harder to answer important questions such as:
- Which areas require more coverage?
- What types of incidents happen most often?
- Are more staff members needed in specific locations?
- What equipment is most frequently required?
- How does operational activity change throughout the season?
PlayaSegura helps turn daily records into useful operational information.
PlayaSegura/
├── .vscode/
├── css/
├── imgs/
├── js/
├── json/
├── vistas/
├── index.html
└── README.mdcss/: stylesheets and visual layout.imgs/: images and static visual assets.js/: JavaScript logic, DOM manipulation and CRUD behavior.json/: local/static data used by the application.vistas/: additional views or HTML sections.index.html: main entry point of the application.
Clone the repository:
git clone https://github.com/Lucas-Epherra/PlayaSegura.gitMove into the project directory:
cd PlayaSeguraOpen the project:
start index.htmlOr open index.html manually in your browser.
You can also run it using the Live Server extension in Visual Studio Code.
This project helped me strengthen and apply skills such as:
- DOM manipulation.
- Form handling.
- Basic form validation.
- Dynamic rendering.
- CRUD logic with Vanilla JavaScript.
- Local data persistence with LocalStorage.
- Frontend structure without a framework.
- Organizing data around a real operational use case.
- Building a practical interface instead of a generic demo app.
Some of the main challenges during development were:
- Organizing create, edit and delete flows clearly.
- Keeping the interface simple and practical.
- Structuring records with future analytics in mind.
- Managing local persistence correctly.
- Designing a project around real operational value.
- Translating lifeguard field experience into a digital workflow.
The next step for PlayaSegura is to evolve from a record-management tool into a more complete operational platform.
Planned improvements include:
- Charts and statistics dashboard.
- Filters by date, area or incident type.
- Exportable reports.
- Backend and database integration.
- Authentication and user roles.
- Seasonal data history.
- Advanced analytics for service planning.
- Improved responsive design.
- Accessibility improvements.
- Migration to React for better component organization.
PlayaSegura is not just a basic CRUD project.
It represents my approach to building frontend applications with real-world purpose. The project focuses not only on interface development, but also on how software can help organize operational information, improve visibility and support better decisions through structured data.
This project is especially connected to my background as a lifeguard, where clear records, fast decisions and organized information can have real operational impact.
Developed by Lucas Epherra.
Frontend Developer with real-world experience as a lifeguard, focused on building practical web interfaces for operational, monitoring and safety-related use cases.
- Portfolio: https://www.lucasepherra.com.ar/
- GitHub: https://github.com/Lucas-Epherra
- LinkedIn: https://www.linkedin.com/in/lucas-epherra
This project is part of my frontend learning path and explores how web applications can support beach safety operations.
The long-term idea is to evolve it from a CRUD prototype into a more complete operational tool for lifeguards, municipalities and beach management teams.