Developer Needed: Figma to React Native with Tamagui and Firebase

Project Overview

We're seeking an experienced React Native developer to help accelerate our Figma-to-code conversion process for a social application. This project requires expertise in using conversion tools like Locofy.ai to transform our existing Figma designs into production-ready React Native components, with a focus on the onboarding flow and Firebase integration.

About the Application

Our app is a social platform built with React Native and Tamagui, designed to help users plan activities and stay connected with friends. The app features messaging, calendar events, activity creation, and profile management in a cohesive social experience.

Current Tech Stack

React Native with Expo for cross-platform mobile development

Tamagui as our UI component library and styling system

Redux for state management

React Navigation for navigation system

Firebase for backend services (authentication, database, storage)

TypeScript for type safety

Current Implementation Status

Our codebase already includes

A comprehensive component architecture with three tiers:

Core components (Button, Text, TextField, IconButton)

Composed components (Card, FormField, BottomSheet)

Feature components (ProfileHeader, EventCard, MessageItem)

Established typography system using Obviously (headings) and Montserrat (body) fonts

Color system with primary (purple), secondary (blue), and accent (pink) palettes

Icon system with categorized SVG icons for navigation, messaging, and utility functions

Tamagui configuration with light/dark theme support

Navigation structure using React Navigation

Redux store organized by feature domains (activities, calendar, chat, profile)

Project Requirements

Primary Task: Implement Onboarding Flow

Convert the Figma designs for our onboarding flow into working React Native screens using Locofy.ai, including:

Phone verification with code input

Profile creation with photo upload

Contact permission request

Friend discovery from contacts

Firebase Integration

Connect the onboarding flow to Firebase services

Implement Firebase Authentication for phone verification

Set up Firestore for user profile data

Configure Firebase Storage for profile image uploads

Implement security rules for data access

Technical Requirements

Use Locofy.ai to accelerate the Figma-to-code conversion process

Ensure all generated components follow our established Tamagui configuration

Refine generated code to match best practices for performance and accessibility

Implement responsive scaling for different device sizes

Follow the existing project structure and architecture

Write clean, maintainable code with proper TypeScript typing

Skills Required

Strong experience with React Native and TypeScript

Experience with Locofy.ai or similar Figma-to-code tools

Proficiency with Tamagui or similar styling systems (Styled Components, Emotion)

Experience with Firebase authentication and data storage

Understanding of mobile UX and responsive design principles

Ability to write clean, performant code following established patterns

Deliverables

Complete implementation of the onboarding flow screens

Firebase integration for authentication and data storage

Documentation of any new components or patterns

Unit tests for key functionality

Qualifications

• TypeScript for type safety
• Implement Firebase Authentication for phone verification
• Configure Firebase Storage for profile image uploads
• Strong experience with React Native and TypeScript
• Experience with Locofy.ai or similar Figma-to-code tools
• Proficiency with Tamagui or similar styling systems (Styled Components, Emotion)
• Experience with Firebase authentication and data storage
• Understanding of mobile UX and responsive design principles
• Ability to write clean, performant code following established patterns
• Firebase integration for authentication and data storage

Responsibilities

• The app features messaging, calendar events, activity creation, and profile management in a cohesive social experience
• React Native with Expo for cross-platform mobile development
• Tamagui as our UI component library and styling system
• Redux for state management
• React Navigation for navigation system
• Firebase for backend services (authentication, database, storage)
• Core components (Button, Text, TextField, IconButton)
• Composed components (Card, FormField, BottomSheet)
• Established typography system using Obviously (headings) and Montserrat (body) fonts
• Color system with primary (purple), secondary (blue), and accent (pink) palettes
• Icon system with categorized SVG icons for navigation, messaging, and utility functions
• Tamagui configuration with light/dark theme support
• Navigation structure using React Navigation
• Redux store organized by feature domains (activities, calendar, chat, profile)
• Primary Task: Implement Onboarding Flow
• Convert the Figma designs for our onboarding flow into working React Native screens using Locofy.ai, including:
• Phone verification with code input
• Set up Firestore for user profile data
• Implement security rules for data access
• Use Locofy.ai to accelerate the Figma-to-code conversion process
• Ensure all generated components follow our established Tamagui configuration
• Refine generated code to match best practices for performance and accessibility
• Implement responsive scaling for different device sizes
• Follow the existing project structure and architecture
• Write clean, maintainable code with proper TypeScript typing
• Complete implementation of the onboarding flow screens