Hero Image
theWhiteFoxDev
Learn by Doing: Building a React Native App with the AIC API

Learn by Doing: Building a React Native App with the AIC API

Authors

Learn by Doing

I started this project as a proof of concept for using React Native and the Art Institute of Chicago API—and as the foundation for a larger goal: creating educational Android and iOS apps.

Download the App

  • apps.apple.com art institute app

  • Android version currently in pre-production testing on Google Play

    • Introduction: Cross-platform Mobile App Development

    Cross-platform mobile development allows a single codebase to run on both iOS and Android. In today's mobile-first world, demand for these solutions is growing, and I wanted to combine learning with practical experience.

    For me, the biggest advantage of this approach is code reuse. As a React TypeScript developer, React Native allowed me to leverage my existing skills—from component logic to hooks and API utilities—without learning platform-specific languages like Swift or Java. A single codebase reduces development time and simplifies maintenance.

    While alternatives like Google Flutter exist, I chose React Native because I already work in a React/Next.js environment and have several projects built on this stack. Using Expo, I could rapidly prototype, test on multiple devices, and deploy faster for both Android and iOS.

    Project Goal and Proof of Concept

    The MVP (Minimum Viable Product) showcases artwork data—including images, titles, and descriptions—fetched from the AIC API.

    The goal of this project was to explore how to consume and display API data interactively with features such as swipe-to-browse, filtering, and search.

    I connected to the Art Institute of Chicago API to pull information on artworks, events, and tours, including images, titles, and descriptions. This demonstrates how educational content can be transformed into engaging, interactive mobile experiences.

    My Tech Stack

    • React Native – The framework used for building the app.
    • Expo Go – For rapid development and testing with emulators.
    • TypeScript – For stronger typing and a better developer experience that lets me operate in a truly full-stack manner.
    • VSCode – My editor of choice with Copilot for AI assistance.
    • CodeRabbit – An AI tool for automating code reviews.
    • Node.js – For running the development server.
    • Figma – For designing the app’s user interface.
    • Arch Linux – Fast and lean, with a great CLI for rapid development.

    Most of my tech stack was already in place; only React Native and Expo Go were new additions for this project.

    Getting Started with Expo

    I started my project with npx create-expo-app and Expo Go, which made setting up my development environment much easier than a traditional React Native CLI setup. Following the Expo documentation, I was able to quickly prototype and test my app on both iOS and Android simulators, as well as on my physical phone.

    This phase was incredibly educational. It taught me not only how React Native works but also how to structure a mobile app project and why a consistent design system matters.

    Research and Design: The Art Institute App

    Before writing any code, I began with design. My main goal was to create an app that would allow users to explore the Art Institute of Chicago’s rich collection. I researched other museum apps to understand their UX and UI patterns.

    My key questions were:

    • Architecture & Navigation:
      • Tab-based or something else?
      • Is navigation intuitive?
    • Content Discovery:
      • How do users browse collections, artists, themes, or events?
      • Are search and filtering options robust?
    • Content Display:
      • How do popular apps present and organize artworks?
      • What’s on detail pages (image, artist, date, medium, description, audio, related works)?
    • Advanced Features:
      • Personalization: Can users like works, view tours, or events?
      • Accessibility: Font sizes, contrast, screen reader compatibility?
      • Engagement: Virtual tours or interactive features?
      • Offline access: While crucial for on-site museum visitors, offline access was less critical for my API-focused demo. Since my app is a non-commercial, educational showcase with no ads or inappropriate content, I focused on providing a clean, learning-oriented experience.

    I decided to use the Art Institute of Chicago’s public API because it’s well-documented and I have a personal connection to the museum, having visited it during my first-year summer break in art college. It was the perfect mix of a great resource and a project I’d genuinely enjoy building.

    For design inspiration, I looked to the Louisiana Museum of Modern Art app for its clean aesthetic and intuitive navigation.

    Key features I planned included:

    • A date picker for events
    • Searchable artwork lists
    • Viewing multiple works by the same artist
    • Separate sections for tours and translations

    Multilingual Support and Educational Accessibility

    To make the app more accessible, I focused on multilingual support and educational resources. Since the AIC API doesn’t provide translations, I created static JSON files for English, French, Spanish, and German (with plans for Chinese, Hindi, and Japanese later). I used react-i18next, a popular i18n library for translations, following the standard t('welcome') pattern for localized text.

    Ultimately, this app serves as a proof of concept—a core demo showcasing the skills and educational vision behind my future company.

    Figma Design

    Here’s a look at my initial design using Figma:

    Diving into the Code: Hitting the API

    With the initial setup and design in place, it was time to connect the app to the AIC API. My first goal was to fetch a list of artworks and display them.

    The API is well-documented, but parsing the nested JSON and constructing image URLs using the IIIF format took some trial and error. IIIF (International Image Interoperability Framework) is an open standard that defines how museums and libraries deliver high-quality, consistent images—a valuable standard for cultural APIs.

    Here's the code snippet I used to fetch and display the data:

    import { useEffect, useState } from 'react'
import { Image, StyleSheet, Text, View } from 'react-native'
import { ScrollView } from 'react-native-gesture-handler'

type Artwork = {
    id: number
    title: string
    artist_display: string
    image_id: string
}

export default function ArtworksScreen() {
    const [artworks, setArtworks] = useState<Artwork[]>([])

    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch(
                'https://api.artic.edu/api/v1/artworks'
            )
            const artworksData = await response.json()
            setArtworks(artworksData.data)
        }
        fetchData()
    }, [])

    // Helper function to build image URL
    function buildImageUrl(
        imageId: string | undefined,
        width: number,
        height: number
    ) {
        if (!imageId) return null
        return `https://www.artic.edu/iiif/2/${imageId}/full/${width},${height}/0/default.jpg`
    }

    return (
        <View style={styles.container}>
            <ScrollView>
                <Text style={styles.title}>Artworks</Text>
                {artworks.map((artwork: Artwork) => {
                    const imageUrl = buildImageUrl(artwork.image_id, 300, 400)

                    return (
                        <View key={artwork.id}>
                            {/* Only render the image if a valid URL exists */}
                            {imageUrl && (
                                <Image
                                    source={{ uri: imageUrl }}
                                    style={{ width: 400, height: 200 }}
                                />
                            )}
                            <Text style={styles.title}>{artwork.title}</Text>
                            <Text style={styles.text}>
                                {artwork.artist_display}
                            </Text>
                        </View>
                    )
                })}
            </ScrollView>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#25292e',
        alignItems: 'center',
    },
    text: {
        color: '#fff',
        width: 400,
        paddingBottom: 16,
    },
    title: {
        color: '#fff',
        width: 400,
        paddingVertical: 8,
        fontWeight: 'bold',
        fontSize: 18,
    },
})

    Testing on Devices

    One of the most satisfying parts of mobile development is seeing your app come to life on a real device. I tested regularly on both Android and iOS devices using the Expo Go app, which lets you run your project without building a standalone app. This made it easy to iterate quickly and catch UI issues early.

    Building the App for Android and iOS

    Once the core functionality worked, I focused on building production versions for both Android and iOS using Expo's build service. This was straightforward thanks to Expo's managed workflow, which abstracts much of the complexity of native builds.

    After logging into my Expo account using expo login, I ran:

    eas build -p android --profile production
eas build -p ios --profile production
eas submit -p ios --profile production

    Publishing

    Android: Google Play Store

    Publishing requires a Google Play Developer account, which costs a one-time fee of €25. Once registered, you create a new app in the Play Console, fill out details (title, description, screenshots, privacy policy, etc.), and upload your build.

    Before going live, Google Play requires testing with a minimum of 12 testers over 14 days. While this was unexpected, it pushed me to refactor and improve my code structure. I also resolved a Google Maps crash caused by SHA-1 authentication and SDK configuration.

    After testing internally and via a Google Group: testers-community@googlegroups, I was able to gather valuable feedback before submission.

    Don’t forget to provide a privacy policy and ensure your app complies with Google’s guidelines, including:

    • Developer/entity name matching the Play listing
    • Data collection, retention & deletion policies
    • Secure data handling
    • Third-party SDK disclosures
    • A visible in-app privacy link

    iOS: Apple App Store

    For iOS, I set up an Apple Developer account (€99/year). It's a worthwhile investment for publishing future app releases.

    After connecting my Expo and Apple Store Connect accounts, I submitted the build using:

    eas submit -p ios --profile production

    Conclusion: What I've Learned so Far

    This project has been an incredible learning experience. My key takeaways:

    • Expo makes mobile app development accessible and fast, letting you focus on functionality rather than the native build complexity.
    • Good API documentation is invaluable—the AIC API made it easy to connect and retrieve the data I needed.
    • Leveraging React and TS skills eased the transition to mobile development.

    This reminded me that the best way to learn new technologies is by applying them to something meaningful. For me, combining my love of art and museums with React Native made the process both enjoyable and rewarding.

    By building a real app that connects to a public API, I gained hands-on experience and a deeper understanding of mobile development.

    Business Opportunity

    While this started as a personal project, it naturally evolved into a vision for something bigger. This project serves as a proof-of-concept for a company focused on educational, cross-platform mobile apps. By leveraging APIs from museums and cultural institutions, we can deliver interactive experiences that work on both iOS and Android.

    Key advantages:

    • Single codebase reduces development and maintenance costs.
    • Cross-platform reach ensures maximum audience engagement.
    • Reusable components enable rapid app creation.

    My long-term vision is to partner with museums and cultural institutions to create interactive, multilingual apps that enhance visitor experiences, provide educational content, and promote art appreciation worldwide.