Gelaph Almahan

Overview

I developed a React application for Gelaph Almahan using Firebase for authentication and real-time data, with UI/UX improvements from Figma through to the implemented interface.

Problem

Authentication and live data create UI states that static mockups do not show: signed out, authenticating, signed in, disconnected, and permission-limited views.

My role

React application development, Firebase integration, UI/UX improvements, and attention to responsiveness, accessibility, performance, security, and cross-browser behavior.

Constraints

• / Firebase as the auth and real-time data layer.
• / UI needed to remain usable across breakpoints and browsers.
• / Security and session handling could not be an afterthought to visual polish.

User flow

• / Arrive signed out.
• / Authenticate.
• / Enter the signed-in product surface with real-time data.
• / Recover clearly if the session or connection fails.

Interface

The reconstructed demo compresses session states into a small product surface: signed out, authenticating, and signed in — with the signed-in view depending on a successful session.

Architecture

• / Auth state as the root of what the UI is allowed to show.
• / Real-time listeners bound to signed-in views.
• / Responsive layout as a first-class concern, not a later pass.

Key technical decisions

• / Drive the interface from session state rather than hiding unauthenticated screens with CSS.
• / Keep Figma decisions visible in spacing, hierarchy, and component states.
• / Treat cross-browser and accessibility work as part of shipping, not as a separate aesthetic.

States & edge cases

• / Signed out
• / Authenticating
• / Signed in
• / Auth error

Responsive behavior

Layout was built to hold together from mobile through desktop. The demo uses the same stacking logic at narrow widths.

Accessibility

Auth actions are labeled buttons. Status is exposed to assistive tech. Focus remains on the control that initiated the change.

Testing / quality

Security, responsiveness, and cross-browser behavior were part of the work, alongside UI implementation.

Performance

Keep the signed-in surface light: avoid rendering authenticated views before the session exists, and keep real-time updates from thrashing layout.

Outcome

A React application with authentication, real-time data, and a more considered interface across devices.

What I learned

Auth is not a screen. It is a permission model that the entire interface has to respect.

What I would improve

I would make empty, error, and reconnect states even more explicit in the signed-in product surface.