Public
Like
NoteByPGC
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.
Viewing readonly version of main branch: v50View latest version
A beautiful note-sharing website with 3D graphics and smooth UI animations. Users must sign in with Google to create notes, but anyone can view shared notes with the proper links.
- π Google Authentication: Secure sign-in with Google OAuth
- π Note Creation: Authenticated users can create beautiful notes
- π Public Viewing: Anyone can view notes if they have the link
- π Password Protection: Optional password protection for private notes
- π Dashboard: Personal dashboard to manage your notes
- π¨ 3D Graphics: Smooth 3D animations and visual effects
- π± Responsive Design: Works on all devices
- β¨ Smooth UI: Beautiful animations and transitions
- π Unique Links: Each note gets its own shareable URL
- Sign In: Users sign in with their Google account to create notes
- Create Notes: Authenticated users can create notes with optional password protection
- Share Notes: Each note gets a unique URL that can be shared with anyone
- View Notes: Anyone with the link can view public notes
- Dashboard: Users can manage all their created notes from a personal dashboard
- Sign in with Google
- Access personal dashboard
- Create new notes (public or password-protected)
- View and manage all created notes
- Copy shareable links for any note
- Can view shared notes if they have the direct link
- Can enter passwords for protected notes
- Cannot create new notes (must sign in first)
βββ backend/
β βββ index.ts # Main Hono server
β βββ database/
β β βββ migrations.ts # Database schema
β β βββ queries.ts # Database operations
β βββ routes/
β βββ auth.ts # Google OAuth authentication
β βββ notes.ts # Note API endpoints
βββ frontend/
β βββ index.html # Main HTML template
β βββ index.tsx # React app entry point
β βββ components/
β β βββ App.tsx # Main app component
β β βββ Scene3D.tsx # 3D graphics component
β βββ style.css # Custom styles
βββ shared/
βββ types.ts # Shared TypeScript types
POST /api/auth/google- Google OAuth sign-inPOST /api/auth/verify- Verify authentication token
POST /api/notes- Create a new note (authenticated users only)GET /api/notes/my-notes- Get user's notes (authenticated users only)GET /api/notes/:id- Get a note (public access)POST /api/notes/:id/verify- Verify password for protected note (public access)
- Backend: Hono + SQLite
- Frontend: React + Three.js for 3D graphics
- Authentication: Google OAuth 2.0
- Styling: TailwindCSS + custom CSS
- Database: SQLite for note and user storage
To use Google authentication, you'll need to:
- Create a Google Cloud Project
- Enable the Google Sign-In API
- Get your Google Client ID
- Replace
YOUR_GOOGLE_CLIENT_IDin the frontend code
- OAuth Authentication: Secure Google sign-in
- Token-based Sessions: JWT-like tokens for session management
- Password Hashing: SHA-256 hashing for note passwords
- Access Control: Only authenticated users can create notes
- Unique URLs: Cryptographically secure note IDs