Fransiskus Agapa

Approach

Built a comprehensive car dealership management system using a full-stack approach with Flask backend and MySQL database. Chose MySQL for reliable relational data storage to handle car specifications, user accounts, and dealership inventory data. Implemented secure authentication using bcrypt hashing and session management for multi-user environments.

Key Technical Decisions:

• Used Flask with Jinja2 templating for dynamic server-side rendering
• Implemented bcrypt password hashing for secure user authentication
• Designed normalized MySQL database schema for efficient data relationships
• Added CRUD operations with form validation and error handling

Challenges & Solutions

• Challenge: Managing complex relationships between users, cars, and dealership data
  Solution: Designed normalized database schema with foreign keys and implemented proper joins for data retrieval
• Challenge: Securing user authentication and preventing unauthorized access
  Solution: Used bcrypt for password hashing and Flask sessions for secure login state management
• Challenge: Creating responsive forms that work across different devices
  Solution: Implemented mobile-first CSS design with flexible form layouts and validation feedback

Learning Outcomes

• Gained expertise in full-stack web development with Flask framework
• Learned MySQL database design principles and complex query optimization
• Developed skills in secure authentication and session management
• Enhanced understanding of MVC architecture and server-side templating
• Improved knowledge of form handling, validation, and user experience design

Approach

Developed an accessibility-focused to-do application using Flask backend with JavaScript Web Speech API integration. Focused on creating an inclusive interface that empowers users with mobility challenges through hands-free voice control. Implemented continuous speech recognition with real-time feedback and visual confirmations.

Key Technical Decisions:

• Used Web Speech API for continuous voice recognition and command processing
• Implemented Flask backend for task persistence and user session management
• Added visual feedback with animations and status indicators for accessibility
• Created large, high-contrast UI elements optimized for users with visual impairments

Challenges & Solutions

• Challenge: Creating an intuitive voice interface that understands natural language commands
  Solution: Implemented keyword recognition with flexible command patterns and voice feedback confirmation
• Challenge: Ensuring accessibility across different browsers and speech capabilities
  Solution: Added fallback keyboard controls and tested extensively across browsers with speech synthesis feedback
• Challenge: Managing continuous speech recognition without overwhelming the system
  Solution: Used speech recognition event handling with timeout controls and clear start/stop indicators

Learning Outcomes

• Mastered Web Speech API implementation and browser speech capabilities
• Learned accessibility principles and inclusive design practices for assistive technology
• Gained experience in natural language processing for voice command interpretation
• Developed understanding of user experience design for disability inclusion
• Enhanced skills in real-time JavaScript event handling and user feedback systems

Approach

Created an interactive mood tracking application for NSBE club presentation using vanilla JavaScript with localStorage for data persistence. Designed with accessibility in mind, featuring large touch-friendly emoji buttons and dynamic color schemes that reflect user mood patterns. Implemented data visualization to show mood trends over time without external dependencies.

Key Technical Decisions:

• Used localStorage for client-side data persistence to avoid backend complexity
• Implemented CSS custom properties for dynamic background colors based on selected mood
• Created responsive touch interface optimized for both desktop and mobile interactions
• Added data export functionality for users to analyze their mood patterns

Challenges & Solutions

• Challenge: Creating an intuitive and accessible interface for mood selection
  Solution: Used large emoji buttons with clear visual feedback and keyboard navigation support
• Challenge: Visualizing mood data in a meaningful way without external charting libraries
  Solution: Built custom CSS-based charts using flexbox and CSS animations for mood trend visualization
• Challenge: Ensuring data privacy while providing useful mood insights
  Solution: Kept all data local to the user's browser with optional export features for personal analysis

Learning Outcomes

• Enhanced skills in vanilla JavaScript and DOM manipulation for interactive interfaces
• Learned about accessibility principles and inclusive design practices for mental health applications
• Gained experience in data visualization using pure CSS techniques and animations
• Developed understanding of user experience design for sensitive personal data collection
• Improved presentation skills through NSBE club demonstration and technical explanation
• Enhanced knowledge of localStorage API for client-side data persistence and privacy