1. Introduction

This week’s development work focused on establishing the authentication frontend for the HireRosterly mobile application. The project uses React Native with Expo, and the frontend was structured to support Signup and Login flows while keeping the UI reusable, maintainable, and ready for backend API integration.

2. Moving from React to React Native

React Native keeps the component-driven approach familiar to React developers, but the UI is built with native components such as View, Text, TextInput and Pressable rather than HTML elements. Expo provides the development workflow and Expo Router provides file-based navigation. This made the project structure an important part of the learning process.

3. Authentication Screen Structure

The authentication area was separated from the rest of the application using an auth route group. The current frontend includes Signup and Login screens, with a dedicated authentication layout.

• Signup screen for creating an account.
• Login screen for existing users.
• Reusable authentication inputs and password input.
• Reusable authentication header, card, layout and primary button components.
• HR / Employee role selection on Signup.

4. Reusable Components

Instead of keeping every input and button implementation inside a screen, reusable components were created. This approach keeps the Signup and Login screens cleaner and makes future authentication screens easier to build.

• AuthInput — reusable text/email input with label, icon and error state.
• PasswordInput — password field with secure text visibility toggle and validation error state.
• AuthHeader — consistent authentication title and subtitle.
• AuthCard / AuthLayout — consistent screen structure and spacing.
• RoleSelector — HR and Employee selection.
• PrimaryButton — consistent authentication action button.

5. Form Validation

Frontend validation was added to improve usability and provide immediate feedback before requests are sent to the backend. The authentication forms use React Hook Form together with Zod schemas.

Signup validation currently covers:

• Full name must contain at least two characters.
• Email must use a valid email format.
• Password must contain at least eight characters.
• Confirm password is required.
• Password and confirm password must match.
• Role must be either HR or Employee.

Login validation currently covers email format and the required password field.

6. Challenges and Learnings

The main learning challenge was moving from a web-focused React / Next.js workflow to React Native. Expo Router, mobile component behavior and device testing required a different mental model. During setup, NativeWind / Babel configuration also produced Metro bundling problems, which reinforced the importance of keeping the configuration minimal and compatible with the selected Expo SDK.

7. Git & Delivery Workflow

The completed authentication frontend was committed and pushed to the dedicated Hassan branch. This keeps the work isolated from the main branch and allows the backend and frontend workstreams to progress independently before integration.

8. Preparing for API Integration

The authentication UI is currently API-ready but is not dependent on unavailable backend endpoints. Once the backend developer provides the API contract, the frontend will connect the Signup and Login forms to the authentication endpoints and handle loading, success, validation and server-error states.

9. Next Development Plan

1. Review the authentication API endpoints and request / response contracts.
2. Integrate the Signup API.
3. Integrate the Login API.
4. Implement authentication state according to the backend’s token/session design.
5. Test successful and failed authentication scenarios.
6. Continue with Forgot Password and Reset Password once the backend API specification is available.

10. Conclusion

This week’s work established the authentication foundation of HireRosterly Mobile. The frontend now has a structured Signup and Login experience, reusable components, client-side validation and a clean branch-based delivery workflow. The next milestone is connecting this frontend to the backend authentication APIs and validating the complete flow end to end.

Author: Hassan Shafique