28 | Spend your weekends building amazing web apps with a collection of the 29 | latest tech stacks and tools. 30 |
31 |{value}
43 |
6 |
7 |
8 |
9 | ## Introduction
10 |
11 | If you're a weekend hustler looking to bring your ideas to life, this starter boilerplate is perfect for you. It includes everything you need to build an MVP in a weekend. With this boilerplate, you'll have access to the latest tech stacks and tools, minimizing setup time so you can focus on building and maximizing productivity.
12 |
13 | ## Tech Stack
14 |
15 | - **Framework:** [Next.js 14](https://nextjs.org)
16 | - **Language:** [TypeScript](https://www.typescriptlang.org/)
17 | - **Styling:** [Tailwind CSS](https://tailwindcss.com)
18 | - **ORM:** [Drizzle ORM](https://orm.drizzle.team/)
19 | - **Database:** [Postgresql](https://supabase.com/)
20 | - **Authentication:** [Supabase Auth](https://supabase.com/)
21 | - **UI Components:** [Shadcn UI](https://ui.shadcn.com/)
22 | - **Form Management:** [React Hook Form](https://react-hook-form.com/)
23 | - **State Management:** [Zustand](https://zustand-demo.pmnd.rs/)
24 | - **Validation:** [Zod](https://zod.dev/)
25 | - **Formatter & Linter:** [Biome](https://biomejs.dev/)
26 | - **Email templates:** [React Email](https://react.email/)
27 | - **Email delivery:** [Resend](https://resend.com/)
28 | - **Rate limiting:** [Upstash](https://upstash.com/)
29 | - **Theme manager:** [next-themes](https://next-themes-example.vercel.app/)
30 | - **Type-safe search params state manager:** [nuqs](https://nuqs.47ng.com/)
31 |
32 | ## Running Locally
33 |
34 | 1. Clone the repository
35 |
36 | ```bash
37 | git clone https://github.com/sujjeee/starter.git
38 | ```
39 |
40 | 2. Install dependencies using pnpm
41 |
42 | ```bash
43 | pnpm install
44 | ```
45 |
46 | 3. Copy the `.env.example` to `.env` and update the variables.
47 |
48 | ```bash
49 | cp .env.example .env
50 | ```
51 |
52 | 4. Migrate the database schema
53 |
54 | ```bash
55 | pnpm db:push
56 | ```
57 |
58 | 5. Start the development server
59 |
60 | ```bash
61 | pnpm dev
62 | ```
63 |
64 | ## Deploy
65 |
66 | Follow the deployment guides for [Vercel](https://nextjs.org/learn-pages-router/basics/deploying-nextjs-app/deploy).
67 |
--------------------------------------------------------------------------------
/src/app/playground/_blocks/form/components.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { zodResolver } from "@hookform/resolvers/zod"
4 | import { useForm } from "react-hook-form"
5 | import { z } from "zod"
6 | import { Button } from "@/components/ui/button"
7 | import {
8 | Form,
9 | FormControl,
10 | FormField,
11 | FormItem,
12 | FormLabel,
13 | FormMessage,
14 | } from "@/components/ui/form"
15 | import { Input } from "@/components/ui/input"
16 | import { ClipboardType } from "lucide-react"
17 | import { Shell } from "@/components/ui/shell"
18 | import { toast } from "sonner"
19 |
20 | const FormSchema = z.object({
21 | username: z.string().min(2, {
22 | message: "Username must be at least 2 characters.",
23 | }),
24 | })
25 |
26 | export function NextForm() {
27 | const form = useForm163 | {body} 164 |
165 | ) 166 | }) 167 | FormMessage.displayName = "FormMessage" 168 | 169 | export { 170 | useFormField, 171 | Form, 172 | FormItem, 173 | FormLabel, 174 | FormControl, 175 | FormDescription, 176 | FormMessage, 177 | FormField, 178 | } 179 | -------------------------------------------------------------------------------- /src/app/playground/_blocks/login/components.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import React from "react" 4 | import { 5 | Form, 6 | FormControl, 7 | FormField, 8 | FormItem, 9 | FormMessage, 10 | } from "@/components/ui/form" 11 | import { zodResolver } from "@hookform/resolvers/zod" 12 | import { useForm } from "react-hook-form" 13 | import { toast } from "sonner" 14 | import type { z } from "zod" 15 | import { emailSchema } from "@/lib/validations" 16 | import { Input } from "@/components/ui/input" 17 | import { Button, buttonVariants } from "@/components/ui/button" 18 | import { Icons } from "@/components/icons" 19 | import { showErrorToast } from "@/lib/errors" 20 | import { cn } from "@/lib/utils" 21 | import { Spinner } from "@/components/icons/spinner" 22 | import { supabaseClient } from "@/lib/supabase/client" 23 | import { loginWithEmail } from "./actions" 24 | import type { User } from "@supabase/supabase-js" 25 | import { Shell } from "@/components/ui/shell" 26 | import { Command, LockIcon } from "lucide-react" 27 | 28 | export function Login({ user }: { user: User | null }) { 29 | return ( 30 |51 | Enter your email to sign in to your account 52 |
53 |