import dynamic from 'next/dynamic'
import {
ArrowLeftRight,
Check,
ClipboardCheck,
FolderLock,
Globe2,
HeartPulse,
InfoIcon,
Lightbulb,
List,
Lock,
ShieldAlert,
ShieldCheck,
Sparkles,
Timer,
Users,
UserX,
} from 'lucide-react'
import { CubeIcon } from '@heroicons/react/outline'
import { Image } from 'ui'
import MainProducts from '../MainProducts'
import { TwoColumnsSectionProps } from '~/components/Solutions/TwoColumnsSection'
import RealtimeLogs from 'components/Products/Functions/RealtimeLogs'
import { frameworks } from 'components/Hero/HeroFrameworks'
import type { DXSectionProps } from 'components/Solutions/DeveloperExperienceSection'
import type { ResultsSectionProps } from 'components/Solutions/ResultsSection'
import type { PlatformSectionProps } from 'components/Solutions/PlatformSection'
import {
FrameworkLink,
type FrameworkLinkProps,
type FeaturesSection,
type HeroSection,
type Metadata,
} from './solutions.utils'
import type { FeatureGridProps } from 'components/Solutions/FeatureGrid'
import type { SecuritySectionProps } from 'components/Enterprise/Security'
import type { MPCSectionProps } from 'components/Solutions/MPCSection'
import { PRODUCT_SHORTNAMES } from 'shared-data/products'
import { useBreakpoint } from 'common'
import { useSendTelemetryEvent } from 'lib/telemetry'
import { companyStats } from 'data/company-stats'
import { DerivLogo, SoshiLogo } from '~/components/BrandLogo'
const AuthVisual = dynamic(() => import('components/Products/AuthVisual'))
const FunctionsVisual = dynamic(() => import('components/Products/FunctionsVisual'))
const RealtimeVisual = dynamic(() => import('components/Products/RealtimeVisual'))
const data: () => {
metadata: Metadata
heroSection: HeroSection
quote: any
why: FeaturesSection
platform: PlatformSectionProps
developerExperience: DXSectionProps
platformStarterSection: TwoColumnsSectionProps
mcp: MPCSectionProps
ctaSection?: any
} = () => {
const sendTelemetryEvent = useSendTelemetryEvent()
const isXs = useBreakpoint(640)
const editors = getEditors(isXs)
return {
metadata: {
metaTitle: 'Supabase for Hackathons',
metaDescription: 'Build something amazing before lunch.',
},
heroSection: {
id: 'hero',
title: 'Supabase for Hackathons',
h1: (
<>
Build something amazing before lunch.
),
subheader: [
<>
In just a few hours, you can turn your idea into a working app. Supabase gives you
everything you need: a database, authentication, storage, serverless functions, real-time
updates, and more.
,
],
image: undefined,
ctas: [
{
label: 'Start your project',
href: 'https://supabase.com/dashboard',
type: 'primary' as any,
onClick: () =>
sendTelemetryEvent({
action: 'start_project_button_clicked',
properties: { buttonLocation: 'Solutions: Developers page hero' },
}),
},
],
},
quote: {
id: 'quote',
className: '[&_q]:md:max-w-2xl',
text: 'We used Supabase at the hackathon because it let us go from idea to MVP in under two days. Then it took only a couple of months to turn that janky MVP into a production-ready application.',
author: 'Elijah Muraoka',
role: 'CEO and Co-Founder, Soshi',
avatar: (
),
link: '/customers/soshi',
logo: ,
},
why: {
id: 'why-supabase',
label: '',
heading: (
<>
Win with Supabase
),
subheading:
'Supabase is the Postgres developer platform and Firebase alternative that developers everywhere love and trust. Build an instant backend for your application using everything you need to ship a winning app in seconds. Integrate with your favorite AI Builder tools and write code even faster.',
features: [
{
id: 'easy-to-use',
icon: Timer,
heading: 'Build in a weekend',
subheading:
'Supabase spins up everything you need instantly so you can get to the fun part: building a winning app. Enjoy a fully managed Postgres database with REST and GraphQL APIs out of the box. Connect using your favorite frontend or server-side framework.',
},
{
id: 'development-platform',
icon: CubeIcon,
heading: 'Everything you need to ship a winning app',
subheading:
'Support login from any social or OAuth provider. Build server-side logic using Edge Functions. Build immersive, collaborative experiences using Realtime. Use Amazon S3-compatible Storage to maintain files, images, and videos.',
},
{
id: 'scalable-and-dependable',
icon: Sparkles,
heading: 'Speed and AI-powered innovation',
subheading:
'Supabase is just Postgres, so it's easy to scale your Hackathon project into a real product. Connect to your favorite AI tools and use built-in Vectors to store embeddings in Postgres. Use Foreign Data Wrappers to connect to Google Sheets, MySQL, BigQuery, and more.',
},
],
},
platform: {
id: 'postgres-platform',
title: (
<>
Supabase helps you build
),
subheading: 'Supabase includes everything you need to create the winning app.',
features: [
{
id: 'database',
title: 'Database',
isDatabase: true,
icon: MainProducts[PRODUCT_SHORTNAMES.DATABASE].icon,
subheading: (
<>
A fully managed Postgres database. No forks: 100% pure Postgres.
),
className: 'lg:col-span-2 flex-col lg:flex-row px-4 lg:pr-0',
image: (
Issue: We have detected that you have enabled the email provider with an expiry
time of more than an hour. It is recommended to set this value to less th...
),
aiPrompts: [
{
id: 'auth-setup',
title: 'Bootstrap Next.js app with Supabase Auth',
description:
'## Overview of implementing Supabase Auth SSR\n1. Install @supabase/supabase-js and...',
code: `1. Install @supabase/supabase-js and @supabase/ssr packages.
2. Set up environment variables.
3. Write two utility functions with \u0060createClient\u0060 functions to create a browser client and a server client.
4. Hook up middleware to refresh auth tokens
`,
language: 'markdown',
docsUrl:
'https://supabase.com/docs/guides/getting-started/ai-prompts/nextjs-supabase-auth',
},
{
id: 'edge-functions',
title: 'Writing Supabase Edge Functions',
description:
"You're a Supabase Postgres expert in writing row level security policies. Your purpose is to generate...",
code: `1. Try to use Web APIs and Deno’s core APIs instead of external dependencies (eg: use fetch instead of Axios, use WebSockets API instead of node-ws)
2. If you are reusing utility methods between Edge Functions, add them to 'supabase/functions/_shared' and import using a relative path. Do NOT have cross dependencies between Edge Functions.
3. Do NOT use bare specifiers when importing dependecnies. If you need to use an external dependency, make sure it's prefixed with either 'npm:' or 'jsr:'. For example, '@supabase/supabase-js' should be written as 'npm:@supabase/supabase-js'.
4. For external imports, always define a version. For example, 'npm:@express' should be written as 'npm:express@4.18.2'.
5. For external dependencies, importing via 'npm:' and 'jsr:' is preferred. Minimize the use of imports from @'deno.land/x' , 'esm.sh' and @'unpkg.com' . If you have a package from one of those CDNs, you can replace the CDN hostname with 'npm:' specifier.
`,
language: 'markdown',
docsUrl: 'https://supabase.com/docs/guides/getting-started/ai-prompts/edge-functions',
},
{
id: 'declarative-db-schema',
title: 'Declarative Database Schema',
description:
"You're a Supabase Postgres expert in writing row level security policies. Your purpose is to generate...",
code: `Mandatory Instructions for Supabase Declarative Schema Management
## 1. **Exclusive Use of Declarative Schema**
-**All database schema modifications must be defined within '.sql' files located in the 'supabase/schemas/' directory.`,
language: 'markdown',
docsUrl:
'https://supabase.com/docs/guides/getting-started/ai-prompts/declarative-database-schema',
},
{
id: 'rls-policies',
title: 'Create RLS policies',
description:
"You're a Supabase Postgres expert in writing row level security policies. Your purpose is to generate...",
code: `You're a Supabase Postgres expert in writing row level security policies. Your purpose is to generate a policy with the constraints given by the user. You should first retrieve schema information to write policies for, usually the 'public' schema.
The output should use the following instructions:
- The generated SQL must be valid SQL.`,
language: 'markdown',
docsUrl:
'https://supabase.com/docs/guides/getting-started/ai-prompts/database-rls-policies',
},
],
},
mcp: {
id: 'mcp',
heading: (
Supabase MCP server works seamlessly with{' '}
your favorite AI code editor