---

📖 About This Project

The Lampung Dev mobile application is an event management and attendance system used by admins to:

• ✅ View available events
• ✅ View event details and participants
• ✅ Scan QR codes for attendance verification
• ✅ Record participant check-in times

This app is built to support developer community activities like meetups, workshops, and conferences.

🎯 Who Should Follow This Series?

This series is suitable for:

• Beginners who want to learn React Native
• Web developers looking to expand into mobile development
• Developers interested in the Expo ecosystem
• Anyone interested in event management systems

---

🏗️ System Architecture

Architecture Overview

The system follows a client-server architecture with multiple clients connecting to a single REST API backend.

Layer	Description
Clients	Web Client, Mobile Client, Admin Panel
Backend	REST API built with Next.js
Database	PostgreSQL for data persistence

System Components

Component	Technology	Features
🌐 Web Client	Next.js	Landing page, Event list, Registration
📱 Mobile Client	React Native + Expo	QR Scanner, Event list, Attendance (Focus of this series!)
⚙️ Admin Panel	Next.js	Event CRUD, Member CRUD, Reports
🔌 REST API	Next.js API Routes	/api/admin/auth, /api/admin/events, /api/attendance
🗄️ Database	PostgreSQL	users, events, attendances, registrations

Data Flow

From	To	Description
Clients (Web, Mobile, Admin)	REST API	HTTP requests for data
REST API	PostgreSQL	Data persistence
PostgreSQL	REST API	Query results
REST API	Clients	JSON responses

---

📱 Mobile App Architecture

The mobile app follows a layered architecture pattern for clean separation of concerns.

App Layers

Layer	Folder	Description
📱 Presentation	app/	UI screens and navigation
🗃️ State	store/	Zustand state management
🔌 Services	services/	API communication layer
☁️ External	-	Backend REST API

Presentation Layer (Screens)

Screen	Path	Description
Home	app/(tabs)/index.tsx	Event list with pull-to-refresh
Scanner	app/(tabs)/scanner.tsx	QR code scanner for attendance
Account	app/(tabs)/account.tsx	User profile and logout
Event Detail	app/event/[id].tsx	Event info and participants
Login	app/login.tsx	Admin authentication

State Layer (Zustand Store)

Store	Functions	Description
auth.ts	token, user, setAuth(), logout(), initialize()	Authentication state management

Service Layer (API Calls)

Service	Functions	API Endpoint
api.ts	Axios instance	Base configuration + interceptors
auth.ts	loginAdmin()	POST /api/admin/auth
events.ts	getAdminEvents(), getEventDetail()	GET /api/admin/events
attendance.ts	recordAttendance()	POST /api/attendance

---

🔄 Data Flow Diagrams

Authentication Flow

Step	Action	Description
1️⃣	User enters credentials	Email and password on Login screen
2️⃣	Call loginAdmin()	Service sends POST to /api/admin/auth
3️⃣	API validates	Server checks credentials in database
4️⃣	Receive token	API returns { token, user }
5️⃣	Store auth	Zustand saves to SecureStore (encrypted)
6️⃣	Navigate to Home	User redirected to tab navigator

QR Attendance Flow

Step	Action	Description
1️⃣	Admin scans QR	Camera reads QR code from participant
2️⃣	Decode data	Parse format: eventId:uniqueCode
3️⃣	Call API	Send POST to /api/attendance
4️⃣	Validate registration	Server checks if participant is registered
5️⃣	Record check-in	Database saves attendance timestamp
6️⃣	Show result	Display success/error animation

---

🛠️ Tech Stack

Technology	Purpose	Why?
React Native	Mobile framework	Cross-platform (iOS + Android)
Expo	Development platform	Fast setup, no native code required
Expo Router	Navigation	File-based routing like Next.js
NativeWind	Styling	Tailwind CSS syntax (familiar)
Zustand	State management	Simple, lightweight, no boilerplate
Axios	HTTP client	Interceptors for auth headers
SecureStore	Token storage	Encrypted storage (secure)
Expo Camera	QR scanning	Native camera access

---

📂 Folder Structure

Folder	Files	Description
app/	-	Screens (Expo Router)
app/(tabs)/	index.tsx, scanner.tsx, account.tsx	Tab navigation screens
app/event/	[id].tsx	Event Detail (dynamic route)
app/	login.tsx, _layout.tsx, +not-found.tsx	Login, Root Layout, 404
components/	EventCard.tsx, LoadingSpinner.tsx	Reusable UI components
services/	api.ts, auth.ts, events.ts, attendance.ts	API communication layer
store/	auth.ts	Zustand state management
constants/	Colors.ts	App constants
utils/	theme.ts	Utility functions
assets/	fonts/, images/	Static assets

---

🔐 Security

Security Layer	Implementation	Description
Token Storage	expo-secure-store	Encrypted keychain/keystore
API Communication	HTTPS only	TLS encryption in transit
Authentication	JWT tokens	Short-lived, server-validated
Authorization	Role-based	Admin-only endpoints

---

📅 Learning Path

Week	Parts	Topics
Week 1	Part 1-3	Architecture, Installation, Project Setup
Week 2	Part 4-5	Authentication, Event Management
Week 3	Part 6-7	QR Scanner, Polish & Deploy

---

✅ Checklist Before Moving On

Before proceeding to Part 2, make sure you:

• Understand the overall system architecture
• Know the authentication and QR attendance flows
• Are familiar with the tech stack
• Have an Expo account (free at expo.dev)

🚀 Next Steps

In Part 2, we'll set up the development environment on Mac, Windows, or Ubuntu including Node.js, VS Code, Expo CLI, and Android Studio/Xcode.

---

Next: Installation on Mac, Windows, Ubuntu →

---

This series is created to support the Casual Meetup #15 at LampungDev.