Project Final Mobile App

Student Management Mobile App

Frontend:
React Native
TypeScript
Axios
React Navigation
Redux Toolkit
AsyncStorage

Backend:
PHP
REST API
PDO
MySQL
JWT Authentication

• User registration.
• User login.
• JWT authentication.
• Persistent login.
• Student list.
• Student details.
• Add student.
• Edit student.
• Delete student.
• Search students.
• Pagination.
• User profile.
• Logout.

React Native Mobile App
          ↓
       Axios
          ↓
      REST API
          ↓
         PHP
          ↓
         PDO
          ↓
        MySQL

JWT authentication protects the communication between the mobile application and the REST API.

The project uses a MySQL database such as:

student_management

Important tables include:

users
students

The users table stores authentication information and the students table stores student records.

users

id
name
email
password
role
created_at

Passwords must be stored using secure password hashing rather than plain text.

students

id
name
email
mobile
course
address
created_at

This table stores the student information managed by the application.

student-management/
│
├── api/
│   ├── register.php
│   ├── login.php
│   ├── students.php
│   └── student_profile.php
│
├── config/
│   └── database.php
│
└── mobile/
    ├── src/
    │   ├── screens/
    │   ├── components/
    │   ├── services/
    │   ├── context/
    │   ├── store/
    │   ├── navigation/
    │   └── types/
    │
    └── App.tsx

The registration screen collects user information and sends it to the PHP registration API.

POST /api/register.php

The server validates the request, hashes the password, and creates the user account.

POST /api/login.php

The PHP API finds the user and verifies the password using:

password_verify(
    $password,
    $user['password']
);

Login
  ↓
Verify Password
  ↓
Create JWT
  ↓
Return Token
  ↓
React Native
  ↓
Store Token

The JWT is then used when accessing protected APIs.

await AsyncStorage.setItem(
    "auth_token",
    token
);

await AsyncStorage.setItem(
    "auth_user",
    JSON.stringify(user)
);

AsyncStorage allows the application to preserve authentication information between app launches.

import axios from "axios";

const api = axios.create({
    baseURL:
        "https://example.com/api"
});

export default api;

A centralized Axios instance keeps API communication organized.

api.interceptors.request.use(
    async config => {

        const token =
            await AsyncStorage.getItem(
                "auth_token"
            );

        if (token) {

            config.headers.Authorization =
                `Bearer ${token}`;
        }

        return config;
    }
);

The interceptor automatically attaches the JWT to protected requests.

AuthContext

user
token
loading
login()
logout()
restoreAuth()

Auth Context provides authentication information to screens and components throughout the application.

Root Navigator
      │
      ├── Auth Navigator
      │     ├── Login
      │     └── Registration
      │
      └── App Navigator
            ├── Student List
            ├── Student Details
            ├── Add Student
            ├── Edit Student
            ├── Search Student
            ├── Profile
            └── Logout

The Student List screen retrieves student records from the API.

GET /api/students.php

FlatList can efficiently display the returned records.

GET /api/student_profile.php?id=5

The Student Details screen displays information about one selected student.

POST /api/students.php

The Add Student screen sends the student's information as JSON.

{
    "name": "Rahul",
    "email": "rahul@example.com",
    "mobile": "9876543210",
    "course": "React Native",
    "address": "Patna"
}

PUT /api/students.php?id=5

The Edit Student screen loads existing data, allows modifications, and sends the updated data to the API.

DELETE /api/students.php?id=5

The application should confirm the action before deleting the student.

GET /api/students.php
    ?search=rahul

PHP can search fields such as name, email, mobile, and course using prepared SQL statements.

GET /api/students.php
    ?page=1
    &limit=10

Pagination prevents the mobile application from downloading a very large number of records at once.

$offset =
    ($page - 1) * $limit;

interface Student {
    id: number;
    name: string;
    email: string;
    mobile: string;
    course: string;
    address: string;
}

interface StudentResponse {
    success: boolean;
    data: Student[];
    meta?: {
        page: number;
        limit: number;
        total: number;
        total_pages: number;
    };
}

TypeScript makes API data easier to understand and safer to use.

Request
   ↓
Authorization Header
   ↓
Extract Bearer Token
   ↓
Verify JWT
   ↓
Identify User
   ↓
Check Permission
   ↓
Validate Request
   ↓
PDO Query
   ↓
JSON Response

{
    "success": true,
    "message": "Student loaded successfully.",
    "data": {
        "id": 5,
        "name": "Rahul",
        "email": "rahul@example.com",
        "mobile": "9876543210",
        "course": "React Native",
        "address": "Patna"
    }
}

Consistent response structures make API integration easier on the mobile side.

200 → Success

201 → Created

400 → Bad Request

401 → Unauthorized

403 → Forbidden

404 → Not Found

409 → Conflict

422 → Validation Error

500 → Server Error

React Native should handle API errors and show appropriate messages to the user.

                START
                  ↓
          Restore Authentication
                  ↓
             User Logged In?
              /          \
            No            Yes
            ↓              ↓
       Login Screen    App Navigator
            ↓              ↓
      Login API       Student List
            ↓              ↓
        JWT Token     Student API
            ↓              ↓
       AsyncStorage   CRUD Operations
            ↓              ↓
       Auth Context   Search/Pagination
            ↓              ↓
      App Navigator   Student Details
                           ↓
                      Add/Edit/Delete
                           ↓
                         Logout
                           ↓
                      Login Screen

• Use HTTPS in production.
• Never store plain-text passwords.
• Use password_hash() for passwords.
• Use password_verify() during login.
• Protect APIs with JWT authentication.
• Verify JWT on the server.
• Use authorization checks for sensitive operations.
• Use PDO prepared statements.
• Validate all input on the server.
• Do not expose password hashes.
• Do not expose JWT secrets to the mobile application.
• Return safe API error messages.
• Use pagination for large datasets.
• Do not trust client-side authorization.

Step 1  → Create MySQL Database
Step 2  → Create users Table
Step 3  → Create students Table
Step 4  → Create PDO Connection
Step 5  → Create Registration API
Step 6  → Create Login API
Step 7  → Add JWT Authentication
Step 8  → Create Axios Service
Step 9  → Create Auth Context
Step 10 → Create Navigation
Step 11 → Create Student API
Step 12 → Create Student List
Step 13 → Create Student Details
Step 14 → Create Add Student
Step 15 → Create Edit Student
Step 16 → Create Delete Student
Step 17 → Add Search
Step 18 → Add Pagination
Step 19 → Add Profile
Step 20 → Add Logout
Step 21 → Test Complete Application

Congratulations! 🎊

You have completed the complete REST API and React Native Student Management Mobile Application course.

You have learned how a real mobile application communicates with a backend server and database.

• REST API fundamentals
• HTTP methods
• JSON
• Postman
• PHP REST APIs
• MySQL and PDO
• CRUD operations
• Password hashing
• Authentication
• JWT
• Protected APIs
• Role-based authorization
• React Native Fetch
• Axios
• Axios interceptors
• TypeScript API interfaces
• AsyncStorage
• Auth Context
• React Navigation
• Redux Toolkit authentication
• FlatList
• Search
• Pagination
• Student Management CRUD
• Complete mobile application architecture

This final project can now be extended with additional features such as attendance, fees, assignments, notifications, dashboard statistics, profile images, and other real-world modules.