How to Start Building
Your Stack
Framework
Expo SDK 53+
React Native, Expo Router v4, New Architecture ON
Backend
Supabase
Auth, Postgres, Storage, Realtime, RLS
Styling
NativeWind v4
Tailwind CSS for React Native via Metro
Language
TypeScript
Strict mode, generated Supabase types
State
Zustand
Minimal global state — auth, user session
Video
expo-video
expo-av is deprecated in SDK 53+
Payments
Paystack
Phase 2 — church donations
Push
Firebase FCM
Phase 1 Module 9 — requires dev build
Step-by-Step Setup
01
Bootstrap the Expo Project
Create the app with a blank TypeScript template, then install all Phase 1 dependencies at once.
# Create project
npx create-expo-app@latest ChurchConnect --template blank-typescript
cd ChurchConnect
# Core deps
npx expo install expo-router @supabase/supabase-js
npx expo install nativewind tailwindcss
npx expo install expo-secure-store @react-native-async-storage/async-storage
npx expo install react-native-url-polyfill expo-sqlite
npx expo install react-native-reanimated react-native-safe-area-context
npx expo install react-native-gesture-handler zustand
# Video (not expo-av — deprecated)
npx expo install expo-video
# Image picker for avatar upload
npx expo install expo-image-picker
02
Configure NativeWind v4
Three config files required — tailwind.config.js, metro.config.js, and global.css at root.
// tailwind.config.js
module.exports = {
content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
presets: [require("nativewind/preset")],
theme: {
extend: {
colors: {
brand: { gold: "#C9A84C", dark: "#0F0D0A", cream: "#FAF6EE" }
}
}
},
};
// global.css (root level)
@tailwind base;
@tailwind components;
@tailwind utilities;
03
Connect Supabase
Create a Supabase project, grab the URL + publishable key, set env vars.
# .env (never commit this)
EXPO_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_xxx
// lib/supabase.ts
import 'expo-sqlite/localStorage/install';
import { createClient } from '@supabase/supabase-js';
export const supabase = createClient(
process.env.EXPO_PUBLIC_SUPABASE_URL!,
process.env.EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY!,
{
auth: {
storage: localStorage,
autoRefreshToken: true,
persistSession: true,
detectSessionInUrl: false,
}
}
);
04
Set Up Folder Structure
Build this exact structure before writing any screen code. The architecture is what makes the project scalable.
ChurchConnect/
├── app/
│ ├── (auth)/ ← unauthenticated screens
│ │ ├── login.tsx
│ │ └── register.tsx
│ ├── (app)/ ← protected screens (tab navigator)
│ │ ├── (tabs)/
│ │ │ ├── index.tsx ← Feed
│ │ │ ├── explore.tsx ← Discover churches/pastors
│ │ │ ├── create.tsx ← New post
│ │ │ └── profile.tsx ← My profile
│ │ ├── sermon/[id].tsx ← Sermon player
│ │ ├── church/[id].tsx ← Church profile
│ │ ├── pastor/[id].tsx ← Pastor profile
│ │ └── user/[id].tsx ← User profile
│ ├── _layout.tsx ← Auth guard lives here
│ └── index.tsx ← Redirect to feed or login
├── components/
│ ├── ui/ ← Button, Input, Avatar, Card
│ ├── feed/ ← FeedItem, SermonCard, PostCard
│ └── shared/ ← Header, TabBar, LoadingSpinner
├── lib/
│ └── supabase.ts
├── hooks/ ← useFeed, useProfile, useFollows
├── store/
│ └── authStore.ts
├── types/
│ └── database.ts ← npx supabase gen types
└── constants/
└── colors.ts
05
Build Module 1 First: Auth Screens
Register + Login are your entry point. Nothing else matters until a user can get in. Use Supabase Auth directly — no custom auth tables needed for Phase 1.
// app/(auth)/register.tsx — stripped pattern
import { supabase } from '@/lib/supabase';
const handleRegister = async () => {
const { error } = await supabase.auth.signUp({
email,
password,
options: { data: { name } } ← stored in auth.users metadata
});
if (error) setErrMsg(error.message);
};
// profiles table auto-created via Supabase trigger:
CREATE OR REPLACE FUNCTION handle_new_user()
RETURNS TRIGGER AS $$
BEGIN
INSERT INTO profiles (id, name, email)
VALUES (NEW.id, NEW.raw_user_meta_data->>'name', NEW.email);
RETURN NEW;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;
CREATE TRIGGER on_auth_user_created
AFTER INSERT ON auth.users
FOR EACH ROW EXECUTE FUNCTION handle_new_user();
06
The Build Order for Phase 1 (Strict)
Follow this exact module order. Each one unblocks the next.
Module 1 → Auth screens (Register, Login, Logout)
Module 2 → Profile screen + edit (depends on auth users)
Module 3 → Church & Pastor profiles (admin-seeded data)
Module 4 → Sermon upload + video player (depends on Module 3)
Module 5 → User post creation (depends on Module 2)
Module 6 → Feed = sermons + posts merged, sorted by date
Module 7 → Likes + Comments (depends on Module 6)
Module 8 → Follow system (depends on Modules 2, 3)
Module 9 → Push notifications (depends on all above)
07
Design System — Church Aesthetic
Define your brand tokens once in tailwind.config.js and use them everywhere. ChurchConnect should feel premium, warm, and trustworthy — not a generic social app.
// constants/colors.ts — reference these in className
export const Colors = {
gold: '#C9A84C', ← primary accent
ink: '#0F0D0A', ← deep background
cream: '#FAF6EE', ← primary text on dark
surface: '#1A1714', ← card background
border: '#2E2A24', ← subtle dividers
muted: '#6B6560', ← secondary text
};
// Example: Feed card
<View className="bg-surface border border-border rounded-sm p-4">
<Text className="text-cream font-semibold">Sermon Title</Text>
<Text className="text-muted text-sm">Pastor Name · Church</Text>
</View>