Web Development with SvelteKit
Practical tutorials and code guides for building web applications with SvelteKit — covering authentication, pagination, SEO, Supabase, UI components, stores, forms, and more
sveltekitwebdevtutorialsupabaseauthenticationseotypescript
The SvelteKit web development tutorials document Amrit’s journey of building the Fractal Maṇḍala website from scratch. They serve as practical guides for developers working with SvelteKit and its ecosystem.
Authentication
Multiple guides cover authentication approaches:
- Auth in SvelteKit through GitHub - setting up Auth.js with GitHub OAuth
- Auth in SvelteKit 2 - updated patterns for SvelteKit 2
- Supabase Auth - integrating Supabase authentication
- DeepSeek Auth Dump - working with OpenAI-compatible auth flows
- AutoFill in SvelteKit - form autofill patterns
UI Components and Patterns
- Modals in SvelteKit - implementing modal dialogs with proper accessibility
- Hovers in SvelteKit - hover states and dropdown menus
- Toggles in SvelteKit - toggle switches and state management
- TipTap Editor - integrating the TipTap rich text editor
Data and State Management
- Global Stores in SvelteKit - managing theme, breakpoints, and global state
- ChatGPT in SvelteKit - integrating LLM APIs
- GPT Bots Built - building GPT-powered bots
- Paginated Post Pages - implementing pagination for blog posts
SEO and Metadata
- SEO Metadata in SvelteKit - setting up global store-driven SEO metadata
- Supabase Integration - connecting SvelteKit to Supabase backend
- Payments API - integrating Razorpay payment processing
Development Resources
- Web Dev Bookmarks - curated collection of web development resources
- Web Interface Guidelines - UI/UX guidelines for web applications
- Documentation - notes on technical documentation practices
- Stack and Design - technical stack decisions and design rationale
See Also
- Personal Essays, Poetry and Commentary - the broader context of the digital garden
- AI, Technology and Digital Culture - AI integration with web development
Articles in this Group
Auth in Sveltekit through Github Using auth.js to set up a Github auth flow inside Sveltekit.Auth Concept in Sveltekit Concept and notes for auth build in Sveltekit with Supabase.Autofill in Sveltekit Simple method for having auto-fill inputs fields, which is useful for search forms.ChatGPT in Sveltekit A detailed guide on integrating ChatGPT with a SvelteKit project, including steps for setting up OpenAI API, handling API requests, and storing chat history using Supabase for database integration.Deepseek Auth Dump Code dump of deepseek chat on auth in sveltekit with payment integrationDocumentation Exploring the importance of documentation in web development, with a focus on managing website features using Sveltekit's stores feature.Using Global Stores in Sveltekit An overview of using Sveltekit's stores for managing global states like theme and breakpoints in web development, ensuring consistency across different pages and components.GPT Bots I Have Built An overview of specialized AI bots I've designed for tasks like Sanskrit transliteration, philosophical teachings, coding assistance, Hindu ontology, and social media performance analysis.Simple Hovers in Sveltekit A guide to implementing toggle and hover functions in Sveltekit, illustrating basic interactivity and animation techniques for enhancing user experience in web design.Creating Modals in Sveltekit A step-by-step guide on creating and implementing a modal in Sveltekit, covering the creation of a store, the modal component, and its integration into web pages.A Hack for Pagination in Post Pages for Sveltekit Exploring a custom solution for adding 'previous post' and 'next post' navigation in a SvelteKit website, utilizing markdown files and API integration for sorting and linking posts.payments api razorpay SEO Metadata in Sveltekit Guide to setting up SEO metadata in SvelteKit, detailing global store creation, SEO component, and page-specific implementation.Tech Stack and Design a compilation of this site's tech stack and design elements.Supabase Auth and Sveltekit A comprehensive guide on integrating Supabase user authentication with SvelteKit, including setup, configuration, and the creation of essential auth components.Integrating Sveltekit and Supabase An informative guide on securely integrating Supabase with SvelteKit, focusing on best practices for handling secret keys and ensuring data security in web applications.Tiptap WYSIWYG Editor This is an example of how to integrate Tiptap WYSIWYG editor in Sveltekit.Toggles in Sveltekit A step-by-step guide to implementing category toggling in SvelteKit, showcasing the use of arrays and functions for selective display in web applications.Repository of Webdev Bookmarks a repository of webdev bookmarksWeb Interface Guidelines Comprehensive guidelines for crafting effective web interfaces, emphasizing interactivity, typography, motion, touch optimization, accessibility, and design principles - sheer paste of content from interfaces.rauno.me
