Member	Date	Day	Time In	Time Out	Duration	Status
No records yet. Click a project day to start logging.

Member

Date

Day

Time In

Time Out

Duration

Status

No records yet. Click a project day to start logging.

Project Plan

Week-by-Week Timeline

Region XIII Caraga · March 8 – April 5, 2026 · Team of 5

Rubrics Breakdown

Originality & Creativity

UI / UX Design

Functionality

Responsiveness

Content Accuracy

Code Organization

Documentation

100

Total Points

The Team

Laurence

Full Stack Developer

Project structure setup
React routing
Component integration
Performance optimization
Final deployment

Jonas

Backend Developer

JSON data files
Content structure
Dynamic data mapping
Logic assistance

Zareena

Frontend Developer

UI layout design
Hero section
Homepage sections
Scroll animations

Kriziel

Frontend Developer

Tourist page layout
Image gallery
Province cards
Responsive adjustments

Andrea

Documentor

Full documentation
Wireframes & user flow
Testing documentation
Rubrics alignment

Week-by-Week Timeline

Week 1

Mar 8 – 13

Planning & Design Phase

Tasks

Research Caraga region
Create sitemap
Wireframes (Figma/Canva)
Finalize color palette & theme
Setup React: npm create vite@latest

Outputs

Wireframe complete
Site structure defined
Content outline ready

Laurence – React setup Jonas – Content data Zareena – UI mockup Kriziel – UI mockup Andrea – Wireframes

Week 2

Mar 14 – 20

Dev Phase 1 — Core Pages

Tasks

Homepage (Hero + About)
Navigation Bar & Footer
Province Pages
Basic CSS styling
JSON data file structure

Outputs

Working navigation
3+ pages complete
Desktop design done

Laurence – Routing Jonas – JSON data Zareena – Homepage Kriziel – Province pages

Week 3

Mar 21 – 27

Dev Phase 2 — Features & Creativity

Tasks

Tourist Spots & Gallery page
Hover & scroll animations
Mobile responsive design
Interactive cards & map
Dynamic JSON rendering

Outputs

Fully responsive site
Animations live
All pages done

Laurence – Debug Jonas – Dynamic data Zareena – Animations Kriziel – Gallery + responsive Andrea – Testing docs

Week 4

Mar 28 – Apr 3

Testing & Optimization

Tasks

Fix responsiveness issues
Optimize images & assets
Test: Desktop, Tablet, Mobile
Lighthouse performance audit
Content proofreading

Outputs

Bug-free version
Optimized performance
Clean UI/UX pass

Laurence – Optimization Jonas – Data review Zareena – UI fixes Kriziel – Responsive QA Andrea – Full docs

Final Days

Apr 4 – 5

Finalization & Submission

Tasks

Final presentation practice
Prepare presentation slides
Deploy: Vercel / Netlify / GitHub Pages
Final documentation submission

Deploy

Vercel (recommended)
Netlify
GitHub Pages

Laurence – Deploy Andrea – Final report

Website Structure

Home

About Caraga

Provinces

Tourist Spots

Culture & Festivals

Gallery

Contact

Design Concept

"Discover Caraga: Nature, Culture & Progress"

#000000

Black

#14213D

Prussian Blue

#FCA311

Orange

#E5E5E5

Alabaster

#FFFFFF

White

Ocean blue gradient → Caraga coastline inspiration

Smooth scroll + animated province cards

Orange gold accent → culture & festivals

Modern minimalist — clean whitespace & typography

Project Statement

The members of this team — Laurence, Jonas, Zareena, Kriziel, and Andrea — commit to building a website that proudly showcases Region XIII, the Caraga Administrative Region. This project is our opportunity to highlight the rich culture, natural beauty, and heritage of Caraga through thoughtful design and clean, modern code using HTML, CSS, and JSX. they aim to deliver a website that is not only visually compelling and highly original, but also intuitive, accessible, and fully responsive across all devices. Each member brings a unique role to the table, and together they are committed to meeting our deadline of April 5, 2026 with work that they are truly proud of.

Laurence

Jonas

Zareena

Kriziel

Andrea

Architecture

Website Flow & Structure

Detailed frontend component tree and backend data flow for the Caraga website

Frontend Architecture — React Component Tree

Browser / User

Visits the website URL

index.html

Root HTML · loads Vite build

Entry Point

main.jsx

ReactDOM.createRoot · mounts App

JSX Entry

App.jsx

BrowserRouter · Route definitions · Global state

React Router

Layout.jsx

Wraps every page · holds Navbar + Footer

Shared Layout

Shared Components

Navbar.jsx

Logo · Nav links · Mobile hamburger · Active route highlight

Footer.jsx

Quick links · Social · Copyright · Back to top button

Loader.jsx

Spinner shown while data loads or page transitions

Page Components (React Router Routes)

/ Home

HomePage.jsx

HeroSection
AboutCaraga
ProvincePreview
FestivalHighlight
CallToAction

/about

AboutPage.jsx

HistorySection
GeographyMap
KeyFacts
GovernmentInfo

/provinces

ProvincesPage.jsx

ProvinceCard × 5
ProvinceDetail
MunicipalityList
MapEmbed

/tourist

TouristPage.jsx

SpotCard grid
FilterBar
SpotDetail modal
MapPins

/culture

CulturePage.jsx

FestivalCards
TraditionSection
CuisineSection
ArtsCrafts

/gallery

GalleryPage.jsx

ImageGrid
LightboxModal
CategoryFilter
LazyLoad imgs

/contact

ContactPage.jsx

ContactForm
OfficeLocations
SocialLinks

Reusable UI Components

Card.jsx

Province / Tourist / Festival cards

Button.jsx

Primary, secondary, outline variants

Modal.jsx

Lightbox + detail popups

Badge.jsx

Category & status labels

ScrollTop.jsx

Floating back-to-top

SectionTitle.jsx

Consistent heading block

Recommended Folder Structure

[ / ] caraga-website/

[ f ] index.html

[ f ] vite.config.js

[ f ] package.json

[ D ] src/

[ * ] main.jsx

[ * ] App.jsx

[ D ] pages/

[ r ] HomePage.jsx

[ r ] AboutPage.jsx

[ r ] ProvincesPage.jsx

[ r ] TouristPage.jsx

[ r ] CulturePage.jsx

[ r ] GalleryPage.jsx

[ r ] ContactPage.jsx

[ D ] components/

[ c ] Navbar.jsx

[ c ] Footer.jsx

[ c ] Layout.jsx

[ c ] Card.jsx

[ c ] Modal.jsx

[ c ] Loader.jsx

[ c ] Button.jsx

[ c ] ScrollTop.jsx

[ D ] data/

[ j ] provinces.json

[ j ] touristSpots.json

[ j ] festivals.json

[ j ] gallery.json

[ j ] facts.json

[ D ] styles/

[ s ] global.css

[ s ] variables.css

[ s ] components.css

[ D ] assets/

[ i ] images/

[ i ] icons/

[ i ] hero/

[ D ] utils/

[ u ] helpers.js

[ u ] constants.js

Backend / Data Flow — JSON to Component Rendering

Data Source Layer — JSON Files (Jonas)

provinces.json

id, name, capital
population, area
description
municipalities[]
imageUrl

touristSpots.json

id, name, province
category
description, rating
coordinates
images[]

festivals.json

id, name, province
month, duration
description
highlights[]
imageUrl

gallery.json

id, src, alt
category, province
caption, credit
width, height

facts.json

region code, name
total area, population
economy data
government officials

Data Import Layer

import provinces from '../data/provinces.json' — Static imports via Vite · zero runtime cost

Vite / ES Modules

helpers.js

filterByProvince()
filterByCategory()
sortByRating()
formatPopulation()

constants.js

PROVINCE_NAMES[]
CATEGORY_TYPES[]
COLOR_MAP{}
ROUTE_PATHS{}

useState / useEffect

Local component state
Filter state
Search query state
Modal open/close

Component Data Consumption

ProvincesPage.jsx

← provinces.json

{provinces.map(p => <Card key={p.id} data={p}/>)}

TouristPage.jsx

← touristSpots.json

{filtered.map(s => <SpotCard key={s.id} spot={s}/>)}

CulturePage.jsx

← festivals.json

{festivals.map(f => <FestCard key={f.id} fest={f}/>)}

GalleryPage.jsx

← gallery.json

{imgs.map(i => <img key={i.id} src={i.src}/>)}

Virtual DOM → Real DOM

React reconciles component tree · Vite injects hot-reload in dev · Production build minifies & optimizes

Rendered Output

User sees the Caraga Website

Fully rendered, responsive, animated — ready to score 100/100

Sample JSON Data Structure

provinces.json

[
  {
    "id": 1,
    "name": "Agusan del Norte",
    "capital": "Butuan City",
    "population": 412000,
    "area_km2": 2730,
    "description": "Home to Butuan...",
    "municipalities": ["Buenavista",...],
    "imageUrl": "/assets/agusan-norte.jpg"
  }
]

touristSpots.json

[
  {
    "id": 1,
    "name": "Enchanted River",
    "province": "Surigao del Sur",
    "category": "natural",
    "rating": 5,
    "description": "Crystal-clear blue...",
    "coordinates": { "lat": 9.18, "lng": 126.06 },
    "images": ["/assets/enchanted-1.jpg"]
  }
]

festivals.json

[
  {
    "id": 1,
    "name": "Bonok-Bonok Maradjaw",
    "province": "Surigao del Norte",
    "month": "September",
    "duration": "7 days",
    "description": "Colorful street...",
    "highlights": ["Parade","Dance","Food Fair"],
    "imageUrl": "/assets/bonok-bonok.jpg"
  }
]

Page Layout Blueprints

/ Home

HomePage.jsx

Hero Section
Full-width · Caraga bg image · Title + CTA

About Caraga · 2-col text + image

Province 1

Province 2

Province 3

Festival Highlight · Horizontal scroll

Call To Action Banner

Zareena

/provinces

ProvincesPage.jsx

Page Header: Provinces of Caraga

Agusan del Norte

Agusan del Sur

Dinagat

Sur del Norte

Sur del Sur

KrizielJonas

/tourist

TouristPage.jsx

Tourist Spots of Caraga

Filter: All / Beach / Falls / Heritage / City

Enchanted River

Tinuy-an Falls

Britania

Kriziel

/gallery

GalleryPage.jsx

Photo Gallery

Filter: All / Nature / Culture / City / Food

img

Kriziel

/culture

CulturePage.jsx

Culture & Festivals

Festivals · by month

Traditions · text + images

Cuisine of Caraga · 3-col food cards

Arts & Crafts · gallery row

Zareena

/about

AboutPage.jsx

About Caraga Region

History Timeline

Key Facts · Stat cards

Geography & Map · Full-width embed

Government & Economy · 2-col info

ZareenaJonas

Team Time-In Calendar

Week-by-Week Timeline

Laurence

Jonas

Zareena

Kriziel

Andrea

Website Flow & Structure

Project Reviewer

Reference Links