🌸 Velora

Platform Terlengkap untuk Dokumentasi, Kesehatan, Dukungan, & Perhatian Ibu Hamil

🚀 Live Demo • 📱 Mobile Preview • 📖 Documentation

💝 Tentang Velora

Velora adalah platform digital komprehensif yang dirancang khusus untuk mendampingi perjalanan kehamilan ibu hamil di Indonesia. Dengan kombinasi teknologi modern dan pendekatan yang berpusat pada pengguna, Velora menyediakan solusi terintegrasi untuk dokumentasi, monitoring kesehatan, dan dukungan emosional selama masa kehamilan.

🎯 Visi & Misi

Visi: Menjadi sahabat digital terpercaya untuk setiap ibu hamil dalam menjalani perjalanan kehamilan yang lebih bermakna.

Misi:

📸 Menyediakan platform dokumentasi visual perjalanan kehamilan
🏥 Memberikan tools monitoring kesehatan yang mudah dan akurat
📚 Menyajikan konten edukatif berbasis riset medis terpercaya
🤖 Menghadirkan sistem prediksi risiko kesehatan dengan AI
💚 Membangun komunitas dukungan untuk kesehatan mental ibu hamil

✨ Fitur Unggulan

📸 Galeri Kehamilan

Upload foto & video ke cloud storage
Organisasi berdasarkan trimester & minggu
Sharing dengan keluarga & dokter
Backup otomatis & sinkronisasi

📅 Timeline Interaktif

Tracking perkembangan minggu ke minggu
Milestone kehamilan visual
Jadwal pemeriksaan & reminder
Progress tracking komprehensif

🏥 Diagnosa AI (84.21% Akurasi)

Prediksi risiko kesehatan realtime
Input data vital signs
Laporan PDF downloadable
Rekomendasi tindak lanjut medis

📖 Jurnal Digital

Koleksi 50+ artikel medis terpercaya
Kategorisasi berdasarkan trimester
Bookmark & reading tracker
Tips dari ahli kebidanan

👤 Manajemen Profil

Upload foto profil ke Supabase Storage
Edit informasi personal & medis
Keamanan data tingkat enterprise
Dashboard overview lengkap

🔒 Keamanan & Privacy

Enkripsi end-to-end
Compliance GDPR
Backup multi-region
Authentication berlapis

🛠️ Tech Stack

Frontend

Framework     : Next.js 14 (App Router)
Language      : TypeScript
Styling       : Tailwind CSS + Custom Components
UI Library    : Aceternity UI, Tabler Icons
Animation     : Framer Motion
State Mgmt    : React Context API
Authentication: Custom JWT + Context

Backend

Runtime       : Node.js + Express.js
Database      : Supabase (PostgreSQL)
Storage       : Supabase Storage
AI/ML         : Python ML Model (84.21% accuracy)
File Upload   : Multer + Sharp (image processing)
Deployment    : Vercel (Serverless)

Infrastructure

Frontend Host : Vercel
Backend Host  : Vercel (Serverless Functions)
Database      : Supabase Cloud
Storage       : Supabase Storage
CDN           : Vercel Edge Network
Monitoring    : Vercel Analytics

🚀 Quick Start

Prerequisites

Node.js 18.0.0+
npm 9.0.0+
Git

Installation

Clone Repository

git clone https://github.com/Hidayattt24/fe-velora.git
cd fe-velora

Install Dependencies

npm install

Environment Setup

cp .env.example .env.local

Configure Environment Variables

# Velora Frontend Environment Variables

# API Configuration
NEXT_PUBLIC_API_URL=https://api-velora.vercel.app

# ML API Configuration
NEXT_PUBLIC_ML_API_URL=https://dayattttt2444-maternal-health-risk.hf.space

# Development settings
NEXT_PUBLIC_ENV=development

Run Development Server

npm run dev

Open Application

http://localhost:3000

📁 Project Structure

fe-velora/
├── 📂 src/
│   ├── 📂 app/                    # Next.js App Router
│   │   ├── 📂 auth/              # Authentication pages
│   │   │   ├── login/            # Login page
│   │   │   └── register/         # Registration page
│   │   ├── 📂 main/              # Protected main application
│   │   │   ├── diagnosa/         # AI Diagnosis module
│   │   │   ├── gallery/          # Photo gallery & upload
│   │   │   ├── journal/          # Articles & reading
│   │   │   ├── profile/          # User profile management
│   │   │   └── timeline/         # Pregnancy timeline
│   │   ├── globals.css           # Global styles
│   │   ├── layout.tsx            # Root layout
│   │   └── page.tsx              # Landing page
│   ├── 📂 components/            # Reusable components
│   │   ├── 📂 auth/              # Auth-related components
│   │   ├── 📂 sections/          # Landing page sections
│   │   ├── 📂 ui/                # UI components
│   │   ├── MainNav.tsx           # Main navigation
│   │   ├── Navbar.tsx            # Landing navbar
│   │   └── SplashScreen.tsx      # Loading screen
│   └── 📂 lib/                   # Utilities & configurations
│       ├── 📂 api/               # API service functions
│       ├── 📂 contexts/          # React contexts
│       ├── 📂 data/              # Static data & constants
│       ├── 📂 hooks/             # Custom React hooks
│       └── utils.ts              # Utility functions
├── 📂 public/                    # Static assets
│   ├── 📂 landing/               # Landing page assets
│   ├── 📂 main/                  # Application assets
│   └── favicon.ico
├── 📄 next.config.ts             # Next.js configuration
├── 📄 tailwind.config.ts         # Tailwind CSS config
├── 📄 package.json               # Dependencies
└── 📄 README.md                  # Documentation

🎨 Design System

Color Palette

Primary Pink    : #D291BC    /* Brand primary */
Light Pink      : #FFE3EC    /* Backgrounds & accents */
Text Primary    : #1F2937    /* Main text */
Text Secondary  : #6B7280    /* Supporting text */
Success Green   : #10B981    /* Success states */
Warning Yellow  : #F59E0B    /* Warning states */
Error Red       : #EF4444    /* Error states */

Typography

Font Family     : Inter (System font stack)
Headings        : 600-700 weight
Body Text       : 400-500 weight
Code/Mono       : JetBrains Mono

Responsive Breakpoints

Mobile          : 0px - 640px
Tablet          : 641px - 1024px
Desktop         : 1025px - 1280px
Large Desktop   : 1281px+

🔧 Development Guide

Struktur Komponen

// Example: Komponen dengan TypeScript
interface ComponentProps {
  title: string;
  isLoading?: boolean;
  onSubmit: (data: FormData) => void;
}

export function Component({
  title,
  isLoading = false,
  onSubmit,
}: ComponentProps) {
  // Component logic
}

API Integration

// Example: Service function
export const apiService = {
  async getData(id: string): Promise<ApiResponse<Data>> {
    const response = await fetch(`${API_BASE_URL}/data/${id}`);
    if (!response.ok) throw new Error("Failed to fetch");
    return response.json();
  },
};

State Management

// Example: Context usage
const { user, updateUser, isAuthenticated } = useAuth();

📱 Screenshots

🖼️ Klik untuk melihat screenshots

Landing Page

Authentication

Main Application

🚀 Deployment

Vercel Deployment (Recommended)

Connect Repository

# Install Vercel CLI
npm install -g vercel

# Login and deploy
vercel --prod

Environment Variables Set di Vercel Dashboard:

NEXT_PUBLIC_API_URL=https://api-velora.vercel.app

Build Settings

{
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "installCommand": "npm install"
}

Manual Deployment

# Build production
npm run build

# Start production server
npm start

🧪 Testing

Run Tests

# Unit tests
npm run test

# E2E tests
npm run test:e2e

# Coverage report
npm run test:coverage

Performance Testing

# Lighthouse audit
npm run audit

# Bundle analysis
npm run analyze

📊 Performance Metrics

Core Web Vitals

LCP (Largest Contentful Paint): < 2.5s ⚡
FID (First Input Delay): < 100ms ⚡
CLS (Cumulative Layout Shift): < 0.1 ⚡

Bundle Size

First Load JS: 102 kB (Excellent)
Page Components: ~50-80 kB average
Images: WebP/AVIF optimized

Lighthouse Score

Performance: 95+ 🟢
Accessibility: 100 🟢
Best Practices: 100 🟢
SEO: 100 🟢

🤝 Contributing

Kami menyambut kontribusi dari komunitas! Ikuti langkah berikut:

Getting Started

Fork repository
Create feature branch (git checkout -b feature/AmazingFeature)
Commit changes (git commit -m 'Add some AmazingFeature')
Push to branch (git push origin feature/AmazingFeature)
Open Pull Request

Coding Standards

✅ TypeScript strict mode
✅ ESLint + Prettier
✅ Conventional Commits
✅ Component documentation
✅ Test coverage > 80%

Pull Request Guidelines

Deskripsi lengkap perubahan
Screenshots untuk UI changes
Test results
Performance impact assessment

👥 Tim Pengembang

_{Hidayat Nur Hakim}
@Hidayattt24
UI/UX Designer, Frontend Developer, Backend Developer

_{Tiara Agustin}
@tiaraagustinn
Creative Copywriter, Content Strategist, Proposal Writer

Kontribusi Tim

🎨 Hidayat Nur Hakim - Tech Lead & Full-Stack Developer

🎨 UI/UX Design & Prototyping
⚛️ Frontend Development (Next.js + TypeScript)
🔧 Backend Development (Node.js + Express)
🗄️ Database Design & API Architecture
🚀 DevOps & Deployment Strategy

✍️ Tiara Agustin - Content Strategist & Creative Lead

✨ Creative Copywriting & Brand Voice
💡 Product Ideation & User Research
📝 Content Strategy & Article Writing
📋 Business Proposal & Documentation
🎯 User Experience Content Design

📝 Lisensi

Project ini dilisensikan di bawah MIT License.

MIT License

Copyright (c) 2024 Velora Team

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

📞 Support & Contact

Support Channels

🐛 Bug Reports: GitHub Issues
💡 Feature Requests: GitHub Discussions
📧 Email: [email protected]
💬 Discord: Velora Community

Business Inquiries

📧 Email: [email protected]
📱 WhatsApp: +62 812-3456-7890
🌐 Website: velora-lake.vercel.app

🙏 Acknowledgments

Open Source Dependencies

Next.js - React framework
Tailwind CSS - Utility-first CSS
Framer Motion - Animation library
Tabler Icons - Beautiful icons
Supabase - Backend as a Service

Design Inspiration

Dribbble - Design inspiration
Figma Community - UI components
Material Design - Design principles

Medical Content Sources

Ikatan Bidan Indonesia (IBI)
Perkumpulan Obstetri dan Ginekologi Indonesia (POGI)
World Health Organization (WHO)
American College of Obstetricians and Gynecologists (ACOG)

Dibuat dengan 💝 untuk ibu hamil Indonesia

⭐ Star Repository • 🐛 Report Bug • 💡 Request Feature

Name		Name	Last commit message	Last commit date
Latest commit History 76 Commits
public		public
src		src
.env.example		.env.example
.gitignore		.gitignore
README.md		README.md
deploy.ps1		deploy.ps1
deploy.sh		deploy.sh
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
vercel.json		vercel.json

Hidayattt24/FE-Velora

Folders and files

Latest commit

History

Repository files navigation