3-Tier-web-application-Student-Attendance-System-

Building a 3-tier web application from scratch with complete backend and frontend

1. Architchture :

                USER
                 │
                 ▼
              React Ui 
                 │
                 ▼
             Spring Boot REST API   
                 │
                 ▼
              Hibernate / JPA 
                 │
                 ▼
             MariaDB (AWS RDS) 
   

2. Full Infrastructure Architecture :

                USER
                 │
                 ▼
           Web Browser
                 │
                 │ HTTP
                 ▼
         Public EC2 IP
        (51.xx.xx.xx)
                 │
    ┌────────────┴────────────┐
    │                         │
    ▼                         ▼ 
   React Frontend             Spring Boot API
   (Attendance Dashboard)       Port 8080
   Student UI
   Teacher UI
    │
    │ REST API
    ▼
    Spring Controllers
    │
    ▼
    Service Layer
    │
    ▼
    JPA Repository
    │
    ▼
    Hibernate ORM
    │
    ▼
    MariaDB (AWS RDS)
    │
    ▼
    Attendance Tables
    Student Tables 
   

3. Backend Internel Architecture :

   backend/
   |
   |-controller/
   StudentController
   AttendanceController
   ClassStatsController
   |
   |-model/
   Student.java
   Attendance.java
   |
   |-repository/
   StudentRepository
   AttendanceRepository
   |
   └──resources/
    application.properties
   

4. Frontend Internal Architecture :

   frontend/
    │
    ├── src/
    │     main.jsx
    │     index.css
    │
    ├── components (future)
    │     StudentTable
    │     Dashboard
    │     Login
    │
    └── build/
          dist/
   

5. Security Layer (current) : NOTE : This feature and more other features are in production and will update soon

Update :This feature is now added to see the latest version click : https://github.com/ejazshaikh-devops/Student-Attendance-v2

Teacher access → full control
Student access → read only

6. Deployment Architecture :

   AWS Cloud
   │
   ├── EC2
   │    ├── React Frontend
   │    └── Spring Boot Backend
   │
   └── RDS
      └── MariaDB Database
   

7. Process Of Creation :

Overview :
Project: Batch 5 Attendance System
Architecture: 3-Tier Web Application

Frontend: React (UI)
Backend: Spring Boot (Java REST API)
Database: AWS RDS MariaDB
Infrastructure: AWS EC2 (Ubuntu)

1. Necessary Process :
   

   1. Database Creation :
   
   mysql -h RDS-ENDPOINT -u admin -p
   CREATE DATABASE attendance;
   spring.jpa.hibernate.ddl-auto=update
   student attendance

   3. Backend Structure :
      AttendanceApp/backend
      Created Maven project structure:

       backend
        ├ pom.xml
        └ src
           └ main
              ├ java
              │   └ com
              │       └ attendance
              │            └ app
              │               ├ controller
              │               ├ model
              │               ├ repository
              │               └ service
              └ resources
              └ application.properties      
      

   pom.xml : Backend build file defines project dependencies contaions : spring boot, JPA, MariaDB Driver it will used by mvn clean packege. Which will give the output of : target/attendance-backend.jar

   3. Frontend Structure :
   
   AttendanceApp/frontend

      frontend
      └ attendance-frontend
      ├ src
      │  ├ main.jsx
      │  └ index.css
      ├ package.json
      └ vite.config.js
   

main.jsx (UI LOGIC)
Responsibilities:

1. React app entry
2. API calls
3. UI rendering
   Main Logic:
   fetch(API/students)
   POST(API/students)
   DELETE(API/students/{id})

Implemented Features :
add student
delete student
attendance toggle
weekly attendance
percentage calculation
performance score

Ui Features :
Teacher Panel : Name, Batch, Course.
Students Control : Add Student, Remove Student.
Attendance Table : Weekes.
Analytics : Attendence %, Performance Score.

8. After Deployment :

   UI action
   ↓
   React API call
   ↓
   Spring Controller
   ↓
   Repository
   ↓
   Hibernate ORM
   ↓
   MariaDB database
   

Example: Mark attendance

UI → POST /attendance
Controller → save()
Repository → SQL insert
Database → attendance table

9. Debugging :

   1. Port 8080 already in use
      Problem : Previous Java process still running in background
      Debugg : lsof -i :8080
      ps aux | grep java found the process then
      kill -9 'process id'

   2. RDS “Access Denied” Error
      Problem : Access denied for user 'admin'
      Debugg : Verified application.properties correct credentials + open port 3306 in RDS SG

   3. Java Error
      Problem : the JDK version 17 requiered version 20
      Debugg : dpkg --list | grep openjdk found openjdk-17-jdk than apt remove openjdk-17-jdk -y than apt autoremove -y to remove leftover dependencies than installed JDK version 20

   4. Node version Incompatibility Problem : vite error : crypto.hash is not a function
      Debugg : Node 18 installed vite required Node 20+ so installed new version

   5. Foreign Key Constraint on Delete Problem : Deleting student caused 500 error attendance table had FK reference to student fail to delete any student
      Debugg : @OneToMany(mappedBy="student",
      cascade=CascadeType.ALL,
      orphanRemoval=true)
      Relational integrity + cascading deletes

   6. Hibernate Dialect Not Determine
      Problem : Unable to determine dialect DB connection failed so hibernate couldn’t detect DB type
      Debugg : Issue in DB password corrected the password

   7. Whitelabel Error Page (404)
      Problem : Accessed root / on backend no controller mapped to /
      Debugg : Tested proper endpoint /student

   8. Backend Stops After SSH Close
      Problem : Closing terminal stopped backend process tied to SSH session
      Debugg : Run the process in background
      nohup java -jar app.jar > app.log 2>&1 &

   9. CORS Issues
      Problem : Frontend couldn’t call backend
      Debugg : @CrossOrigin

   10. Build Failure (Compilation Error)
       Problem : cannot find symbol reached end of file while parsing becoz of missing braces / duplicate methods
       Debugg : Repaired class structure

   11. Maven Dependency Issues
       Problem : Build failure due to missing dependencies
       Debugg : Ensured pom.xml correct
       mvn clean package

   12. Database SSL Warning
       Problem : useSsl deprecated outdated connection parameters
       Debugg : Updated connection string to newer format

   13. React build errors
       Problem : missing package.json
       Debugg : recreated Vite project

10. Future Use : If expanded further this project becomes:

1. Role based login
2. Student portal
3. File upload
4. Graph analytics
5. JWT authentication

UI