Student Management API Project

The Student Management API Project combines the concepts learned throughout the REST API course.

React Native
     ↓
Axios
     ↓
REST API
     ↓
PHP
     ↓
MySQL

Authentication will be handled using JWT.

• React Native
• TypeScript
• Axios
• React Navigation
• Redux Toolkit
• AsyncStorage
• PHP
• MySQL
• PDO
• REST API
• JWT Authentication

• User registration
• User login
• JWT authentication
• Protected APIs
• Add student
• Update student
• Delete student
• Search students
• Pagination
• Student profile
• Logout

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

The mobile application does not directly connect to MySQL. It communicates with the PHP REST API.

Users must log in before accessing protected student management features.

Email + Password
       ↓
Login API
       ↓
Verify Password
       ↓
Create JWT
       ↓
React Native
       ↓
Store Token

Student APIs will require a valid JWT token.

Authorization:
Bearer YOUR_JWT_TOKEN

PHP will verify the token before processing protected requests.

The users table will contain authentication information.

users

id
name
email
password
role
created_at

Passwords should be stored using PHP password hashing functions.

Student records can contain information such as:

students

id
name
email
mobile
course
address
created_at

The exact database design will be created in the next project lesson.

The React Native application will contain several screens.

Login
Registration
Student List
Student Details
Add Student
Edit Student
Search Student
Profile
Settings
Logout

The login screen will collect the user's email and password.

Email
Password
     ↓
Login Button
     ↓
POST /login.php

A successful response will contain authentication information.

New users can create an account using the registration screen.

Name
Email
Password
     ↓
Register
     ↓
POST /register.php

The PHP API will validate the submitted information before creating the database record.

After authentication, users can view student records.

GET /students.php

React Native can display the returned students using FlatList.

Selecting a student can open a details screen.

Student List
     ↓
Select Student
     ↓
Student Details

The screen can display the student's name, email, mobile, course, and other information returned by the API.

The Add Student screen will submit student information to the API.

Student Form
     ↓
Axios POST
     ↓
POST /students.php
     ↓
PHP Validation
     ↓
MySQL INSERT

Existing student information can be modified using a PUT request.

PUT /students.php?id=10

The API will validate the student ID and update the corresponding record.

A student can be removed after user confirmation.

DELETE /students.php?id=10

The server should verify authentication and authorization before performing the deletion.

The application will allow users to search students through an API query parameter.

GET /students.php?search=rahul

PHP can use a prepared SQL statement with LIKE to perform the search safely.

Large student lists should not necessarily be loaded all at once.

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

The API can return students together with pagination metadata.

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

interface StudentResponse {
    success: boolean;
    message: string;
    data: Student[];
}

TypeScript helps ensure that API data is used consistently in the React Native application.

import axios from "axios";

const api = axios.create({
    baseURL:
        "https://example.com/api",
    headers: {
        "Content-Type":
            "application/json"
    }
});

export default api;

A central Axios instance can be reused throughout the project.

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

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

        if (token) {

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

        return config;
    }
);

This allows protected student API requests to automatically receive the JWT token.

interface AuthState {
    user: User | null;
    token: string | null;
    isAuthenticated: boolean;
    loading: boolean;
}

Redux Toolkit or Auth Context can be used to manage this state.

Student Screen
      ↓
Axios
      ↓
JWT Token
      ↓
PHP API
      ↓
JWT Verification
      ↓
Authorization
      ↓
PDO Query
      ↓
MySQL
      ↓
JSON Response
      ↓
React Native

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

1. Create the MySQL database.
2. Create users and students tables.
3. Create the PHP database connection.
4. Create registration API.
5. Create login API.
6. Add JWT authentication.
7. Create protected student APIs.
8. Create React Native authentication screens.
9. Create student list and detail screens.
10. Create CRUD screens.
11. Add search and pagination.
12. Connect authentication navigation.
13. Test the complete application.

Before connecting the mobile application, each PHP API should be tested using Postman.

Registration
     ↓
Login
     ↓
Get Students
     ↓
Add Student
     ↓
Update Student
     ↓
Delete Student

Postman helps verify the backend independently from React Native.

The project should handle common API errors.

• Use password hashing for user passwords.
• Use PDO prepared statements.
• Validate all API input on the server.
• Use JWT authentication for protected endpoints.
• Check authorization on the server.
• Do not expose database credentials.
• Do not return password hashes.
• Use HTTPS in production.
• Do not put JWT tokens in URLs.
• Return safe error messages.

React Native App
       ↓
Registration / Login
       ↓
PHP REST API
       ↓
MySQL User
       ↓
JWT Token
       ↓
AsyncStorage
       ↓
Redux / Auth Context
       ↓
Protected Navigation
       ↓
Axios
       ↓
Student REST API
       ↓
PHP JWT Verification
       ↓
Authorization
       ↓
MySQL Students
       ↓
JSON Response
       ↓
FlatList / Forms
       ↓
Student Management App

This project brings together the major concepts from the REST API course. In the following lessons, we will build each part step by step, beginning with the database design.