About
Work
Blog
ProjectsJanuary 23, 2025

CityPulseApp - React Native Event Discovery App

Farukh Saifi
CityPulseApp - React Native Event Discovery App

Overview

CityPulseApp is a comprehensive React Native mobile application built with Expo SDK 53 for discovering and managing local events. The app features a clean, modular architecture with local storage persistence, making it fully functional offline. It demonstrates expertise in mobile development, API integration, state management, and internationalization.

Key Features

  • Event Discovery: Search and browse local events using Ticketmaster Discovery API v2
  • User Authentication: Secure login and signup system with local user management
  • Favorites Management: Save and organize favorite events with local persistence using AsyncStorage
  • Biometric Authentication: Support for Face ID, Touch ID (iOS), and Fingerprint (Android)
  • Multi-language Support: English and Arabic interface with full RTL layout support
  • Theme System: Light and dark mode with dynamic switching
  • Offline Capability: Full functionality without internet connection using AsyncStorage
  • Responsive Design: Optimized for various screen sizes and orientations
  • Error Handling: Comprehensive error management with user-friendly alerts
  • Firebase Ready: Infrastructure prepared for cloud backend integration

Technologies Used

  • Framework: React Native with Expo SDK 53
  • Navigation: React Navigation (Stack + Bottom Tabs)
  • State Management: React Context API
  • Local Storage: AsyncStorage for data persistence
  • Internationalization: i18n-js with expo-localization
  • UI Components: Expo Vector Icons, LinearGradient
  • Maps: React Native Maps integration
  • Animations: React Native Reanimated
  • API Integration: Ticketmaster Discovery API v2

Technical Highlights

  • Bridge Pattern Architecture: Clean separation of business logic from UI components
  • Service Layer: Modular API integration and data management
  • Intelligent Caching: 5-minute cache duration for API responses
  • Retry Mechanism: 3 attempts with 10-second timeout handling
  • Pagination Support: Efficient handling of large event datasets
  • RTL Support: Automatic layout direction handling for Arabic
  • Biometric Security: Secure storage using device secure enclave
  • Error Boundaries: Comprehensive error handling system with user feedback

Architecture

The app follows a well-organized structure:
  • Bridge Pattern: Business logic separated from UI components
  • Service Layer: API integration and data management
  • Custom Hooks: Reusable logic for components
  • Context Providers: AppContext, ErrorContext, ThemeContext
  • Modular Components: Reusable UI components with consistent styling
  • Utility Services: Validation, error handling, and utility functions

Key Screens

  • HomeScreen: Main event discovery with search and filtering
  • EventDetailsScreen: Comprehensive event information
  • FavoritesScreen: Saved events management
  • ProfileScreen: User profile with biometric settings
  • Login/Signup Screens: Secure authentication flow
  • SplashScreen: App loading and initialization

Challenges and Solutions

Challenge 1: Offline Functionality

Problem: Ensuring full app functionality without internet connection
Solution: Implemented AsyncStorage for local persistence of user data, favorites, and preferences. Created intelligent caching system for API responses.

Challenge 2: Multi-language Support

Problem: Supporting both English and Arabic with RTL layout
Solution: Integrated i18n-js with expo-localization for dynamic language switching. Implemented automatic RTL layout direction handling.

Challenge 3: API Rate Limiting

Problem: Managing Ticketmaster API rate limits and errors
Solution: Implemented retry mechanism (3 attempts), timeout handling (10 seconds), and intelligent caching to minimize API calls.

Challenge 4: State Management

Problem: Managing complex app state across multiple screens
Solution: Used React Context API for global state management, avoiding prop drilling while keeping the architecture lightweight.

Real-World Applications

This project demonstrates practical mobile development skills applicable to:
  • Event Management Platforms: Similar apps for concerts, conferences, sports events
  • Location-Based Services: Apps requiring geospatial data and maps
  • Offline-First Applications: Apps that need to work without constant internet
  • Multi-language Apps: International applications requiring localization
  • Biometric Security: Apps requiring secure authentication

Outcome

CityPulseApp successfully demonstrates:
  • Proficiency in React Native and Expo development
  • Understanding of mobile app architecture patterns
  • API integration and data management skills
  • Internationalization and localization expertise
  • Offline-first development approach
  • Security implementation (biometric authentication)
  • User experience design for mobile platforms
The project showcases full-stack mobile development capabilities, from UI/UX design to backend integration, making it a comprehensive portfolio piece for mobile development roles.

Repository

View on GitHub

Related projects

SyncApp - Multi-Platform Blog Syndication Platform

A full-stack blog posts syndication platform that allows writers to publish content to multiple platforms simultaneously. Built with React, Node.js, Express, and MongoDB, featuring rich text editing, Markdown support, and integrations with Medium, DEV.to, and WordPress.
About this projectView project

Natours API - RESTful Tour Booking Backend

A comprehensive RESTful API backend for a tour booking application. Built with Node.js, Express, and MongoDB, featuring user authentication, tour management, booking system, payment integration, and advanced filtering capabilities.
About this projectView project

Music App - Modern Music Player Application

A modern music player application built with React, featuring music playback, playlist management, library organization, and a beautiful user interface. Demonstrates audio handling, state management, and responsive design.
About this projectView project

GitHub Finder - GitHub Dashboard with Context API

A GitHub dashboard application that uses the GitHub API to display user profiles, repositories, and statistics. Built with React, Context API for state management, and modern UI components.
About this projectView project

ContactKeeper - MERN Stack Contact Management App

A full-stack contact management application built with MERN stack (MongoDB, Express.js, React, Node.js) featuring Material UI for a modern, responsive interface.
About this projectView project

DJ Event Frontend - Next.js Event Management

A modern event management frontend application built with Next.js and TypeScript. Features server-side rendering, static site generation, and optimized performance for event listings and management.
About this projectView project

Budgety - Budget Management App in React

A personal budget management application built with React, helping users track income, expenses, and calculate budgets. Features an intuitive interface for financial planning and tracking.
About this projectView project

IT Logger - Redux & Redux Thunk Application

An IT logging application built with React and Redux for state management, featuring Redux Thunk for handling asynchronous actions. Demonstrates advanced state management patterns.
About this projectView project

Building Once UI, a Customizable Design System

Development of a flexible and highly customizable design system using Next.js for front-end and Figma for design collaboration.
About this project

Once UI: Open-source design system

Automating Design Handovers with a Figma to Code Pipeline

Explore the enduring debate between using spaces and tabs for code indentation, and why this choice matters more than you might think.
About this projectView project

Todo App - React + Vite + TailwindCSS

A modern, fast Todo application built with React, Vite for lightning-fast development, and TailwindCSS for beautiful, utility-first styling. Demonstrates modern React patterns and build tooling.
About this projectView project