jex
README.md

BubbleSpace - Modern Social Media Platform

A next-generation social media platform featuring a Bento grid layout, 3D illustrations, real-time messaging, and interactive elements.

Features

  • Bento Grid Layout: Clean, modular content organization
  • Custom 3D Illustrations: Unique visual identity with animated elements
  • Real-Time Messaging: Interactive cursors and dynamic chat experience
  • User Profiles: Customizable profiles with creative illustrations
  • Infinite Scroll: Seamless content browsing with lazy loading
  • Micro-interactions: Responsive hover effects and animations
  • Fully Responsive: Optimized for desktop and mobile
  • Accessibility: Full keyboard navigation and screen reader support

Project Structure

├── backend/
│   ├── database/
│   │   ├── migrations.ts    # Database schema
│   │   └── queries.ts       # Database operations
│   ├── routes/
│   │   ├── auth.ts         # Authentication routes
│   │   ├── posts.ts        # Post management
│   │   ├── users.ts        # User management
│   │   └── messages.ts     # Real-time messaging
│   └── index.ts            # Main server entry point
├── frontend/
│   ├── components/
│   │   ├── App.tsx         # Main application
│   │   ├── BentoGrid.tsx   # Grid layout component
│   │   ├── UserProfile.tsx # Profile management
│   │   ├── Chat.tsx        # Messaging interface
│   │   └── Post.tsx        # Post components
│   ├── index.html          # Main HTML template
│   ├── index.tsx           # Frontend entry point
│   └── style.css           # Custom styles
└── shared/
    ├── types.ts            # Shared TypeScript types
    └── utils.ts            # Shared utilities

Tech Stack

  • Backend: Hono.js with SQLite database
  • Frontend: React 18.2.0 with TypeScript
  • Styling: TailwindCSS with custom animations
  • Real-time: WebSocket connections for messaging
  • Storage: Val Town Blob storage for media

Getting Started

The platform is automatically deployed on Val Town. Access the main application through the HTTP endpoint.

API Endpoints

  • GET / - Main application
  • POST /api/auth/login - User authentication
  • GET /api/posts - Fetch posts with pagination
  • POST /api/posts - Create new post
  • GET /api/users/:id - Get user profile
  • PUT /api/users/:id - Update user profile
  • WebSocket /api/messages - Real-time messaging