{"id":46549408,"url":"https://github.com/imljs/web","last_synced_at":"2026-03-07T03:03:05.150Z","repository":{"id":310147796,"uuid":"994508678","full_name":"ImLJS/web","owner":"ImLJS","description":"My personal website built with TypeScript, Next.js, and TailwindCSS","archived":false,"fork":false,"pushed_at":"2025-12-04T01:41:23.000Z","size":6541,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-07T07:15:06.324Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://imljs.me","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ImLJS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-06-02T03:43:54.000Z","updated_at":"2025-12-04T01:41:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"03172b33-546d-4ca2-a6b7-d71910d3d6e2","html_url":"https://github.com/ImLJS/web","commit_stats":null,"previous_names":["imljs/web"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ImLJS/web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ImLJS%2Fweb","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ImLJS%2Fweb/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ImLJS%2Fweb/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ImLJS%2Fweb/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ImLJS","download_url":"https://codeload.github.com/ImLJS/web/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ImLJS%2Fweb/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30206339,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T19:07:06.838Z","status":"online","status_checked_at":"2026-03-07T02:00:06.765Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-03-07T03:02:56.598Z","updated_at":"2026-03-07T03:03:05.125Z","avatar_url":"https://github.com/ImLJS.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ImLJS Personal Website\n\nA modern, full-stack personal portfolio website built with the T3 Stack and enhanced with comprehensive gallery management. This site serves as both a showcase of my work and a playground for experimenting with cutting-edge web technologies.\n\n## 🚀 Features\n\n- **Modern Design System** - Custom UI components with dark/light theme support\n- **Gallery Management** - Full-featured image gallery with upload, preview, and admin controls\n- **Authentication System** - Secure auth with role-based access control\n- **File Storage** - Appwrite integration for scalable image storage\n- **Database Management** - Type-safe database operations with Drizzle ORM\n- **Admin Dashboard** - Protected admin routes for content management\n- **Responsive Layout** - Mobile-first design with desktop optimizations\n- **Smooth Animations** - Framer Motion powered interactions and transitions\n- **Optimized Performance** - Next.js 15 with App Router and Turbo for lightning-fast loading\n- **Type Safety** - End-to-end TypeScript for robust development\n- **Accessible** - Built with accessibility best practices in mind\n\n## 🛠️ Tech Stack\n\n### Frontend\n- **Framework:** [Next.js 15](https://nextjs.org) with App Router \u0026 Turbo\n- **Styling:** [Tailwind CSS v4](https://tailwindcss.com) + Custom Design System\n- **UI Components:** [shadcn/ui](https://ui.shadcn.com) + [Radix UI](https://radix-ui.com) primitives\n- **Animations:** [Motion](https://motion.dev) (Framer Motion successor)\n- **State Management:** [TanStack Query](https://tanstack.com/query) + [Jotai](https://jotai.org)\n- **Forms:** [TanStack Form](https://tanstack.com/form)\n- **Tables:** [TanStack Table](https://tanstack.com/table) for data grids\n- **Typography:** [Geist Sans \u0026 Mono](https://vercel.com/font)\n- **Icons:** [Lucide React](https://lucide.dev) + [Developer Icons](https://developer-icons.dev)\n\n### Backend\n- **API:** [tRPC](https://trpc.io) for type-safe APIs\n- **Database:** [PostgreSQL](https://postgresql.org) with [Drizzle ORM](https://orm.drizzle.team)\n- **Authentication:** [Better Auth](https://better-auth.com) with GitHub OAuth\n- **File Storage:** [Appwrite](https://appwrite.io) for image management\n- **Validation:** [Zod](https://zod.dev) for runtime type validation\n\n### Tools \u0026 Infrastructure\n- **Package Manager:** [Bun](https://bun.sh)\n- **Linting:** [Biome](https://biomejs.dev) for fast linting and formatting\n- **Type Checking:** [TypeScript](https://typescriptlang.org)\n- **Database Tools:** [Drizzle Kit](https://orm.drizzle.team/kit-docs/overview) for migrations\n- **Deployment:** [Vercel](https://vercel.com) with Speed Insights\n\n## 🏗️ Project Structure\n\n```\nsrc/\n├── app/                    # App Router pages and API routes\n│   ├── (admin)/           # Protected admin routes\n│   ├── (auth)/            # Authentication pages\n│   ├── (root)/            # Public pages\n│   └── api/               # API endpoints\n├── components/\n│   ├── features/          # Feature-specific components\n│   │   ├── auth/          # Authentication components\n│   │   ├── gallery/       # Gallery management\n│   │   └── navigation/    # Navigation components\n│   ├── forms/             # Form components and utilities\n│   ├── layout/            # Layout components\n│   ├── pages/             # Page-specific components\n│   ├── shared/            # Shared/common components\n│   └── ui/                # Reusable UI primitives\n├── data/                  # Static data and content\n├── hooks/                 # Custom React hooks\n├── lib/                   # Utilities and configurations\n├── server/                # Server-side code\n│   ├── api/               # tRPC routers\n│   ├── auth/              # Authentication config\n│   └── db/                # Database schemas and utilities\n├── styles/                # Global styles and CSS\n├── trpc/                  # tRPC client configuration\n├── types/                 # TypeScript type definitions\n└── utils/                 # Utility functions\n```\n\n## 🎨 Design Philosophy\n\nThis website is intentionally over-engineered to serve as:\n- A testing ground for new technologies and patterns\n- A showcase of modern web development practices\n- A demonstration of attention to detail and craft\n- A full-stack application with real-world features\n\n## 🚀 Getting Started\n\n### Prerequisites\n- Node.js 18+ or [Bun](https://bun.sh) (recommended)\n- PostgreSQL database\n- Appwrite account for file storage\n- GitHub OAuth app for authentication\n\n### Environment Setup\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/imljs/web.git\n   cd web\n   ```\n\n2. **Install dependencies**\n   ```bash\n   bun install\n   ```\n\n3. **Set up environment variables**\n   ```bash\n   cp .env.example .env.local\n   ```\n\n4. **Set up the database**\n   ```bash\n   bun run db:push\n   ```\n\n5. **Start the development server**\n   ```bash\n   bun dev\n   ```\n\n6. **Open your browser**\n   Navigate to [http://localhost:3000](http://localhost:3000)\n\n## 📦 Available Scripts\n\n- `bun dev` - Start development server with Turbo\n- `bun build` - Build for production  \n- `bun start` - Start production server\n- `bun run preview` - Build and preview production locally\n- `bun run check` - Run Biome linter and formatter\n- `bun run check:write` - Fix linting issues automatically\n- `bun run check:unsafe` - Fix with unsafe transformations\n- `bun run typecheck` - Run TypeScript compiler\n- `bun run db:generate` - Generate database migrations\n- `bun run db:migrate` - Run database migrations\n- `bun run db:push` - Push database schema changes\n- `bun run db:studio` - Open Drizzle Studio\n\n## 🎯 Key Features\n\n### Gallery Management\n- **File Upload** - Multi-file upload with drag-and-drop support via React Dropzone\n- **Image Processing** - Automatic dimension detection and optimization\n- **Admin Controls** - Protected routes for gallery management\n- **Data Tables** - Advanced sortable and filterable tables with TanStack Table\n- **File Downloads** - Direct download functionality with Appwrite integration\n- **Lazy Loading** - Optimized image loading with intersection observer\n\n### Authentication System\n- **Role-based Access** - Admin and user role separation\n- **Protected Routes** - Server-side route protection\n- **Session Management** - Persistent login sessions\n\n### Database Features\n- **Type-safe Queries** - End-to-end type safety with tRPC and Drizzle ORM\n- **Schema Management** - Version-controlled database schemas with Drizzle Kit\n- **Data Validation** - Runtime validation with Zod schemas\n- **Database Studio** - Visual database management with Drizzle Studio\n\n## 🔧 Customization\n\nThe design system is built with CSS custom properties and Tailwind CSS:\n\n- **Colors:** Update the theme in `src/styles/theme.css`\n- **Typography:** Modify font configurations in layout components\n- **Components:** Extend the shadcn/ui component library\n- **Animations:** Adjust Framer Motion configurations\n- **Database:** Modify schemas in `src/server/db/schema/`\n\n## 📱 Browser Support\n\n- Chrome/Chromium (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n\n## 🚀 Deployment\n\nThis project is optimized for deployment on Vercel:\n\n1. **Prepare for deployment**\n   ```bash\n   bun run build\n   ```\n\n2. **Deploy to Vercel**\n   - Push your code to GitHub\n   - Connect your repository to Vercel\n   - Configure environment variables in Vercel dashboard\n   - Deploy automatically on every push to main\n\n3. **Environment Variables on Vercel**\n   Add all the environment variables from your `.env.local` to your Vercel project settings.\n\nFor other platforms, follow the [Next.js deployment documentation](https://nextjs.org/docs/deployment).\n\n## 🙏 Acknowledgments\n\n- [T3 Stack](https://create.t3.gg/) for the excellent full-stack template\n- [shadcn/ui](https://ui.shadcn.com/) for the beautiful component library\n- [Vercel](https://vercel.com/) for seamless deployment\n- The open-source community for incredible tools and libraries\n\n---\n\n*Built with ❤️, too much caffeine, and probably over-engineered for fun.*","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimljs%2Fweb","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimljs%2Fweb","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimljs%2Fweb/lists"}