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 integration Documentation 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 bookmarks Web 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