Skip to main content

Day 4: Full Stack Development Part 1 - React Native and Backend

Schedule: May 29, 2025 (9:30-12:00)​

Session Timeline​

00:0000:1500:3000:4501:0001:1501:3001:4502:0002:1502:30React Native Setup Server Setup Break UI Implementation Backend Integration Day 4 Schedule

System Architecture​

BackendFrontend

React Native App

Navigation

Screens

Components

State Management

Node.js Server

Authentication

API Routes

Database

Detailed Agenda​

1. React Native Introduction (9:30 - 10:05)​

Project Setup​

Create Project

Install Dependencies

Configure Navigation

Setup State Management

Key Concepts​

  • React Native basics
  • Native components
  • Navigation system
  • State management

2. Server Setup and Authentication (10:05 - 10:40)​

Backend Architecture​

Authentication

JWT

Auth Routes

User Model

Express Server

Middleware

Routes

Controllers

Database

Implementation Steps​

  • Server initialization
  • Database connection
  • User model creation
  • Authentication middleware

3. Break (10:40 - 10:55)​

4. UI Design and Implementation (10:55 - 11:25)​

Screen Structure​

App Container

Auth Stack

Main Stack

Login Screen

Register Screen

Device List

Device Control

Settings

UI Components​

  • Custom components
  • Theme system
  • Form handling
  • Error states

5. Backend Integration (11:25 - 12:00)​

API Integration​

DatabaseAPIAppDatabaseAPIAppAuthentication RequestValidate UserUser DataJWT TokenProtected Route RequestVerify JWTFetch DataResponseProtected Data

Implementation Details​

  • API client setup
  • Error handling
  • Data transformation
  • Loading states

Learning Outcomes​

  • React Native fundamentals
  • Backend API development
  • Authentication implementation
  • UI/UX best practices

Prerequisites for Day 5​

  • Complete environment setup
  • Basic React knowledge
  • API testing tools
  • Database access

Resources​

  • Project starter code
  • API documentation
  • UI component library
  • Testing guidelines