Create a Next.js project with ShadcnUI & TailwindCSS

create_next_and_shadcn_project.sh

##This was a medium chained prompt that got Claude 3.5 to correctly set up the stack.
##Use at your own risk, there may be some small modifications needed but im sure ChatGPT or any LLM could fix any errors.
#!/bin/bash

# Set project name
PROJECT_NAME="at0m_cloud"

# Create Next.js project with TypeScript
npx create-next-app@latest $PROJECT_NAME --typescript --eslint --tailwind --app --src-dir --import-alias "@/*"

# Navigate to project directory
cd $PROJECT_NAME

# Install additional dependencies
npm install @shadcn/ui lucide-react

# Set up Shadcn UI
npx shadcn-ui@latest init

# Create necessary directories
mkdir -p src/components
mkdir -p src/app/dashboard

# Add Shadcn UI components
npx shadcn-ui@latest add card
npx shadcn-ui@latest add button
npx shadcn-ui@latest add input
npx shadcn-ui@latest add avatar
npx shadcn-ui@latest add select
npx shadcn-ui@latest add switch

# Create component files
cat > src/components/Header.tsx << EOL
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

export function Header() {
  return (
    <header className="flex items-center justify-between px-6 py-4 bg-white border-b border-gray-200">
      <h1 className="text-2xl font-bold">at0m.cloud</h1>
      <Avatar>
        <AvatarImage src="/avatar.png" alt="User" />
        <AvatarFallback>U</AvatarFallback>
      </Avatar>
    </header>
  )
}
EOL

cat > src/components/Sidebar.tsx << EOL
import Link from 'next/link'
import { Home, Server, Settings } from 'lucide-react'

export function Sidebar() {
  return (
    <aside className="w-64 bg-gray-100 text-black">
      <nav className="p-4">
        <ul className="space-y-2">
          <li>
            <Link href="/dashboard" className="flex items-center p-2 hover:bg-gray-200 rounded">
              <Home className="mr-2" size={20} />
              Dashboard
            </Link>
          </li>
          <li>
            <Link href="/applications" className="flex items-center p-2 hover:bg-gray-200 rounded">
              <Server className="mr-2" size={20} />
              Applications
            </Link>
          </li>
          <li>
            <Link href="/settings" className="flex items-center p-2 hover:bg-gray-200 rounded">
              <Settings className="mr-2" size={20} />
              Settings
            </Link>
          </li>
        </ul>
      </nav>
    </aside>
  )
}
EOL

cat > src/components/Layout.tsx << EOL
import { Header } from './Header'
import { Sidebar } from './Sidebar'

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen bg-white">
      <Sidebar />
      <div className="flex flex-col flex-1">
        <Header />
        <main className="flex-1 overflow-y-auto bg-gray-50">{children}</main>
      </div>
    </div>
  )
}
EOL

# Create dashboard page
cat > src/app/dashboard/page.tsx << EOL
'use client'

import { useState } from 'react'
import { Layout } from '@/components/Layout'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'

export default function Dashboard() {
  const [appName, setAppName] = useState('')
  const [deploymentStatus, setDeploymentStatus] = useState('')

  const handleDeploy = () => {
    // Simulating deployment process
    setDeploymentStatus('Deploying...')
    setTimeout(() => {
      setDeploymentStatus('Deployed successfully!')
    }, 2000)
  }

  return (
    <Layout>
      <div className="p-6">
        <h1 className="text-3xl font-bold mb-6">Dashboard</h1>
        <Card className="mb-6">
          <CardHeader>
            <CardTitle>Micro Host Deployment</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center space-x-4">
              <Input
                placeholder="Enter application name"
                value={appName}
                onChange={(e) => setAppName(e.target.value)}
              />
              <Button onClick={handleDeploy}>Deploy</Button>
            </div>
            {deploymentStatus && (
              <p className="mt-4 text-sm">{deploymentStatus}</p>
            )}
          </CardContent>
        </Card>
        {/* Add more dashboard content here */}
      </div>
    </Layout>
  )
}
EOL

# Update globals.css for black and white theme
cat > src/app/globals.css << EOL
@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 0%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 0%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 0%;
    --primary: 0 0% 0%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 0%;
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 45%;
    --accent: 0 0% 96%;
    --accent-foreground: 0 0% 0%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 0 0% 0%;
    --radius: 0.5rem;
  }
}
 
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
EOL

# Update layout.tsx to include globals.css
cat > src/app/layout.tsx << EOL
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'at0m.cloud',
  description: 'Micro host deployment for applications and edge workers',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}
EOL

# Update page.tsx to redirect to dashboard
cat > src/app/page.tsx << EOL
import { redirect } from 'next/navigation'

export default function Home() {
  redirect('/dashboard')
}
EOL

echo "Project setup complete. You can now run 'npm run dev' to start the development server."

Details

This is a shell script that sets up and installs Nextjs 14, TailwindCSS and ShadcnUI. The command only needs to be ran once then do
npm run dev to start the dev server.