Prodigi Studios - Agency Portfolio Mobile App

Project Overview

Challenge

Solution

Core Features

Tech Stack & Implementation

Expo SDK 54

NativeWind (Tailwind for React Native)

<View className="px-4 py-6 bg-gradient-to-b from-gray-900 to-gray-800">
  <Text className="text-3xl font-bold text-white mb-2">
    Our Work
  </Text>
  <Text className="text-gray-300 text-base">
    Transforming ideas into digital experiences
  </Text>
</View>

Clerk Authentication

Convex Backend

// Projects with real-time updates
const projects = useQuery(api.projects.list, {
  category: selectedCategory,
  technology: selectedTech
});

// Blog posts with pagination
const blogs = useQuery(api.blogs.published, {
  limit: 10,
  offset: page * 10
});

// Contact form submission
const submitContact = useMutation(api.contacts.create);

React Native Reusables

Key Features

1. Project Portfolio

<Pressable 
  className="rounded-xl overflow-hidden bg-white dark:bg-gray-800 shadow-lg"
  onPress={() => router.push(`/projects/${project.id}`)}
>
  <ExpoImage 
    source={{ uri: project.thumbnail }}
    className="w-full h-48"
    contentFit="cover"
    placeholder={blurhash}
  />
  <View className="p-4">
    <Text className="text-xl font-bold text-gray-900 dark:text-white">
      {project.title}
    </Text>
    <Text className="text-sm text-gray-600 dark:text-gray-400 mt-1">
      {project.category} • {project.year}
    </Text>
    <View className="flex-row flex-wrap gap-2 mt-3">
      {project.technologies.map(tech => (
        <View className="px-2 py-1 bg-blue-100 dark:bg-blue-900 rounded-md">
          <Text className="text-xs text-blue-700 dark:text-blue-300">
            {tech}
          </Text>
        </View>
      ))}
    </View>
  </View>
</Pressable>

2. Blog Platform

const searchResults = useQuery(api.blogs.search, {
  query: searchTerm,
  categories: selectedCategories
});

3. Contact System

<View className="p-6">
  <Input 
    label="Full Name"
    placeholder="John Doe"
    value={name}
    onChangeText={setName}
    className="mb-4"
  />
  <Input 
    label="Email"
    placeholder="john@example.com"
    keyboardType="email-address"
    value={email}
    onChangeText={setEmail}
    className="mb-4"
  />
  <Select
    label="Project Type"
    options={projectTypes}
    value={projectType}
    onChange={setProjectType}
    className="mb-4"
  />
  <TextArea
    label="Message"
    placeholder="Tell us about your project..."
    value={message}
    onChangeText={setMessage}
    rows={6}
    className="mb-6"
  />
  <Button 
    onPress={handleSubmit}
    loading={isSubmitting}
    className="w-full"
  >
    Send Message
  </Button>
</View>

4. User Personalization (Optional Sign-In)

Performance Optimization

Key Results

Tech Stack

App Structure

app/
├── (tabs)/
│   ├── index.tsx              # Home/Featured
│   ├── projects/
│   │   ├── index.tsx          # Project grid
│   │   └── [id].tsx           # Project detail
│   ├── blog/
│   │   ├── index.tsx          # Blog feed
│   │   └── [id].tsx           # Article reader
│   └── contact.tsx            # Contact form
├── _layout.tsx                # Root layout
└── +not-found.tsx             # 404 screen

Key Takeaways

Conclusion