Skip to content

Latest commit

 

History

History
211 lines (157 loc) · 8.98 KB

File metadata and controls

211 lines (157 loc) · 8.98 KB

Blockchain RIO 2025 - Interactive Event Timeline

I built this real-time event management system for Blockchain Rio 2025 to solve the chaos of managing a multi-stage blockchain conference. After seeing how attendees struggled to track events across different stages and how organizers had no way to communicate real-time changes, I created this comprehensive solution.

🎯 Why I Built This

Managing a blockchain conference with 8+ stages and 40+ events is a nightmare. Attendees miss important talks, organizers can't communicate delays, and everyone's confused about what's happening where. I wanted to create something that would make Blockchain Rio the most organized crypto event in Brazil.

🚀 What I Built

For Attendees

  • Real-time Timeline: See all events across 14 stages in one glance
  • Live Status Updates: Know exactly what's happening now, what's coming soon, and what's delayed
  • Personal Curation: Click events you're not interested in to dim them and focus on what matters
  • Event Details: Get speaker info, descriptions, and timing with one click
  • Mobile-First Design: Works perfectly on phones since everyone's checking schedules on mobile

For Organizers 🔐

  • Production Dashboard: Hidden organizer panel accessible only with login
  • Real-time Event Management: Change times, delay events, or cancel them instantly
  • Smart Cascade Delays: When you delay one event, all following back-to-back events automatically adjust
  • Stage-by-Stage Organization: Manage events grouped by stage with clear statistics
  • Speaker Management: Add or update speakers on the fly

🔧 Technical Features I Implemented

Frontend Magic

  • React 18 with modern hooks for lightning-fast updates
  • Styled Components for that cyberpunk blockchain aesthetic
  • Real-time Clock that syncs with actual conference time
  • Responsive Grid System that works on any device
  • Smooth Animations using CSS transitions

Smart State Management

  • Event Status Tracking: Live, upcoming, delayed, cancelled, ended
  • User Preferences: Remember which events users have deselected
  • Organizer Authentication: Secure login system for production access
  • Data Persistence: Changes reflect immediately across all user screens

Blockchain Rio Specific Features

  • 8 Conference Stages: Blockchain Insights, Crypto Summit, Legalhack, BRidge, Regulation ROCKS, RWA Summit, Sebrae, LFDT, Digital Finance, CRIA
  • Portuguese UI: Everything in Portuguese for Brazilian audience
  • Conference Timing: Optimized for 9:00-19:00 event schedule
  • Stage Color Coding: Each stage has unique visual identity

🎨 Design Philosophy

I wanted this to feel like a high-tech mission control for blockchain events. The dark theme with neon accents gives it that cyberpunk vibe that blockchain people love, while keeping it professional enough for business attendees.

Key Design Decisions:

  • Dark Theme: Reduces eye strain during long conference days
  • Neon Green Accents: Matches blockchain/crypto aesthetic
  • Clear Typography: Easy to read event names and times quickly
  • Color-Coded Status: Instant visual feedback on event status

🔐 Organizer Dashboard Features

Login Credentials: organizer / blockchain2025

Once logged in, organizers get access to:

Event Management

  • Quick Actions: +15min delay buttons for common delays
  • Full Edit Mode: Change times, titles, speakers, and status
  • Bulk Operations: Handle multiple events efficiently
  • Stage Organization: Events grouped by stage for easy management

Smart Features

  • Cascade Delays: Delay one event, and all consecutive events automatically adjust
  • Real-time Updates: Changes appear instantly on all attendee screens
  • Status Tracking: See which events are live, delayed, or cancelled
  • Speaker Management: Add or update speaker lists on the fly

🚀 How This Helps Blockchain Rio

Before This System

  • ❌ Attendees checking printed schedules that become outdated
  • ❌ Organizers making announcements that only nearby people hear
  • ❌ Confusion about which events are happening where
  • ❌ No way to communicate real-time changes
  • ❌ People missing important talks due to poor information flow

With This System

  • Real-time Information: Everyone always has the latest schedule
  • Better Attendance: People don't miss talks due to confusion
  • Professional Image: Blockchain Rio looks incredibly organized
  • Stress-free Management: Organizers can handle changes seamlessly
  • Enhanced Experience: Attendees can focus on content, not logistics

💻 Tech Stack

Frontend:

  • React 18 with Hooks
  • Styled Components for styling
  • Lucide React for icons
  • CSS Grid & Flexbox for layouts

Features:

  • Real-time state management
  • Responsive design
  • Progressive Web App capabilities
  • Local storage for user preferences

🔧 Installation & Setup

# Clone the repository
git clone https://github.com/your-username/blockchain-rio-timeline
cd blockchain-rio-timeline

# Install dependencies
npm install

# Start development server
npm start

# Open http://localhost:3000

🎯 Usage

For Attendees

  1. Browse Events: See all stages and events in the timeline
  2. Check Live Status: Green = live, yellow = coming soon, red = cancelled
  3. Get Details: Click the info button on any event
  4. Personalize: Click events to dim ones you're not interested in
  5. Stay Updated: Status changes appear automatically

For Organizers

  1. Access Dashboard: Click "Produção?" button in top-right
  2. Login: Use organizer credentials
  3. Manage by Stage: Expand stages to see their events
  4. Quick Actions: Use +15min buttons for common delays
  5. Full Edit: Click "Editar" to modify event details
  6. Real-time Impact: All changes appear instantly for attendees

🎨 Customization

Adding New Events

Update src/utils/eventData.js:

{
  id: 44,
  channelId: 1, // Stage number (1-10)
  title: "DeFi in Brazil: The Future",
  type: "conference",
  startTime: "14:00",
  endTime: "15:00",
  startDate: 0, // Day (0 = Aug 6, 1 = Aug 7)
  endDate: 0,
  stage: "Blockchain Insights",
  speakers: ["João Silva", "Maria Santos"]
}

Modifying Stages

Update stage colors and names in src/components/ChannelList.js and src/components/OrganizerDashboard.js.

🌟 Impact for Blockchain Rio

This system transforms Blockchain Rio from a typical chaotic conference into a seamlessly organized, professional event that showcases the efficiency and innovation of the blockchain community. It's not just a schedule - it's a statement about how technology can improve real-world experiences.

The result: Attendees have a better experience, organizers stay in control, and Blockchain Rio sets the standard for how crypto conferences should be run.

🔮 Future Updates & Full Implementation

To make this system production-ready for Blockchain Rio 2025, I would need:

Event Data Integration

  • Complete Event List: Access to the full, official Blockchain Rio schedule with all 14 stages
  • Speaker Database: Complete speaker profiles, bios, and social links
  • Event Descriptions: Detailed descriptions for each talk, workshop, and panel
  • Real-time Data Feed: API access to sync with official event management systems

Organizational Structure

  • Stage Coordinators: At least 1 organizer assigned to each of the 14 stages
  • Production Team: Dedicated team with organizer access credentials
  • Communication Protocol: Clear workflow for how changes get communicated and implemented
  • Backup System: Redundancy in case of technical issues during the event

Ideal Implementation Workflow

  1. Pre-Event: Load complete schedule with all speakers and descriptions
  2. During Event: Stage coordinators monitor their assigned stages
  3. Real-time Updates: Coordinators use the dashboard to manage delays/changes
  4. Instant Communication: All changes appear immediately on attendee screens
  5. Post-Event: System generates analytics on attendance patterns and popular events

This would transform Blockchain Rio into the most technologically advanced blockchain conference in Latin America, setting a new standard for crypto events worldwide.

🤝 Contributing

Found a bug or have an improvement idea? I'm always looking to make this better for the blockchain community:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

📞 Contact

jvitorbarros15@gmail.com

Built with ❤️ for the Brazilian blockchain community.

For Blockchain Rio organizers: Need help implementing this or want custom modifications? Reach out!


This project was created to solve real problems at Blockchain Rio 2025 and demonstrate how good UX can make blockchain events more accessible to everyone.