413 lines
17 KiB
TypeScript
413 lines
17 KiB
TypeScript
import PortfolioChallengeSolution from "@/components/portfolio/PortfolioChallengeSolution";
|
||
import { PortfolioCoreFeatures } from "@/components/portfolio/PortfolioCoreFeatures";
|
||
import { PortfolioDevelopmentProcess } from "@/components/portfolio/PortfolioDevelopmentProcess";
|
||
import { PortfolioExecutiveSummary } from "@/components/portfolio/PortfolioExecutiveSummary";
|
||
import { PortfolioHero } from "@/components/portfolio/PortfolioHero";
|
||
import PortfolioLessonsSection from "@/components/portfolio/PortfolioLessonsSection";
|
||
import { PortfolioProjectDetails } from "@/components/portfolio/PortfolioProjectDetails";
|
||
import { PortfolioProjectOverview } from "@/components/portfolio/PortfolioProjectOverview";
|
||
import { PortfolioResultsImpact } from "@/components/portfolio/PortfolioResultsImpact";
|
||
import PortfolioRoadmapSection from "@/components/portfolio/PortfolioRoadmapSection";
|
||
import PortfolioTestimonial from "@/components/portfolio/PortfolioTestimonial";
|
||
import { motion } from "framer-motion";
|
||
import {
|
||
Activity,
|
||
AlertTriangle,
|
||
ArrowRight,
|
||
BarChart,
|
||
Bell,
|
||
Brain,
|
||
CheckCircle,
|
||
Cloud,
|
||
CloudCog,
|
||
Code,
|
||
Cpu,
|
||
Database,
|
||
ExternalLink,
|
||
Film,
|
||
Gamepad,
|
||
Globe,
|
||
Home,
|
||
List,
|
||
Mic,
|
||
Palette,
|
||
PlayCircle,
|
||
RefreshCcw,
|
||
Repeat,
|
||
Scan,
|
||
Server,
|
||
Share2,
|
||
ShieldCheck,
|
||
Smartphone,
|
||
Split,
|
||
Target,
|
||
TestTube,
|
||
Users,
|
||
Zap
|
||
} from "lucide-react";
|
||
import { useNavigate } from "react-router-dom";
|
||
import { Button } from "../components/ui/button";
|
||
import wokaImage from "../src/images/woka-side-award.webp";
|
||
import wokaLogo from "../src/images/woka-logo.png";
|
||
|
||
// Project data
|
||
|
||
const projectData = {
|
||
hero: {
|
||
title: "Woka - Changing the Way Kids Learn and Play",
|
||
subtitle: "Animated Shows, Video Games, and Web Series for Kids",
|
||
subtitleTwo: "Transform learning into an exciting adventure. Offering a wide range of animated content, interactive video games, and engaging web series, every feature is crafted to inspire and educate children through playful experiences.",
|
||
imageUrl: wokaImage,
|
||
imageAlt: "Woka App Showcase"
|
||
},
|
||
details: {
|
||
technologies: [
|
||
{ name: "Swift (iOS)", icon: <Smartphone className="w-4 h-4" /> },
|
||
{ name: "Kotlin (Android)", icon: <Smartphone className="w-4 h-4" /> },
|
||
{ name: "Node.js", icon: <Server className="w-4 h-4" /> },
|
||
{ name: "MongoDB", icon: <Database className="w-4 h-4" /> },
|
||
{ name: "AWS", icon: <Cloud className="w-4 h-4" /> },
|
||
{ name: "Firebase Analytics", icon: <BarChart className="w-4 h-4" /> }
|
||
],
|
||
industries: ["Edtech", "Entertainment"],
|
||
duration: "6 months, November 2023 – April 2024",
|
||
teamSize: "4 Mobile Developers, 1 Backend Developer, 1 Designer, 1 QA Engineer, 1 PM",
|
||
platforms: ["iOS", "Android"]
|
||
},
|
||
|
||
achievements: [
|
||
{
|
||
label: "Reduced App Load Time",
|
||
value: "47%",
|
||
description: "Faster startup enhancing user experience",
|
||
},
|
||
{
|
||
label: "Crash-Free Sessions",
|
||
value: "99.8%",
|
||
description: "Ensured app stability and reliability",
|
||
},
|
||
{
|
||
label: "Active Young Learners",
|
||
value: "100K+",
|
||
description: "Kids engaged in learning activities",
|
||
},
|
||
{
|
||
label: "User Retention",
|
||
value: "+300%",
|
||
description: "Increase in daily active users",
|
||
},
|
||
{
|
||
label: "Parent Satisfaction",
|
||
value: "95%",
|
||
description: "Parents recommend Woka",
|
||
},
|
||
],
|
||
executiveSummary: {
|
||
content: "Developed Woka as a vibrant platform where learning meets play. With a safe and fun environment to explore, learn, and grow effortlessly."
|
||
},
|
||
businessObjectives: [
|
||
"Redevelop app natively for optimized performance",
|
||
"Update UI/UX to match modern design standards",
|
||
"Ensure backend stability and reduce downtime",
|
||
"Implement monitoring & analytics for continuous improvement"
|
||
],
|
||
coreFeatures: [
|
||
{
|
||
title: "Animated Learning Content",
|
||
description: "Engaging animated shows that make learning fun and memorable for kids of all ages.",
|
||
icon: <Film className="w-6 h-6" /> // 🎬 Animated shows icon
|
||
},
|
||
{
|
||
title: "Interactive Video Games",
|
||
description: "Educational games that combine entertainment with learning objectives and skill development.",
|
||
icon: <Gamepad className="w-6 h-6" /> // 🎮 Game icon
|
||
},
|
||
{
|
||
title: "Educational Web Series",
|
||
description: "Structured learning content delivered through engaging episodic format.",
|
||
icon: <PlayCircle className="w-6 h-6" /> // ▶️ Video/Web series icon
|
||
},
|
||
{
|
||
title: "Safe Learning Environment",
|
||
description: "Child-friendly platform with robust safety measures and parental controls.",
|
||
icon: <ShieldCheck className="w-6 h-6" /> // 🛡️ Safety icon
|
||
},
|
||
{
|
||
title: "Progress Tracking",
|
||
description: "Comprehensive analytics for parents and educators to monitor learning progress.",
|
||
icon: <BarChart className="w-6 h-6" /> // 📊 Analytics icon
|
||
},
|
||
{
|
||
title: "Multi-Device Compatibility",
|
||
description: "Seamless experience across tablets, smartphones, and computers.",
|
||
icon: <Smartphone className="w-6 h-6" /> // 📱 Devices icon
|
||
}
|
||
],
|
||
developmentPhases: [
|
||
{
|
||
phase: "Approach & Planning",
|
||
duration: "Ongoing",
|
||
description: "Agile methodology with phased module redevelopment to ensure smooth migration and feature parity.",
|
||
icon: <Repeat className="w-5 h-5" /> // 🔁 Agile / iterative process
|
||
},
|
||
{
|
||
phase: "Sprints",
|
||
duration: "2-week cycles",
|
||
description: "Feature parity milestones achieved in each sprint to maintain continuity and user experience.",
|
||
icon: <Activity className="w-5 h-5" /> // ⚡ Sprint cycles icon
|
||
},
|
||
{
|
||
phase: "Testing",
|
||
duration: "Throughout development",
|
||
description: "Unit, integration, and device lab testing to ensure stability and performance across all modules.",
|
||
icon: <TestTube className="w-5 h-5" /> // 🧪 Testing icon
|
||
},
|
||
{
|
||
phase: "Deployment",
|
||
duration: "Phased release",
|
||
description: "App Store & Play Store releases with feature toggles for controlled rollout.",
|
||
icon: <CloudCog className="w-5 h-5" /> // ☁️ Deployment icon
|
||
},
|
||
{
|
||
phase: "Testing & QA",
|
||
duration: "1 week",
|
||
description: "Comprehensive testing, bug fixes, and performance optimization",
|
||
icon: <CheckCircle className="w-5 h-5" />
|
||
}
|
||
],
|
||
resultsMetrics: [
|
||
{ label: "Load Time", value: "<1.5s", description: "95% of screens load quickly" },
|
||
{ label: "Crash-free Sessions", value: "99.9%", description: "Industry-leading stability" },
|
||
{ label: "Feature Adoption", value: "70%", description: "Users adopt recurring lists" },
|
||
{ label: "User Satisfaction", value: "4.8/5", description: "Average app store rating" },
|
||
{ label: "Daily Active Users", value: "85%", description: "Strong user engagement" },
|
||
{ label: "Learning Progress Accuracy", value: "92%", description: "Smart tracking precision" }
|
||
],
|
||
technicalAchievements: [
|
||
"Migrated from hybrid to native with zero data loss",
|
||
"Implemented CDN-based media delivery for faster load times",
|
||
"Added modular codebase for easier maintenance and feature rollout",
|
||
],
|
||
futureRoadmap: [
|
||
{
|
||
phase: "Next 6 Months",
|
||
features: [
|
||
"Dark mode support",
|
||
"Advanced search & filters for events",
|
||
"In-app community chat"
|
||
]
|
||
},
|
||
{
|
||
phase: "Next 12 Months",
|
||
features: [
|
||
"AI-powered event recommendations",
|
||
"Multi-language support",
|
||
"Gamification with rewards system"
|
||
]
|
||
}
|
||
]
|
||
};
|
||
|
||
|
||
export const WokaProject = () => {
|
||
const navigate = useNavigate();
|
||
return (
|
||
<div className="dark min-h-screen bg-background">
|
||
|
||
{/* Section 1: Hero with Heading, Subheading, and Image */}
|
||
<PortfolioHero
|
||
title={projectData.hero.title}
|
||
subtitle={projectData.hero.subtitle}
|
||
subtitleTwo={projectData.hero.subtitleTwo}
|
||
imageUrl={projectData.hero.imageUrl}
|
||
imageAlt={projectData.hero.imageAlt}
|
||
/>
|
||
|
||
{/* Section 2: Project Details */}
|
||
<PortfolioProjectDetails
|
||
details={projectData.details}
|
||
achievements={projectData.achievements}
|
||
/>
|
||
|
||
{/* Executive Summary */}
|
||
<PortfolioExecutiveSummary
|
||
content={projectData.executiveSummary.content}
|
||
/>
|
||
|
||
{/* Project Overview */}
|
||
<section className="py-24 bg-background">
|
||
<div className="container mx-auto px-4 lg:px-6">
|
||
<div className="max-w-6xl mx-auto text-center mb-16">
|
||
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-8">
|
||
Project Overview
|
||
</h2>
|
||
<p className="text-xl text-muted-foreground leading-relaxed">
|
||
Woka, an education-focused platform, faced stability issues, outdated components, and limitations in scaling. WDI was engaged to rebuild the app natively for iOS and Android, enhance backend systems, and implement a sustainable maintenance framework.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid lg:grid-cols-3 gap-12">
|
||
<PortfolioProjectOverview
|
||
icon={<Globe className="w-8 h-8 text-accent" />}
|
||
title="Background & Context"
|
||
description="Access to engaging educational content for children is often limited or inconsistent. Woka was created to provide a safe, interactive, and mobile-first learning platform, combining animated shows, educational games, and structured lessons to enhance learning outcomes and parent engagement."
|
||
borderColor="border-accent/20"
|
||
hoverColor="accent"
|
||
/>
|
||
|
||
<PortfolioProjectOverview
|
||
icon={<Users className="w-8 h-8 text-blue-400" />}
|
||
title="Target Audience"
|
||
description="Learners, parents, and educators seeking accessible educational content and resources. Users actively engage with interactive lessons, school activities, and collaborative learning communities. A mobile-first audience that values seamless performance, personalized learning, and real-time progress tracking."
|
||
borderColor="border-blue-400/20"
|
||
hoverColor="blue-400"
|
||
/>
|
||
|
||
<PortfolioProjectOverview
|
||
icon={<Target className="w-8 h-8 text-green-400" />}
|
||
title="Business Objectives"
|
||
points={projectData.businessObjectives}
|
||
borderColor="border-green-400/20"
|
||
hoverColor="green-400"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Core Features */}
|
||
<PortfolioCoreFeatures
|
||
title="Core Features & Functionality"
|
||
subtitle="A comprehensive suite of tools designed to revolutionize household grocery management with smart automation and collaboration."
|
||
features={projectData.coreFeatures}
|
||
/>
|
||
|
||
{/* Challenges & Solution Architecture */}
|
||
<PortfolioChallengeSolution
|
||
challenges={[
|
||
{
|
||
icon: <Cpu className="w-6 h-6 text-accent" />,
|
||
title: "Technical Challenges",
|
||
description: "Migrating from hybrid codebase to fully native apps without disrupting user base, retaining existing user data and preferences, and optimizing image-heavy event feed for mobile performance."
|
||
},
|
||
{
|
||
icon: <Split className="w-6 h-6 text-accent" />,
|
||
title: "Project Management Challenges",
|
||
description: "Coordinating phased rollout to avoid downtime and maintaining feature parity across platforms."
|
||
}
|
||
]}
|
||
|
||
technologyStack={[
|
||
{ icon: <Smartphone className="w-5 h-5 text-accent" />, label: "Frontend: Native Swift (iOS), Kotlin (Android)" },
|
||
{ icon: <Server className="w-5 h-5 text-accent" />, label: "Backend: Node.js, Express" },
|
||
{ icon: <Database className="w-5 h-5 text-accent" />, label: "Database: MongoDB" },
|
||
{ icon: <Cloud className="w-5 h-5 text-accent" />, label: "Hosting: AWS EC2 + S3" },
|
||
{ icon: <Activity className="w-5 h-5 text-accent" />, label: "Monitoring: Firebase, AWS CloudWatch" }
|
||
]}
|
||
|
||
highlights={[
|
||
{ text: "Performance Boost: Reduced API latency, improved app loading speed by 47%, crash-free sessions up to 99.8%." },
|
||
{ text: "Modern UI Experience: Introduced updated design components, typography, and improved navigation flow." },
|
||
{ text: "Real-Time Updates: Instant event & feed updates using socket connections." },
|
||
{ text: "Monitoring & Analytics: Integrated Firebase for crash reporting, user behavior tracking, and retention analysis." }
|
||
]}
|
||
|
||
|
||
/>
|
||
|
||
{/* Development Process */}
|
||
<PortfolioDevelopmentProcess
|
||
title="Development Process & Methodology"
|
||
subtitle="Woka follows an Agile development methodology with phased module redevelopment, 2-week sprints, and iterative testing, ensuring smooth migration, feature parity, and high-quality user experience."
|
||
phases={projectData.developmentPhases}
|
||
/>
|
||
|
||
{/* Results & Impact */}
|
||
<PortfolioResultsImpact
|
||
title="Results & Impact"
|
||
subtitle="Woka demonstrates significant improvements in performance, user engagement, and learning outcomes. Key indicators include faster app load times, high crash-free sessions, strong feature adoption, and increased user satisfaction." metrics={projectData.resultsMetrics}
|
||
achievements={projectData.technicalAchievements}
|
||
/>
|
||
|
||
{/* Lessons Learned */}
|
||
<PortfolioLessonsSection
|
||
title="Lessons Learned"
|
||
description="Key insights and learnings from the Woka development journey."
|
||
workedTitle="What Worked Well"
|
||
workedIcon={<CheckCircle className="w-6 h-6" />}
|
||
workedColor="#22c55e" // Tailwind green-500
|
||
workedLessons={[
|
||
"Phased rollout reduced risk and allowed faster feedback cycles",
|
||
"Incremental feature release helped identify issues early",
|
||
"Continuous collaboration between teams accelerated development speed",
|
||
]}
|
||
improveTitle="Areas for Improvement"
|
||
improveIcon={<ArrowRight className="w-6 h-6" />}
|
||
improveColor="#eab308" // Tailwind yellow-500
|
||
improveLessons={[
|
||
"Earlier user beta testing to fine-tune event feed experience",
|
||
"More structured feedback channels for faster iteration",
|
||
"Enhanced onboarding tutorials to reduce user confusion",
|
||
]}
|
||
/>
|
||
|
||
{/* Future Roadmap */}
|
||
<PortfolioRoadmapSection
|
||
title="Future Roadmap"
|
||
description="Planned enhancements and features to further revolutionize grocery management apps."
|
||
roadmapItems={projectData.futureRoadmap}
|
||
icon={<ArrowRight className="w-5 h-5" />}
|
||
/>
|
||
|
||
{/* Client Testimonial */}
|
||
<PortfolioTestimonial
|
||
logo={wokaLogo}
|
||
alt="RanOutOf Logo"
|
||
rating={5}
|
||
testimonial="“The WDI team transformed our app from slow and outdated to fast, reliable, and modern. Our users love the new experience, and the performance gains have been tremendous.”"
|
||
clientName="Akarsh K Hebbar"
|
||
clientRole="CEO, Woka"
|
||
/>
|
||
|
||
{/* CTA Section */}
|
||
<section className="py-24 bg-background">
|
||
<div className="container mx-auto px-4 lg:px-6">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="max-w-4xl mx-auto text-center"
|
||
>
|
||
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-8">
|
||
Ready to Transform Children's Learning Experience?
|
||
</h2>
|
||
<p className="text-xl text-muted-foreground mb-12 max-w-3xl mx-auto">
|
||
Let's create an educational platform that makes learning fun and engaging. From concept to launch, we'll help you build a platform that inspires children to learn and grow.
|
||
</p>
|
||
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<Button
|
||
size="lg"
|
||
onClick={() => navigate('/contact-us')}
|
||
className="bg-accent hover:bg-accent/90 text-accent-foreground"
|
||
>
|
||
Start Your Project
|
||
<ArrowRight className="w-5 h-5 ml-2" />
|
||
</Button>
|
||
<Button
|
||
size="lg"
|
||
variant="outline"
|
||
onClick={() => navigate('/case-studies')}
|
||
className="border-accent/30 text-accent hover:bg-accent/10"
|
||
>
|
||
View More Case Studies
|
||
<ExternalLink className="w-5 h-5 ml-2" />
|
||
</Button>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
);
|
||
}; |