Add chadcn/ui

.github/workflows/app.yaml

@@ -2,20 +2,22 @@ name: Web application CI
 
 on: [push]
 
+#TODO: quality job for frontend: eslint, prettier, build job for frontend
+
 jobs:
   quality:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        python-version: [ 3.11 ]
+        python-version: [3.11]
     steps:
       - uses: actions/checkout@v3
       - name: Set up Python
         uses: actions/setup-python@v4
         with: # https://github.com/actions/setup-python/blob/main/docs/advanced-usage.md#caching-packages
           python-version: ${{ matrix.python-version }}
-          cache: 'pip'
+          cache: "pip"
-          cache-dependency-path: 'requirements/dev.txt'
+          cache-dependency-path: "requirements/dev.txt"
       - name: Install dev dependencies
         run: |
           python -m pip install --upgrade pip
@@ -37,15 +39,15 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        python-version: [ 3.11 ]
+        python-version: [3.11]
     steps:
       - uses: actions/checkout@v3
       - name: Set up Python
         uses: actions/setup-python@v4
         with: # https://github.com/actions/setup-python/blob/main/docs/advanced-usage.md#caching-packages
           python-version: ${{ matrix.python-version }}
-          cache: 'pip'
+          cache: "pip"
-          cache-dependency-path: 'requirements/test.txt'
+          cache-dependency-path: "requirements/test.txt"
       - name: Install test dependencies
         run: |
           python -m pip install --upgrade pip

.github/workflows/scraping.yaml

@@ -8,29 +8,28 @@ name: Scraping the repositories from Source Graph
 
 on: [push]
 
-
 jobs:
-    scraping:
+  scraping:
-        if: ${{ !github.event.act }} # skip during local actions testing
+    if: ${{ !github.event.act }} # skip during local actions testing
-        runs-on: ubuntu-latest
+    runs-on: ubuntu-latest
-        strategy:
+    strategy:
-          matrix:
+      matrix:
-            python-version: [ 3.11 ]
+        python-version: [3.11]
-        steps:
+    steps:
-          - uses: actions/checkout@v3
+      - uses: actions/checkout@v3
-          - name: Set up Python
+      - name: Set up Python
-            uses: actions/setup-python@v4
+        uses: actions/setup-python@v4
-            with:
+        with:
-              python-version: ${{ matrix.python-version }}
+          python-version: ${{ matrix.python-version }}
-              cache: 'pip'
+          cache: "pip"
-              cache-dependency-path: 'requirements/base.txt'
+          cache-dependency-path: "requirements/base.txt"
-          - name: Install dependencies
+      - name: Install dependencies
-            run: |
+        run: |
-              python -m pip install --upgrade pip
+          python -m pip install --upgrade pip
-              python -m pip install -r requirements/base.txt
+          python -m pip install -r requirements/base.txt
-          - name: Start scraping
+      - name: Start scraping
-            run: |
+        run: |
-                python -m app.scrape
+          python -m app.scrape
-          - uses: stefanzweifel/git-auto-commit-action@v4
+      - uses: stefanzweifel/git-auto-commit-action@v4
-            with:
+        with:
-              commit_message: "Scraped repositories from Source Graph"
+          commit_message: "Scraped repositories from Source Graph"

.pre-commit-config.yaml

@@ -1,7 +1,7 @@
 ---
 default_language_version:
   python: python3.11
-default_stages: [ commit ]
+default_stages: [commit]
 fail_fast: false
 minimum_pre_commit_version: 3.3.3
 repos:
@@ -11,7 +11,7 @@ repos:
       - id: trailing-whitespace
       - id: end-of-file-fixer
       - id: mixed-line-ending
-        args: [ "--fix=lf" ]
+        args: ["--fix=lf"]
       - id: check-added-large-files
       - id: check-toml
       - id: check-yaml
@@ -22,14 +22,14 @@ repos:
         args: [--fix, --exit-non-zero-on-fix]
   - repo: local
     hooks:
-    - id: mypy
+      - id: mypy
-      name: mypy
+        name: mypy
-      entry: |
+        entry: |
-        python -m mypy .
+          python -m mypy .
-      types: [ python ]
+        types: [python]
-      language: system
+        language: system
-      require_serial: true
+        require_serial: true
-      pass_filenames: false
+        pass_filenames: false
   - repo: https://github.com/ambv/black
     rev: 23.7.0
     hooks:
@@ -39,7 +39,11 @@ repos:
     hooks:
       - id: pyproject-fmt
         args: ["--indent=4"]
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: "v3.0.2"
+    hooks:
+      - id: prettier
   - repo: https://github.com/jorisroovers/gitlint
-    rev:  'v0.19.1'
+    rev: "v0.19.1"
     hooks:
       - id: gitlint

README.md

@@ -11,15 +11,21 @@ If you don't, use any other method to create a virtual environment
 and install Python 3.11.4.
 
 - Install Python 3.11.4
+
 ```shell
 pyenv install 3.11.4
 ```
+
 - Create a virtual environment
+
 ```shell
 pyenv virtualenv 3.11.4 awesome-fastapi-projects
 ```
+
 - Activate the virtual environment
+
 ```shell
 pyenv local awesome-fastapi-projects
 ```
+
 #TODO: Add more documentation: migrations, front, tests

frontend/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

frontend/next.config.js

@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;

frontend/package.json

@@ -13,13 +13,18 @@
     "@types/react": "18.2.20",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.15",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
     "eslint": "8.47.0",
     "eslint-config-next": "13.4.18",
+    "lucide-react": "^0.269.0",
     "next": "13.4.18",
     "postcss": "8.4.28",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "tailwind-merge": "^1.14.0",
     "tailwindcss": "3.3.3",
+    "tailwindcss-animate": "^1.0.6",
     "typescript": "5.1.6"
   }
 }

frontend/postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

frontend/src/app/globals.css

@@ -2,26 +2,75 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
+@layer base {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
   :root {
-    --foreground-rgb: 255, 255, 255;
+    --background: 0 0% 100%;
-    --background-start-rgb: 0, 0, 0;
+    --foreground: 222.2 84% 4.9%;
-    --background-end-rgb: 0, 0, 0;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
   }
 }
 
-body {
+@layer base {
-  color: rgb(var(--foreground-rgb));
+  * {
-  background: linear-gradient(
+    @apply border-border;
-      to bottom,
+  }
-      transparent,
+  body {
-      rgb(var(--background-end-rgb))
+    @apply bg-background text-foreground;
-    )
+  }
-    rgb(var(--background-start-rgb));
 }

frontend/src/app/layout.tsx

@@ -1,22 +1,32 @@
-import './globals.css'
+import "./globals.css";
-import type { Metadata } from 'next'
+import type { Metadata } from "next";
-import { Inter } from 'next/font/google'
+import { Inter } from "next/font/google";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
+  title: "Awesome FastAPI projects",
-  description: 'Generated by create next app',
+  description: "An automatically generated list of awesome FastAPI projects",
-}
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <main className="container">
+          <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl text-center mt-8">
+            Awesome FastAPI projects{" "}
+            <span role="img" aria-label="party">
+              🎉
+            </span>
+          </h1>
+          {children}
+        </main>
+      </body>
     </html>
-  )
+  );
 }

frontend/src/app/page.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 export default function Home() {
   return (
@@ -15,7 +15,7 @@ export default function Home() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            By{' '}
+            By{" "}
             <Image
               src="/vercel.svg"
               alt="Vercel Logo"
@@ -47,7 +47,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{' '}
+            Docs{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -64,7 +64,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{' '}
+            Learn{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -81,7 +81,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{' '}
+            Templates{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -98,7 +98,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{' '}
+            Deploy{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -109,5 +109,5 @@ export default function Home() {
         </a>
       </div>
     </main>
-  )
+  );
 }

frontend/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

frontend/tailwind.config.ts

@@ -1,20 +1,75 @@
-import type { Config } from 'tailwindcss'
+/** @type {import('tailwindcss').Config} */
-
+module.exports = {
-const config: Config = {
+  darkMode: ["class"],
   content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
     extend: {
-      backgroundImage: {
+      colors: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        border: "hsl(var(--border))",
-        'gradient-conic':
+        input: "hsl(var(--input))",
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
       },
     },
   },
-  plugins: [],
+  plugins: [require("tailwindcss-animate")],
-}
+};
-export default config