style: rebrand to Bolt, change theme to yellow

nuworldagency · Apr 29, 2024 · b4cef53 · b4cef53
1 parent 31cba60
commit b4cef53
Show file tree

Hide file tree

Showing 22 changed files with 85 additions and 71 deletions.
diff --git a/README.md b/README.md
@@ -1,53 +1,53 @@
-# Liit: Microblogging CRUD App & Next.js Boilerplate
+# Bolt Boilerplate
 
-Liit is a powerful microblogging CRUD (Create, Read, Update, Delete) application built with Next.js and powered by Convex, Clerk, and Shadcn. It provides developers with a robust boilerplate for creating dynamic and engaging microblogging platforms with real-time functionality.
+**Bolt Boilerplate** is a [Next.js](https://nextjs.org/) framework integrated with Convex for seamless interactions, Clerk for authentication, and Shadcn for stunning UI. It's designed to supercharge your web development projects, allowing you to build dynamic web applications at lightning speed and with ease.
 
 ## Features
 
-- Unlimited Likes: Anyone can like posts multiple times, without limitations.
-- Real-Time Updates: Leveraging Convex's real-time database, users experience seamless interactions with instant updates.
-- Authentication: Integrated with Clerk for secure authentication and user management.
-- Custom Styling: Styled with Shadcn to provide a visually appealing and customizable user interface.
-- CRUD Operations: Easily perform Create, Read, Update, and Delete operations on posts and user profiles.
+- **Seamless Interactions**: Integrated with [Convex](https://www.convex.dev/) for real-time updates and interactions.
+- **Secure Authentication**: Utilizes [Clerk](https://clerk.com/) for authentication and user management, ensuring a secure login experience.
+- **Stunning UI**: Styled with [Shadcn](https://ui.shadcn.com/) to provide visually appealing and customizable UI components.
+- **Easy Setup**: Get started in minutes with Bolt Boilerplate's straightforward setup process.
 
 ## Quick Start
 
-1. Clone the Repository:
+**1. Clone the Repository:**
 ```bash
-git clone https://github.com/sov3333/get-liit.git
+git clone https://github.com/sov3333/bolt-boilerplate-nextjs.git
 ```
 
-2. Install Dependencies:
+**2. Install Dependencies:**
 ```bash
-cd get-liit
+cd bolt-boilerplate-nextjs
 npm install
 ```
 
-3. Run Convex development server, and select create new project.
+**3. Setup Convex Development Server:**
+Run the Convex development server and create a new project:
 ```bash
 npx convex dev
 ``` 
-
 This will auto-populate `.env.local` file with the following:
 ```plaintext
 CONVEX_DEPLOYMENT=dev:something-random-123
 NEXT_PUBLIC_CONVEX_URL=your_public_convex_url
 ```
 
-4. Setup a Clerk project, then add the following environment variables:
+**4. Setup Clerk Authentication:**
+Setup a Clerk project and add the following environment variables to the .env.local file:
 ```plaintext
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
 CLERK_SECRET_KEY=your_clerk_secret_key
 ```
+Replace Clerk issuerUrl in `@/convex/auth.config.ts` in the providers domain.
 
-5. Replace Clerk issuerUrl in `@/convex/auth.config.ts` in providers domain.
-
-6. Run the Development Server:
+**5. Run the Development Server:**
 ```bash
 npm run dev
 ```
 
-7. Open Your Browser: Open http://localhost:3000 to view the app.
+**6. Open Your Browser:**
+Open http://localhost:3000 to view the app.
 
 ## Contributing
 

diff --git a/app/(home)/(crud)/_components/create-post.tsx b/app/(home)/(crud)/_components/create-post.tsx
@@ -2,15 +2,15 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useConvexAuth, useMutation } from "convex/react";
-import { SignInButton, useUser } from "@clerk/nextjs";
+import { useUser } from "@clerk/nextjs";
 
 import { Button } from "@/components/ui/button";
 import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { api } from "@/convex/_generated/api";
-import { Flame } from "lucide-react";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
 import Link from "next/link";
+import AvatarFallbackLogo from "../../_components/avatar-fallback-logo";
 
 const formSchema = z.object({
     text: z.string()
@@ -55,19 +55,12 @@ const CreatePost = () => {
                                 <Link href={`/${user?.username}`}>
                                     <Avatar className="mr-2 h-8 w-8">
                                         <AvatarImage src={user?.imageUrl} alt="avatar" />
-                                        <AvatarFallback>
-                                            <Flame color="red" fill="orange" className="h-[40px] w-[40px] rounded-full p-2 bg-neutral-100 dark:hidden" />
-                                            <Flame color="red" fill="orange" className="h-[40px] w-[40px] rounded-full p-2 bg-neutral-900 hidden dark:block" />
-                                        </AvatarFallback>
+                                        <AvatarFallbackLogo />
                                     </Avatar>
                                 </Link>
                                 :
                                 <Avatar className="mr-2 h-8 w-8">
-                                    {/* <AvatarImage src={user?.imageUrl} alt="avatar" /> */}
-                                    <AvatarFallback>
-                                        <Flame color="red" fill="orange" className="h-[40px] w-[40px] rounded-full p-2 bg-neutral-100 dark:hidden" />
-                                        <Flame color="red" fill="orange" className="h-[40px] w-[40px] rounded-full p-2 bg-neutral-900 hidden dark:block" />
-                                    </AvatarFallback>
+                                    <AvatarFallbackLogo />
                                 </Avatar>
                         }
                     </div>

diff --git a/app/(home)/(crud)/_components/posts.tsx b/app/(home)/(crud)/_components/posts.tsx
@@ -4,13 +4,14 @@ import { useUser } from "@clerk/nextjs";
 import { useConvexAuth, useMutation } from "convex/react";
 import { Heart, Trash2 } from "lucide-react";
 
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { DialogDelete } from "./dialog-delete";
 import { api } from "@/convex/_generated/api";
 import { Id } from "@/convex/_generated/dataModel";
 import { Post } from "@/convex/posts";
 import Link from "next/link";
+import AvatarFallbackLogo from "../../_components/avatar-fallback-logo";
 
 dayjs.extend(relativeTime);
 
@@ -46,7 +47,7 @@ export function Posts(props: { posts: Post[] }) {
                     <Link href={`/${post.author.username}`}>
                         <Avatar className="h-8 w-8 sm:h-9 sm:w-9 md:h-10 md:w-10">
                             <AvatarImage src={post.author.imageUrl} alt="avatar" />
-                            <AvatarFallback>Liit</AvatarFallback>
+                            <AvatarFallbackLogo />
                         </Avatar>
                     </Link>
                     <div className="ml-4 flex flex-col justify-center items-start">

diff --git a/app/(home)/_components/avatar-fallback-logo.tsx b/app/(home)/_components/avatar-fallback-logo.tsx
@@ -0,0 +1,11 @@
+import { AvatarFallback } from "@/components/ui/avatar";
+import { Zap } from "lucide-react";
+
+const AvatarFallbackLogo = () => {
+    return (<AvatarFallback>
+        <Zap color="orange" fill="gold" className="h-[40px] w-[40px] rounded-full p-2 bg-neutral-100 dark:hidden" />
+        <Zap color="orange" fill="gold" className="h-[40px] w-[40px] rounded-full p-2 bg-neutral-900 hidden dark:block" />
+    </AvatarFallback>);
+}
+
+export default AvatarFallbackLogo;
diff --git a/app/(home)/_components/footer.tsx b/app/(home)/_components/footer.tsx
@@ -9,10 +9,10 @@ import ShareButton from "./share-button";
 import { SignInButton } from "@clerk/nextjs";
 
 const buttonData = [
-    // { name: "twitter", icon: <TwitterIcon />, link: "https://twitter.com/" },
     // { name: "telegram", icon: <SendIcon />, link: "https://t.me/" },
     // { name: "discord", icon: <BotMessageSquareIcon />, link: "https://discord.com/" },
-    { name: "github", icon: <GithubIcon />, link: "https://github.com/sov3333/get-liit/" }
+    { name: "github", icon: <GithubIcon />, link: "https://github.com/sov3333/bolt-boilerplate-nextjs/" },
+    { name: "twitter", icon: <TwitterIcon />, link: "https://twitter.com/sov6900" },
 ];
 
 export const Footer = () => {
@@ -26,7 +26,7 @@ export const Footer = () => {
             <div className="md:ml-auto w-full justify-end flex items-center gap-x-2 text-muted-foreground">
                 {buttonData.map((button, index) => (
                     // make github button a sign in button if user is not authenticated
-                    isAuthenticated
+                    (isAuthenticated || button.name !== "github")
                         ?
                         <Button
                             key={index}
@@ -42,17 +42,13 @@ export const Footer = () => {
                         :
                         <SignInButton mode="modal" key={index}>
                             <Button
-
                                 variant="ghost"
                                 size="sm"
                                 onClick={() => incrementCounter({ name: button.name })}
                             >
-
                                 {button.icon}
-
                             </Button>
                         </SignInButton>
-
                 ))}
                 <ShareButton />
             </div>

diff --git a/app/(home)/_components/heading.tsx b/app/(home)/_components/heading.tsx
@@ -1,25 +1,37 @@
 "use client";
 
+import { SignUpButton } from "@clerk/nextjs";
 import { useConvexAuth } from "convex/react";
-import { LoaderCircle } from "lucide-react";
+import { LoaderCircle, Zap } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
 
 export const Heading = () => {
     const { isAuthenticated, isLoading } = useConvexAuth();
 
     return (
         <div className="max-w-3xl space-y-4">
             <h1 className="text-3xl sm:text-5xl md:text-6xl font-bold">
-                Unlimited Likes, Infinite Connections. It&apos;s <span className="underline">Liit</span>
+                Supercharge Your Next.js Projects with <span className="underline">Bolt</span> Boilerplate
 
             </h1>
             <h3 className="text-base sm:text-xl md:text-2xl font-medium">
-                Experience microblogging with limitless likes and seamless interactions powered by Convex&apos;s real-time database.
+                Build dynamic web apps lightning fast with Bolt: the Next.js framework integrated with Convex for seamless interactions, Clerk for authentication, and Shadcn for stunning UI.
+
             </h3>
             {isLoading && (
                 <div className="w-full flex items-center justify-center">
                     <LoaderCircle className="w-4 h-4 animate-spin" />
                 </div>
             )}
+            {!isLoading && (
+                <SignUpButton mode="modal">
+                    <Button>
+                        Setup in minutes
+                        <Zap className="h-4 w-4 ml-2" />
+                    </Button>
+                </SignUpButton>
+            )}
         </div>
     );
 }
diff --git a/app/(home)/_components/logo.tsx b/app/(home)/_components/logo.tsx
@@ -1,7 +1,7 @@
 import { Poppins } from "next/font/google";
 
 import { cn } from "@/lib/utils";
-import { Flame } from "lucide-react";
+import { Zap } from "lucide-react";
 
 const font = Poppins({
     subsets: ["latin"],
@@ -11,10 +11,10 @@ const font = Poppins({
 export const Logo = () => {
     return (
         <div className="flex items-center gap-x-2">
-            <Flame color="red" fill="orange" className="h-[40px] w-[40px] rounded-full p-2 bg-neutral-100 dark:hidden" />
-            <Flame color="red" fill="orange" className="h-[40px] w-[40px] rounded-full p-2 bg-neutral-900 hidden dark:block" />
+            <Zap color="orange" fill="gold" className="h-[40px] w-[40px] rounded-full p-2 bg-neutral-100 dark:hidden" />
+            <Zap color="orange" fill="gold" className="h-[40px] w-[40px] rounded-full p-2 bg-neutral-900 hidden dark:block" />
             <p className={cn("font-semibold text-xl", font.className)}>
-                Liit
+                Bolt
             </p>
         </div>
     )

diff --git a/app/(home)/_components/navbar.tsx b/app/(home)/_components/navbar.tsx
@@ -2,7 +2,7 @@
 
 import { useConvexAuth } from "convex/react";
 import { SignInButton, SignUpButton, UserButton } from "@clerk/nextjs";
-import { ArrowRight, LoaderCircle } from "lucide-react";
+import { LoaderCircle, Zap } from "lucide-react";
 
 import useStoreUserEffect from "@/hooks/useStoreUserEffect";
 import { useScrollTop } from "@/hooks/use-scroll-top";
@@ -35,8 +35,8 @@ export const Navbar = () => {
                         </SignInButton>
                         <SignUpButton mode="modal">
                             <Button size="sm">
-                                Get Liit free
-                                <ArrowRight className="h-4 w-4 ml-2" />
+                                Get Bolt free
+                                <Zap className="h-4 w-4 ml-2" />
                             </Button>
                         </SignUpButton>
                     </>

diff --git a/app/(home)/_components/share-button.tsx b/app/(home)/_components/share-button.tsx
@@ -1,27 +1,24 @@
 import Link from "next/link";
 import { useMutation } from "convex/react";
-import { TwitterIcon } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import { api } from "@/convex/_generated/api";
 
 const ShareButton = () => {
     const incrementCounter = useMutation(api.counters.increment);
 
-    const tweetText = encodeURIComponent(`Join me on #Liit 🔥, the microblogging platform that's changing the game! Unlimited likes and seamless interactions, powered by #Convex's real-time magic. \n\nGet the #NextJS boilerplate for free: https://getliit.vercel.app/ `);
+    const tweetText = encodeURIComponent(`⚡ Supercharge your Next.js projects with Bolt Boilerplate! Integrated with @Convex_dev for seamless interactions, @ClerkDev for authentication, and @shadcn for stunning UI. Setup in minutes.\n\nTry now! https://getbolt.vercel.app/ #BoltBoilerplate #NextJS #WebDevelopment @sov6900`);
 
     return (
         <>
-            <Button variant="ghost" asChild onClick={() => incrementCounter({ name: "shareButton" })}>
+            <Button variant="secondary" asChild onClick={() => incrementCounter({ name: "shareButton" })}>
                 <Link
                     className="twitter-share-button"
                     data-size="large"
                     href={`https://twitter.com/intent/tweet?text=${tweetText}`}
                     target="_blank" rel="noopener noreferrer"
                 >
-                    <TwitterIcon />
-                    {/* <TwitterIcon className="h-5 w-5 mr-2" /> */}
-                    {/* Share on 𝕏 */}
+                    Share on 𝕏
                 </Link>
             </Button>
         </>

diff --git a/app/globals.css b/app/globals.css
@@ -8,6 +8,7 @@ body {
   height: 100%;
 }
 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -16,8 +17,8 @@ body {
     --card-foreground: 20 14.3% 4.1%;
     --popover: 0 0% 100%;
     --popover-foreground: 20 14.3% 4.1%;
-    --primary: 24.6 95% 53.1%;
-    --primary-foreground: 60 9.1% 97.8%;
+    --primary: 47.9 95.8% 53.1%;
+    --primary-foreground: 26 83.3% 14.1%;
     --secondary: 60 4.8% 95.9%;
     --secondary-foreground: 24 9.8% 10%;
     --muted: 60 4.8% 95.9%;
@@ -28,7 +29,7 @@ body {
     --destructive-foreground: 60 9.1% 97.8%;
     --border: 20 5.9% 90%;
     --input: 20 5.9% 90%;
-    --ring: 24.6 95% 53.1%;
+    --ring: 20 14.3% 4.1%;
     --radius: 0.5rem;
   }
 
@@ -39,22 +40,23 @@ body {
     --card-foreground: 60 9.1% 97.8%;
     --popover: 20 14.3% 4.1%;
     --popover-foreground: 60 9.1% 97.8%;
-    --primary: 20.5 90.2% 48.2%;
-    --primary-foreground: 60 9.1% 97.8%;
+    --primary: 47.9 95.8% 53.1%;
+    --primary-foreground: 26 83.3% 14.1%;
     --secondary: 12 6.5% 15.1%;
     --secondary-foreground: 60 9.1% 97.8%;
     --muted: 12 6.5% 15.1%;
     --muted-foreground: 24 5.4% 63.9%;
     --accent: 12 6.5% 15.1%;
     --accent-foreground: 60 9.1% 97.8%;
-    --destructive: 0 72.2% 50.6%;
+    --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 60 9.1% 97.8%;
     --border: 12 6.5% 15.1%;
     --input: 12 6.5% 15.1%;
-    --ring: 20.5 90.2% 48.2%;
+    --ring: 35.5 91.7% 32.9%;
   }
 }
 
+
 @layer base {
   * {
     @apply border-border;

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -8,8 +8,8 @@ import { ConvexClientProvider } from "@/components/convex-provider";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Liit: Microblogging Platform with Unlimited Likes | NextJS & Convex Boilerplate",
-  description: "Built with NextJS and powered by Convex's real-time database, Liit offers developers a robust boilerplate for building engaging web experiences.",
+  title: "Bolt Boilerplate: Supercharge Your Next.js Projects",
+  description: "Accelerate your web development with Bolt Boilerplate: Next.js framework integrated with Convex for seamless interactions, Clerk for authentication, and Shadcn for stunning UI. Setup in minutes.",
   metadataBase: new URL(process.env.NEXT_PUBLIC_URL!),
   icons: {
     icon: [

diff --git a/app/opengraph-image.alt.txt b/app/opengraph-image.alt.txt
@@ -1 +1 @@
-About Liit
+About Bolt Boilerplate for Next.js and Convex
diff --git a/app/opengraph-image.jpg b/app/opengraph-image.jpg
diff --git a/app/opengraph-image.png b/app/opengraph-image.png
diff --git a/app/twitter-image.alt.txt b/app/twitter-image.alt.txt
@@ -1 +1 @@
-About Liit
+About Bolt Boilerplate for Next.js and Convex
diff --git a/app/twitter-image.jpg b/app/twitter-image.jpg
diff --git a/app/twitter-image.png b/app/twitter-image.png
diff --git a/convex/schema.ts b/convex/schema.ts
@@ -13,6 +13,8 @@ export default defineSchema({
         totalLiked: v.optional(v.number()),
         clickedShare: v.optional(v.number()),
         clickedGithub: v.optional(v.number()),
+        clickedTwitter: v.optional(v.number()),
+        clickedTelegram: v.optional(v.number()),
 
         /** NOTES: 
          * Clerk auth login provides following user data `identity` via ctx.auth.getUserIdentity(), used in convex folder:
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		About Liit
		About Bolt Boilerplate for Next.js and Convex