@johannescls
The night shift / selected systems

Behind
the screen.

Fewer projects. More room to explore. Systems, interfaces, and the thinking that connects them.

THE SYSTEMS LABVOL. 01 / SELECTED
LumiNUs LumiNUs website preview Alumni, connected. E-Reklamo E-Reklamo website preview A voice for the community. Booklat Booklat website preview A new chapter in commerce.
Systems with a human side.Pick a project ↗
Tech tools

What I build with.

The languages, frameworks, and tools behind my work.

01 / Selected project Team capstone Mobile & web

LumiNUs

Campus ends.
Connection
doesn’t.

Built for life beyond graduation. LumiNUs brings alumni identity, community, and information together for NU Lipa—across one mobile app and one web workspace. As the team’s project lead and web admin developer, I also helped develop the mobile app.

Explore the experience The project at a glance
TWO EXPERIENCES. ONE COMMUNITY. LumiNUs website welcoming alumni to stay connected LumiNUs mobile alumni sign-in screen
A lifelong connection,
wherever life takes you.

In partnership with
NU Lipa Alumni Affairs Office

An alumni management system.
A community that keeps moving forward.

The project at a glance

Built around belonging.

01 / Identity

Carry your connection.

Virtual alumni identification keeps the university connection close at hand.

02 / Community

Stay in each other’s orbit.

Updates, events, and conversations keep alumni connected beyond campus.

03 / Insight

See the journeys unfold.

Alumni information, geolocation mapping, and tracer studies support the AAO’s work.

ALUMNI / THE MOBILE EXPERIENCE

Your next chapter.
Always within reach.

Built with React Native and a Supabase database.

Mobile app developed in collaboration with Timothy John D. Asada.
Click the screen to zoom ↗
01 / 07

Sign in

Your lifelong connection starts here.

AAO / THE ADMIN EXPERIENCE

The bigger picture.
Beautifully connected.

I developed the web admin side with Laravel, using Supabase as the database shared with the mobile app.

Click the screen to zoom ↗
01 / 09

First hello

Every connection begins with a welcome.

Behind the projectThe capstone research

Full research title

A Centralized Mobile and Web-Based Alumni Management System With Geolocation Mapping, Virtual Alumni Identification, and Community Engagement for Institutional Tracer Studies

01 / Documentation

User manual

A guide to navigating and using the LumiNUs system.

Manual coming soon
Team capstone · Project lead & developer For the NU Lipa alumni community
The people behind LumiNUs

Capstone Project Team / Row Tres

  • Johannes Emmanuel A. Claus

    Johannes Emmanuel A. Claus

    Project Manager & Web System Developer

  • Timothy John D. Asada

    Timothy John D. Asada

    Lead Mobile App Developer

  • Jade Ahrens P. Caponpon

    Jade Ahrens P. Caponpon

    Technical Communications & Quality Standards Lead / Client Coordinator

  • Louie Andrew E. Gutierrez

    Louie Andrew E. Gutierrez

    Quality Assurance (QA) & Systems Analyst

Team responsibilities
Johannes Emmanuel A. Claus
Overall project management, web system development (Laravel/PHP), UI/UX design, database integration, CI/CD pipeline deployment, and system architecture.
Timothy John D. Asada
Cross-platform mobile application development (React Native), mobile UI/UX implementation, device hardware simulation, and client-side testing.
Jade Ahrens P. Caponpon
Stakeholder and client coordination with the NU Lipa Alumni Affairs Office, technical writing and manuscript compilation, project communications, and standards compliance.
Louie Andrew E. Gutierrez
System analysis, functional testing, unit testing, cross-platform and compatibility evaluation, bug logging, and quality verification.
02 / Web application · Team project

eReklamo

Small voices.
Stronger communities.

A community complaint management website we built to help people submit concerns and track their resolution in one place. I served as the developer on the team.

Follow a concern
COMMUNITY / CONNECTED “I have a concern.” Let’s move it forward. ↗ A LITTLE COURAGE. A COLLECTIVE VOICE.
THE WEBSITE / A FIRST LOOK

Your voice.
A place to land.

The homepage introduces the platform and gives visitors two clear starting points: submit a complaint or track one already raised.

Explore the user manual
The actual homepage, presented straight on for a closer look.
THE IDEA / FROM CONCERN TO CONNECTION

Speak up.
Keep the conversation going.

A dedicated place to submit community concerns, bringing the first step of the complaint process online.

THE FIELD GUIDE / USER MANUAL

Good things come
with a little guidance.

GO ON,
TURN A PAGE ↗
PICK A CHAPTER

From your first complaint to the admin dashboard. A pocket-sized tour of how it all works.

← → keys or swipe to explore.
Tap the page for a larger read.
01 / 16 · Cover
SOURCE CODE / GITHUB

From community voices to code.

A team project with me as the developer. Take a closer look at the source behind E-Reklamo.

johannesclaus30 / eReklamo
Explore repositoryOpens GitHub in a new tab
Designed around community voices.Team project · Developer
03 / Personal projectBuilt with .NET MAUI
LESS SEARCHING. MORE STARTING.

Big futures.
First steps.

Internship Tracker / .NET MAUI

A place for the next chapter to begin. Internship Tracker connects students looking for experience with companies looking for fresh talent.

Companies post available internship openings. Students browse those opportunities and apply through the system. Student, Company, and Admin accounts bring the different sides of the platform together.

3 account typesOne connected journey
Take a look inside
YOUR NEXT
CHAPTER ↗
A company posts.An opportunity opens up.
A student applies.A first step toward experience.
OPENINGS → POSSIBILITIES
THE APP / PICK YOUR PERSPECTIVE

One platform.
Different seats.

Find your starting point.

Browse available internship openings, explore companies, and apply to opportunities that interest you. The student dashboard brings openings and application status into view.

Actual app screens. Pick a view, then tap the phone to zoom in.
THE STUDENT VIEW
01 / Discover an opening. Take your first step.
SOURCE CODE / GITHUB

Follow the opportunity. Explore the build.

Go beyond the phone screens and explore the Internship Tracker source code.

johannesclaus30 / NULipaInternshipTracker
Explore repositoryOpens GitHub in a new tab
Built with .NET MAUI. Designed around opportunity.Post it. Find it. Go for it. ↗
04 / Cross-platform bookstoreMany sellers. A shared foundation.

A new chapter.
On every screen.

Booklat is a cross-platform, multi-vendor bookstore built with .NET MAUI Blazor Hybrid and Blazor Web. Customers discover books and shop across independent sellers, while vendors manage their own digital storefronts and orders.

Browse the experience
THE BOOKLAT BUILD / VOL. 01One foundation.
Many ways to open it.
AndroidiOSWindowsWeb
A SHARED RAZOR CLASS LIBRARY AT ITS HEART
INSIDE THE BOOKSTORE

Turn the page.

A little bookstore. Nine chapters to explore.
Pick a chapter or turn the page.

Booklat / Storefront
Browse books and discover independent sellers.Click screen to enlarge ↗
BEHIND THE BUILDDifferent platforms. Shared thinking.

A shared Razor Class Library (RCL) keeps reusable UI components, services, and core business logic together. Mobile, desktop, and web interfaces build on this centralized foundation, reducing code duplication and keeping shopping and vendor management consistent across platforms.

Shared Razor Class LibraryUI components · Services · Business logic
.NET MAUI Blazor HybridAndroid · iOS · Windows
Blazor WebWeb browsers
01 / The ecosystem

A place to shop. A place to sell.

Dedicated customer and independent vendor roles support catalog discovery, shopping carts, digital storefront management, and order processing.

02 / The interface

Native shell. Familiar experience.

Native shell containers host Blazor interfaces, while reusable components and scoped CSS carry a responsive design from desktop to mobile.

C#.NET MAUI Blazor HybridBlazor WebRazor Class Library (RCL)HTML / CSS
SOURCE CODE / GITHUB

A new chapter, in code.

Open the Booklat repository and explore the build behind the bookstore.

johannesclaus30 / Booklat_Finals1
Explore repositoryOpens GitHub in a new tab
05 / More to come

There’s more
in the making.

More projects will be showcased here soon.
New ideas, more experiments, and the stories behind the builds.

The collection keeps growing.
From systems to stories

See it in
full color.

Creative archive ↗

E-Reklamo user manual