01
CONTEXT
Swara was developed as a team project for the student council election at SMKN 1 Karawang. My primary responsibility was the frontend and voting user flow, covering candidate discovery through vote confirmation and post-vote states.
CASE STUDY / 2b2477eb-4061-4938-a202-d55e86239844PUBLIC
// HOW I BUILD
SWARA - E-VOTING KETUA OSIS.
A school election web application used by 2,000+ students, with my primary contribution focused on the responsive frontend and end-to-end voting user experience.
Project brief
- ROLE
- Frontend Developer
- ACCESS
- PUBLIC
- TECHNOLOGY
- BOOTSTRAP · CSS · HTML · JAVASCRIPT · LARAVEL BLADE · RESPONSIVE WEB DESIGN · WEB APPLICATION
PROJECT VIEW / 01
CUBYCLOUD / DRIVE● ●
▱Product
▱Design
▱Archive
▱Notes
#01 / CASE FILE
FROM CONTEXT
TO DELIVERY.
A concise view of the problem, the working context, and the response behind this project.
02
THE PROBLEM
The election required an accessible web interface that could guide a large student population through authentication, candidate information, voting, confirmation, and results without creating unnecessary confusion during the election process.
03
DECISIONS / RESPONSE
Designed the frontend around a simple sequential voting journey. Focused on responsive layouts, clear candidate information, confirmation states, and UI behavior that reflected whether a student had already voted. Integrated the frontend with the existing Laravel authentication and voting flow.
#02 / IMPLEMENTATION VIEW
THE SYSTEM
BEHIND THE
SURFACE.
Developed server-rendered interfaces using Laravel Blade, Bootstrap, JavaScript, HTML, and CSS. Built screens for candidate discovery, vision and mission details, voting confirmation, post-vote status, and election results. Integrated forms with NIS-based authentication and the backend voting flow, including CSRF-protected submissions and UI state for users who had already cast a vote.
BOOTSTRAPCSSHTMLJAVASCRIPTLARAVEL BLADERESPONSIVE WEB DESIGNWEB APPLICATION
#03 / OUTCOME
BUSINESS / PRODUCT VIEW
WHAT THE WORK
ENABLES.
The application was used in a real school election by more than 2,000 students through a self-hosted server and supported the voting process through completion.
UP NEXTCASE / 62ccffc5-0e15-4930-946c-f4d40e60e44a
POULTRY FARM MANAGEMENT BACKEND
READ CASE STUDY →#04 / NEXT CONVERSATIONWORK / PROJECTS
LET'S BUILD
WHAT MATTERS?
Open to full-time engineering opportunities and end-to-end software projects.