
This project is a **full-stack scoring system** built for **Mister & Miss Linggo ng Kabataan 2025**.  
It’s designed to be reliable in a **live event** setting: **admins** control the competition flow, **judges** enter scores on separate devices, and results update in **real time** for the admin dashboard and final reports.

Below I’ll walk through the main pages and explain what each part does, why it matters, and the technical choices behind them.

## Login Page

![Login Page Screenshot](/assets/login.png)

The **Admin Dashboard** is the event control center. Admins manage contestants and judges, control rounds, monitor scoring progress, and finalize results.

## Key features showcased

- **Email & password** fields  
- Password **visibility toggle** (eye icon)  
- **Role-based redirect** after successful sign-in  

## Why this matters
Securing access and clearly separating **roles** prevents unauthorized actions (e.g., a judge accessing admin controls). The UX elements (eye icon, loading, friendly errors) improve usability during a **high-pressure event**.

## Admin Dashboard

![Admin Dashboard](/assets/admin.png)

The **Admin Dashboard** is the event control center. Admins manage **contestants** and **judges**, control rounds, monitor scoring progress, and finalize results.

## Core capabilities
• **Contestant Management** — create / edit / delete contestants, upload photo (Cloudinary), set contestant number and metadata.  

• **Judge Management** — create judge accounts, reset passwords, see online status.  

• **Round Control** — lock/unlock segments (Production, Sportswear, Q&A, Formal). Unlocking a round immediately notifies judges and makes the scoring UI visible to them.  

• **Live Score Monitor** — live average and weighted totals for each contestant, submission status per judge (✓/✗).  

• **Top 5 & Finalization** — the system auto-ranks contestants after rounds and can mark the Top 5 for the final judging stage.  

• **Export** — PDF/Excel export of raw scores and final tallies.  

## Why this matters
Centralized control with **live visibility** is essential for transparency and fairness. Admins can monitor who submitted scores and intervene if corrections are needed.

![Contestant CRUD](/assets/contestant.png)

Contestant creation includes an **image uploader (Cloudinary)**. Images are stored there and the returned URL saved in **MongoDB**. The form validates inputs and shows previews so the admin can confirm before saving.

## Judge Panel
![Judge](/assets/judge.jpg)

## Purpose
The **Judge Panel** is intentionally minimal and focused: judges see only the currently unlocked round and the list of contestants assigned. The scoring form includes each **criterion** and auto-calculates the **weighted score live** (so judges see the impact of their inputs before submitting).

### Judging flow (example)

Production Number — criteria:  
• **Synchronization & Energy** — 1–10 (10% weight)  
• **Stage Presence & Confidence** — 1–10 (10% weight)  
• **Showmanship** — 1–10 (5% weight)  

Total for the round = **25% of final score**.

### Once a judge submits:
- The score is persisted to **MongoDB**.  
- An **Ably (realtime)** event is broadcast so the admin dashboard updates instantly.  
- The judge’s submission becomes **locked** (admin can re-open if edits are allowed).  

## Top 5 Final Round
![Top 5](/assets/top5.jpg)

### Final round specifics
• Only **Top 5 contestants** are displayed.  
• Criteria are scored 1–10 (**Poise, Walk, Eye contact, Facial expression, X-factor**).  
• Scores are tallied in **real time** and reflect immediately on the admin live ranking.  

## Technical summary (why these tools)
• **Next.js (App Router)** — fast, server/client rendering, easy API routes.  
• **MongoDB** — flexible document model for contestants, judges, rounds, and scores.  
• **NextAuth (Credentials)** — role-based authentication (admin, judge).  
• **Ably** — real-time pub/sub to broadcast round lock/unlock and score updates.  
• **Cloudinary** — secure image upload and optimized delivery for contestant photos.  
• **pdfmake (or jsPDF) & xlsx** — generate printable PDF and Excel reports.  

### Data model (high level)
```python
users (judges, admins) — { email, name, passwordHash, role }
contestants — { name, number, barangay, photoUrl, ... }
rounds — { name, weights, isLocked }
scores — { judgeId, contestantId, roundId, criteria: {..}, totalScore }


A Next.js + MongoDB real-time scoring system built for Mister & Miss Linggo ng Kabataan 2025 — admin controls, judge panels, live tallying, and printable reports.

MM LNK 2025 — Real-time Pageant Scoring System


This project was developed during my internship at the **Center for Culture and Arts Development – Bohol (CCAD)**.  
The goal was to create a modern website where **cultural identity, programs, events, and news** can be shared with the Boholano community in an organized and sustainable way.

The system is powered by **Next.js, MongoDB, NextAuth, and Cloudinary** — giving CCAD admins an easy-to-use CMS while presenting the public with a clean and accessible interface.

---

## 🏠 Home Page

![CCAD's Mission and Vision](/assets/vision.jpg)

The homepage highlights **Vision, Mission, and Mandates**, ensuring that the public understands CCAD’s foundation and advocacy at first glance.  

It also dynamically displays:

- **News and Events** (auto-synced from the admin dashboard)  
- **Programs and Initiatives** (organized by year and category)  
- **CCAD Logo & Identity** for cultural branding  

This makes the site not only informational but also aligned with CCAD’s cultural identity.

---

## 📢 News & Events

![CCAD's News and Updates](/assets/news.jpg)

The News and Events sections ensure the **community stays updated**:  
- **News articles** with titles, dates, and rich content  
- **Upcoming and past events** with descriptions, images, and schedules  
- Stored images are uploaded to **Cloudinary** for optimized delivery  

This allows CCAD to showcase cultural activities such as **Sandugo Festival workshops, assemblies, and local performances.**

---

## 🎭 Programs

![CCAD's Program](/assets/programs.jpg)

Programs are categorized into:  
- **Artistic Development Programs**  
- **Culture & Development Programs**  
- **Cultural Heritage Programs**  
- **Culture & Governance**  

Each program contains **year-based archives** (e.g., 2023, 2024, 2025), with details such as event descriptions, images, and outcomes.  
When a program is opened, visitors can see event details, gallery images, and background about its cultural significance.

---

## 🏛️ BACH Council Section

![BACH council](/assets/bach.jpg)

The **Bohol Arts and Cultural Heritage (BACH) Council** section introduces the **organizational structure, officers, and duties**.  

It provides:  
- Profiles of board members and section heads  
- Council mandates and objectives  
- Duties and functions that guide heritage preservation and arts development  

This creates transparency and strengthens cultural governance.

---

## ⚙️ Admin Dashboard

![CCAD's Admin](/assets/adminccad.png)

Admins manage all content with ease through the **CCAD Admin Panel**, which includes:  
- Banner Management  
- News Management  
- Events Management  
- Programs Management  
- BACH Council Management  
- "What is CCAD" content management  

Built with **NextAuth authentication**, the system ensures only authorized staff can log in and manage cultural content.

---

## 🛠️ Tools & Technologies

- **Next.js** — frontend & backend framework  
- **MongoDB** — content storage & program archives  
- **NextAuth** — secure authentication for admins  
- **Cloudinary** — optimized image hosting & delivery  
-- **Vercel** - for deployment
---

## 🌟 Key Impact

This project gave CCAD a **centralized, professional platform** to promote Bohol’s culture and arts.  
For me, it was a chance to apply **full-stack development skills** during my internship and deliver a system that has real-world cultural impact.



A dynamic content management system for the Center for Culture and Arts Development – Bohol (CCAD), built during my internship.

CCAD — Cultural & Arts Development Website


VineBot is an chatbot agent developed to serve the **Blessed Vineyard Ministry**.
The goal was to create an accessible, digital spiritual companion that can answer questions regarding the ministry's vision, worship practices, and biblical teachings in real-time.

The core intelligence is powered by a **Fine-Tuned Mistral 7B model** integrated with **Retrieval-Augmented Generation (RAG)**. This ensures that the bot doesn't just generate generic text, but provides accurate, context-aware answers based on specific ministry documents and scriptures.

The dataset used is the Ministry Manual of **Blessed Vineyard Ministry**.

---

## 🤖 Intelligent Chat Interface
![Chatbot Dashboard ](/assets/chatbotDashboard.png)


The user interface is designed for focus and clarity, featuring a modern dark-themed design.
Upon logging in, users are greeted with **suggested prompts** to help them get started, such as:

- "What is the vision of the ministry?"
- "What is the product ministry?"
- "How to do the activities and events?"

The system also features **Chat History Management**, allowing users to **Rename** or **Delete** previous conversations, ensuring a personalized and organized experience.

---

## 🧠 RAG-Powered Responses

```python
import faiss
DATA_DIR = os.path.join(os.path.dirname(__file__), "data")
INDEX_PATH = os.path.join(DATA_DIR, "******.index")
DOCS_PATH  = os.path.join(DATA_DIR, "******.pkl")

DATA_DIR = os.path.join(os.path.dirname(__file__), "data")
INDEX_PATH = os.path.join(DATA_DIR, "******.index")
DOCS_PATH  = os.path.join(DATA_DIR, "******.pkl")

embedder = SentenceTransformer('all-MiniLM-L6-v2')  

index = faiss.read_index(INDEX_PATH)

with open(DOCS_PATH, "rb") as f:
    docs = pickle.load(f)


def retrieve_context(query: str, top_k: int = 3) -> str:
    q_vec = embedder.encode([query]).astype(np.float32)
    D, I = index.search(q_vec, top_k)
    chunks = [docs[i] for i in I[0] if 0 <= i < len(docs)]
    return "\n".join(chunks) if chunks else "No relevant context found."

bnb_config = BitsAndBytesConfig(
    load_in_8bit=True,
    llm_int8_enable_fp32_cpu_offload=True
)
```

Unlike standard chatbots, VineBot utilizes **RAG (Retrieval-Augmented Generation)**.
When a user asks a theological or organizational question, the system:
1.  **Retrieves** relevant context from the ministry's knowledge base.
2.  **Generates** a coherent, spiritually grounded response using the **Mistral 7B** model.

This ensures that answers—like the definition of the ministry's vision shown above—are consistent with the church's specific doctrines and values.

---

## 🔐 Secure Authentication

![Login Screen](/assets/login2.png)

Security and identity management are handled via a robust authentication system.
Users can access the platform using:
- **Google OAuth Integration** for one-click sign-in.
- Standard email/password credentials.
- A secure "Sign Up" flow for new community members.

The quoting of **Ephesians 4:12** on the login screen sets the tone for the application, reminding users of the tool's purpose: *"To equip his people for works of service."*

---

## 👥 Admin & User Management

![Admin Dashboard](/assets/adminDashboard.png)

Administrators have full control over the platform through a dedicated **Admin Dashboard**.
Key features include:

- **User Overview:** View all registered users, their roles (Admin/User), and account status.
- **CRUD Operations:** Admins can **Add**, **Edit**, or **Delete** users as needed.
- **Role Assignment:** Manage permissions to ensure only authorized personnel have admin access.

![Edit User Modal](/assets/editUser.png)

The interface allows for quick updates to user details, ensuring the community database remains accurate and up-to-date.

---

## ⭐ Feedback & Ratings System

![User Ratings Admin View](/assets/adminRatings.png)

To ensure the AI provides high-quality responses, a **Feedback Loop** is integrated directly into the chat.
After receiving an answer, users can rate their experience (1-5 stars) and provide text feedback.

Admins can monitor these ratings via the dashboard to:
- Identify areas where the AI needs re-training.
- Review user satisfaction.
- Ensure the bot remains helpful and accurate.

---

## 🛠️ Tools & Technologies

- **Mistral 7B** — The core Large Language Model (LLM), fine-tuned for better instruction following.
- **RAG (Retrieval-Augmented Generation)** — For connecting the AI to specific ministry data.
- **Python/Django** — Backend server for handling requests and user management.
- **Neon Serverless Postgres** — Database.
- **Tailwind CSS** — For the responsive, dark-mode UI.

---

## 🌟 Key Impact

VineBot represents the intersection of **Faith and Technology**.
By implementing advanced AI techniques like **RAG**, this project moves beyond simple automation to create a tool that genuinely understands and serves the specific needs of the ministry, making spiritual guidance accessible 24/7.

A specialized AI chatbot built with a fine-tuned Mistral 7B model and RAG architecture to provide biblical guidance and ministry information.

VineBot — Ministry AI Assistant


This freelance project involved building a professional **portfolio and community hub** for **Nicole (Icarus)** — a Computer Engineering student, crypto trader, and founder of **Icarus Falls**.  

The website serves as both a **personal brand platform** and a **gateway to her trading community**, designed to attract new members, showcase achievements, and provide access to educational resources.

---

## 🏠 Landing & About

![Icarus homepage](/assets/icarus2.jpg)

The homepage introduces Icarus with her **background, story, and crypto journey** since 2019.  
Key highlights:  
- Introduction of **Icarus Falls (founded 2022)**  
- Experience as a **funded trader**  
- Advocacy for **blockchain education for Filipinos**  
- A section showing **partnered firms and platforms**  

This sets credibility and creates trust for new visitors.

---


## 🔒 Fuyu Lab (VIP Section)

![Fuyu](/assets/fuyu.png)

Fuyu Lab is a **VIP trading community under Icarus Falls**, exclusively for members who register via **OKX and BingX referral links**.  

Features include:  
- **Live Mentorship Sessions**  
- **15–25 Trading Signals per month** (Crypto, Forex, Indices)  
- **Weekly Outlooks & Market Analysis**  
- **Exclusive Campaigns & Giveaways** (with BingX & OKX)  
- **1-on-1 Mentorship** (donation-based, supporting Angat Buhay NGO)  
- **Merchandise & Community Perks**  

This section turns the website into a **conversion funnel**, guiding casual visitors toward becoming active, engaged VIP members.


## 🛠️ Tech Stack

- **Next.js** — frontend framework for performance & SEO  
- **TailwindCSS** — fast, responsive styling  
- **Static & Dynamic Content Integration** — for community updates & testimonials  
- **Vercel** — optimized hosting with smooth delivery  



A portfolio website for Nicole (Icarus), showcasing her crypto journey, community, and educational initiatives.

0xIcarus — Crypto Community & Trading Hub


**Teamdir** is a **social networking platform** built specifically for **Valorant players**.  
It allows gamers to create accounts, post updates, follow others, and connect to form teams.  

The platform is powered by **Next.js** for frontend + backend integration, **MongoDB with Prisma ORM** for robust data handling, and **Vercel** for seamless deployment.

🔗 **Live Demo:** [teamdir.vercel.app](https://teamdir.vercel.app/)  
**Test Account:** `demo@gmail.com` / `demo567`

---

## 🏠 Home Feed

![Teamdir Homepage](/assets/teamdirhome.jpg)

The **Home page** serves as the community feed, where users can:  
- Post updates (thoughts, team invites, or Valorant-related content)  
- Interact with others via likes and comments  
- Scroll through recent posts from fellow players  

This creates a **familiar social experience** tailored for the Valorant community.

---

![Profile](/assets/profile.jpg)
## 👤 Profile & Social Features

Users can:  
- Create an account and customize their profile  
- Follow/unfollow other players  
- View suggested users in the **“Who to Follow”** sidebar  

This makes networking and **finding teammates** easy and engaging.

---

![Notifications](/assets/notif.jpg)
## 🔔 Notifications

The **notification system** keeps users updated on:  
- New followers  
- Likes and comments on their posts  
- Relevant updates within the community  

This ensures players **stay connected and engaged**.

---

## 🛠️ Tech Stack

- **Next.js** — frontend + backend in one framework  
- **Prisma ORM** — database queries with type safety  
- **MongoDB** — NoSQL storage for users, posts, and interactions  
- **TailwindCSS** — styling for a clean, responsive UI  
- **Vercel** — fast deployment and hosting  

---

## 🎯 Impact

**Teamdir** provides Valorant enthusiasts with a **dedicated social hub** — something general platforms like Twitter or Facebook don’t fully offer.  

It helps players:  
- Build their **gaming identity**  
- Connect with others for **scrims and ranked play**  
- Stay active in a **like-minded gaming community**  

For me, this project was an opportunity to **combine social networking concepts** with **gaming culture**, using a modern full-stack setup (Next.js, Prisma, MongoDB).

---



A Next.js + MongoDB social hub for Valorant players to connect, form teams, and share updates. Built with Prisma ORM and deployed on Vercel.

My Projects