React Native / Эцсийн төсөл

Эцсийн төсөл

Баяр хүргэе! Та React Native курсын хамгийн сүүлчийн хичээлд хүрлээ. Энэ хичээлд тусдаа код заахгүй — харин 50 хичээлд сурсан бүх зүйлийг нэгтгэж Сургалтын трэкер апп бүтээхийг санал болгож байна. Энэ бол таны портфолид нэмэх, ажлын ярилцлагад үзүүлэх бодит төсөл болно.

Юу бүтээх вэ?

DevTrack — хөгжүүлэгчийн сурлагыг хянах апп. Хэрэглэгч курс нэмж, хичээл бүрийн явцыг тэмдэглэж, streak тооллоо харж чадна.

Аппын үндсэн функцүүд:

Суpabase Auth ашиглан бүртгэл, нэвтрэх, гарах
Курс жагсаалт — FlatList дээр
Хичээл бүрт "Дуусгасан" тэмдэглэх
AsyncStorage дэх streak тооллого
Stack + Tab navigation хавсарсан бүтэц
Push notification — өдөр бүр сануулга
EAS Build-ээр production build

Төслийн бүтэц

код

devtrack/
├── app.json
├── eas.json
├── App.tsx
├── lib/
│   └── supabase.ts
├── hooks/
│   ├── useCourses.ts
│   ├── useStreak.ts
│   └── useAuth.ts
├── screens/
│   ├── AuthScreen.tsx
│   ├── HomeScreen.tsx
│   ├── CourseListScreen.tsx
│   ├── CourseDetailScreen.tsx
│   └── ProfileScreen.tsx
├── components/
│   ├── CourseCard.tsx
│   ├── LessonItem.tsx
│   ├── StreakBadge.tsx
│   └── ProgressBar.tsx
└── types/
    └── index.ts

Supabase хүснэгтүүд

sql

-- Курсын хүснэгт
create table courses (
  id uuid default gen_random_uuid() primary key,
  user_id uuid references auth.users not null,
  title text not null,
  total_lessons integer not null default 0,
  color text default 'cyan',
  created_at timestamptz default now()
);

-- Хичээлийн явц
create table lesson_progress (
  id uuid default gen_random_uuid() primary key,
  user_id uuid references auth.users not null,
  course_id uuid references courses(id) on delete cascade,
  lesson_number integer not null,
  completed_at timestamptz default now(),
  unique(user_id, course_id, lesson_number)
);

-- RLS идэвхжүүлнэ
alter table courses enable row level security;
alter table lesson_progress enable row level security;

create policy "Өөрийн курс харна" on courses
  for all using (auth.uid() = user_id);

create policy "Өөрийн явц харна" on lesson_progress
  for all using (auth.uid() = user_id);

typescript

// App.tsx — navigation хавсралт
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
  Tabs: undefined;
  CourseDetail: { courseId: string; title: string };
};

type TabParamList = {
  Home: undefined;
  Courses: undefined;
  Profile: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();
const Tab = createBottomTabNavigator<TabParamList>();

function TabNavigator() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarStyle: { backgroundColor: '#0f172a', borderTopColor: '#1e293b' },
        tabBarActiveTintColor: '#22d3ee',
        tabBarInactiveTintColor: '#475569',
        headerStyle: { backgroundColor: '#0b1120' },
        headerTintColor: '#f1f5f9',
      }}
    >
      <Tab.Screen name="Home" component={HomeScreen} options={{ title: 'Нүүр' }} />
      <Tab.Screen name="Courses" component={CourseListScreen} options={{ title: 'Курсүүд' }} />
      <Tab.Screen name="Profile" component={ProfileScreen} options={{ title: 'Профайл' }} />
    </Tab.Navigator>
  );
}

export default function App() {
  const { session, loading } = useAuth();

  if (loading) return <SplashScreen />;
  if (!session) return <AuthScreen />;

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Tabs" component={TabNavigator} />
        <Stack.Screen
          name="CourseDetail"
          component={CourseDetailScreen}
          options={{ headerShown: true, title: '' }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Хийж дуусгаад юу хийх вэ?

Аппаа бүтээж дуусмагц дараахыг хий:

1. GitHub-д оруул

bash

git init
git add .
git commit -m "feat: DevTrack эцсийн төсөл"
git remote add origin https://github.com/tanii/devtrack.git
git push -u origin main

2. EAS Build-ээр нийтэл

bash

eas build --platform android --profile production
eas submit --platform android

3. README.md бич

Төслийнхөө README-д юу хийдэг, ямар технологи ашигласан, screenshot-ийг нэм. Ажлын ярилцлагад "React Native, Supabase, EAS Build ашиглан бодит апп бүтээсэн" гэж хэлэхэд README нь баталгаа болно.

Та энэ курсаар React Native-н суурь болон дунд түвшний бараг бүх сэдвийг хамрав. Component, navigation, state, API, authentication, camera, location, animation, gesture, TypeScript, test, build, нийтлэлт — бүгд. Цаашаа React Native-н advanced сэдвүүд болох New Architecture, Turbo Modules, native module бичих зэргийг судалж болно. Гол нь бүтээгээрэй — унших биш, хийснээр суралцдаг. Амжилт хүсье!

Дараагийн хичээлд:

Та React Native курсыг амжилттай дуусгалаа! 🎉 Цаашид Next.js курс дээр бэлдэж backend болон fullstack апп хэрхэн бүтээхийг сурах, эсвэл TypeScript курс дээр кодоо илүү найдвартай болгох нь дараагийн алхам байж болно. Бүтээсэн аппаасаа бахархаарай!