io
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data โ all from the browser, and deployed in milliseconds.
A next-generation social media platform featuring a Bento grid layout, 3D illustrations, real-time messaging, and interactive elements.
- 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
โโโ 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
- 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
The platform is automatically deployed on Val Town. Access the main application through the HTTP endpoint.
GET /
- Main applicationPOST /api/auth/login
- User authenticationGET /api/posts
- Fetch posts with paginationPOST /api/posts
- Create new postGET /api/users/:id
- Get user profilePUT /api/users/:id
- Update user profileWebSocket /api/messages
- Real-time messaging