From 38c9c286d0ff32d7f8f269d2c76c2ff44d7b3170 Mon Sep 17 00:00:00 2001 From: Mauricio Siu Date: Sun, 8 Mar 2026 03:16:19 -0600 Subject: [PATCH] feat: add Database Management Tool page and update footer - Introduced a new page for the Database Management Tool, detailing features, supported database systems, and FAQs. - Updated the footer to include a link to the new Database Management Tool page. --- apps/website/app/api/docker-stats/route.ts | 60 +++ .../app/api/github-contributors/route.ts | 75 +++ .../database-management-tool/page.tsx | 429 ++++++++++++++++++ apps/website/components/Footer.tsx | 4 + apps/website/components/stats.tsx | 206 +++++---- 5 files changed, 681 insertions(+), 93 deletions(-) create mode 100644 apps/website/app/api/docker-stats/route.ts create mode 100644 apps/website/app/api/github-contributors/route.ts create mode 100644 apps/website/app/features/database-management-tool/page.tsx diff --git a/apps/website/app/api/docker-stats/route.ts b/apps/website/app/api/docker-stats/route.ts new file mode 100644 index 0000000..84efd9e --- /dev/null +++ b/apps/website/app/api/docker-stats/route.ts @@ -0,0 +1,60 @@ +import { NextResponse } from "next/server"; + +let cachedPulls: { count: number; timestamp: number } | null = null; +const CACHE_DURATION = 30 * 60 * 1000; // 30 minutes + +export async function GET() { + if (cachedPulls && Date.now() - cachedPulls.timestamp < CACHE_DURATION) { + return NextResponse.json( + { pull_count: cachedPulls.count }, + { + headers: { + "Cache-Control": + "public, s-maxage=1800, stale-while-revalidate=3600", + }, + }, + ); + } + + try { + const response = await fetch( + "https://hub.docker.com/v2/repositories/dokploy/dokploy/", + { + headers: { + "User-Agent": "Dokploy-Website", + }, + }, + ); + + if (!response.ok) { + return NextResponse.json( + { error: "Failed to fetch Docker Hub data" }, + { status: response.status }, + ); + } + + const data = await response.json(); + const pullCount = data.pull_count; + + cachedPulls = { + count: pullCount, + timestamp: Date.now(), + }; + + return NextResponse.json( + { pull_count: pullCount }, + { + headers: { + "Cache-Control": + "public, s-maxage=1800, stale-while-revalidate=3600", + }, + }, + ); + } catch (error) { + console.error("Error fetching Docker Hub stats:", error); + return NextResponse.json( + { error: "Internal server error" }, + { status: 500 }, + ); + } +} diff --git a/apps/website/app/api/github-contributors/route.ts b/apps/website/app/api/github-contributors/route.ts new file mode 100644 index 0000000..c515ef0 --- /dev/null +++ b/apps/website/app/api/github-contributors/route.ts @@ -0,0 +1,75 @@ +import { NextResponse } from "next/server"; + +let cachedContributors: { count: number; timestamp: number } | null = null; +const CACHE_DURATION = 30 * 60 * 1000; // 30 minutes + +export async function GET() { + if ( + cachedContributors && + Date.now() - cachedContributors.timestamp < CACHE_DURATION + ) { + return NextResponse.json( + { contributors_count: cachedContributors.count }, + { + headers: { + "Cache-Control": + "public, s-maxage=1800, stale-while-revalidate=3600", + }, + }, + ); + } + + try { + // Request 1 per page to get total count from Link header + const response = await fetch( + "https://api.github.com/repos/dokploy/dokploy/contributors?per_page=1&anon=false", + { + headers: { + Accept: "application/vnd.github.v3+json", + "User-Agent": "Dokploy-Website", + }, + }, + ); + + if (!response.ok) { + return NextResponse.json( + { error: "Failed to fetch contributors data" }, + { status: response.status }, + ); + } + + let count = 200; // fallback + const linkHeader = response.headers.get("Link"); + + if (linkHeader) { + // Parse last page number from Link header: <...?page=N>; rel="last" + const lastMatch = linkHeader.match( + /[&?]page=(\d+)[^>]*>;\s*rel="last"/, + ); + if (lastMatch) { + count = Number.parseInt(lastMatch[1], 10); + } + } + + cachedContributors = { + count, + timestamp: Date.now(), + }; + + return NextResponse.json( + { contributors_count: count }, + { + headers: { + "Cache-Control": + "public, s-maxage=1800, stale-while-revalidate=3600", + }, + }, + ); + } catch (error) { + console.error("Error fetching GitHub contributors:", error); + return NextResponse.json( + { error: "Internal server error" }, + { status: 500 }, + ); + } +} diff --git a/apps/website/app/features/database-management-tool/page.tsx b/apps/website/app/features/database-management-tool/page.tsx new file mode 100644 index 0000000..4728a5e --- /dev/null +++ b/apps/website/app/features/database-management-tool/page.tsx @@ -0,0 +1,429 @@ +import { Container } from "@/components/Container"; +import { CallToAction } from "@/components/CallToAction"; +import AnimatedGridPattern from "@/components/ui/animated-grid-pattern"; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/components/ui/accordion"; +import { Button } from "@/components/ui/button"; +import { + Database, + Activity, + Shield, + Archive, + FileText, + RotateCcw, + Link2, + Container as ContainerIcon, + Terminal, + HardDrive, + Cpu, + Keyboard, + AlertTriangle, + Lock, + KeyRound, + ShieldCheck, +} from "lucide-react"; +import Image from "next/image"; +import Link from "next/link"; +import type { Metadata } from "next"; + +export const metadata: Metadata = { + title: "Database Management Tool & Deployment Software", + description: + "Create, manage, and back up databases easily with Dokploy's database management tool, and customize the process to suit your project needs.", +}; + +const databaseSystems = [ + { + icon: Database, + title: "PostgreSQL", + description: + "A robust, SQL-compliant relational database with high reliability\u2014a solid choice for production workloads that handle structured and transactional data and demand consistency and standards compliance.", + }, + { + icon: Database, + title: "MySQL", + description: + "A widely used open source relational database known for its high performance and flexibility, with broad ecosystem support across frameworks and hosting environments.", + }, + { + icon: Database, + title: "MariaDB", + description: + "A free and open source fork of MySQL with additional features and improved performance, maintained by an active community and great for MySQL applications.", + }, + { + icon: Database, + title: "MongoDB", + description: + "A NoSQL database built for high scalability and flexibility, well-suited to applications with unstructured or semi-structured data and evolving data sources.", + }, + { + icon: Database, + title: "Redis", + description: + "An in-memory key-value store often used as a database, cache, and message broker\u2014fast by design and easy to integrate for high-performance operations.", + }, +]; + +const protectionFeatures = [ + { + icon: Archive, + title: "Backups", + description: + "Schedule automated backups for any database and route them directly to an S3 bucket of your choice. Set a cron schedule, define a prefix, and test your configuration before relying on it so you know your stored data is secure before you ever need to recover it.", + }, + { + icon: FileText, + title: "Logs", + description: + "View real-time logs from any running database directly in your Dokploy dashboard. Spot errors as they happen, trace unexpected behavior back to its source, and keep a clear record of what\u2019s happening inside your containers.", + }, + { + icon: RotateCcw, + title: "Restore", + description: + "Restore any database from a backup stored in your S3 bucket in a few clicks\u2014critical for disaster recovery when you need to act fast. Select the source bucket, search for your backup file with autocomplete, and kick off the restoration process\u2014Dokploy handles the correct restore commands automatically.", + }, + { + icon: Link2, + title: "Connections", + description: + "Connect to databases internally within your network or expose them externally via a generated connection URL. Use internal credentials for applications running in the same environment, and configure external access only when needed, with security controls in place to protect sensitive data.", + }, +]; + +const advancedOptions = [ + { + icon: ContainerIcon, + title: "Custom Docker Image", + description: + "Swap out the default Docker image for any database with one that fits your exact requirements and database development workflow.", + }, + { + icon: Terminal, + title: "Run Command", + description: + "Execute custom commands directly inside the container for advanced management, complex queries, or troubleshooting.", + }, + { + icon: HardDrive, + title: "Volumes", + description: + "Configure persistent storage volumes to make sure your data survives deployments and restarts.", + }, + { + icon: Cpu, + title: "Resources", + description: + "Adjust CPU and memory allocation per database to optimize database performance and keep resource usage predictable as your infrastructure grows.", + }, + { + icon: Keyboard, + title: "Keyboard Shortcuts", + description: + "Navigate between database tabs instantly with built-in keyboard shortcuts, keeping your workflow fast.", + }, + { + icon: AlertTriangle, + title: "Danger Zone", + description: + "When you need a clean slate, the Danger Zone lets you wipe all data, tables, and configuration in one controlled action.", + }, +]; + +const securityFeatures = [ + { + icon: Lock, + title: "Your server, your data", + description: + "Dokploy creates Docker containers on your own server. Your database data never leaves your infrastructure\u2014you have full ownership and control over where it lives.", + }, + { + icon: KeyRound, + title: "Isolated containers", + description: + "Each database runs in its own Docker container, isolated from other services. You control networking, access, and exposure\u2014nothing is shared unless you configure it.", + }, + { + icon: ShieldCheck, + title: "No third-party access", + description: + "Dokploy doesn\u2019t store or proxy your data. Everything runs on your machine, so there\u2019s no middleman between your applications and your databases.", + }, +]; + +const faqs = [ + { + question: "What are the key features of database management tools?", + answer: + "The best database management tools let you deploy, monitor, and optimize performance across multiple database systems from a single interface. Core capabilities typically include automated backups, connection management, resource controls, and the ability to track database changes over time. Support for custom functions, environment variables, and data privacy controls are also important\u2014especially for teams managing sensitive workloads in production.", + }, + { + question: "What is the best database management tool?", + answer: + "There\u2019s no single best tool. The right choice depends on your specific use cases, team size, and infrastructure. Some tools require expertise to configure and come with a steeper learning curve, which can slow teams down. Dokploy is designed to remove that friction and improve database performance, offering a secure, scalable solution that covers deployment, monitoring, backups, and data privacy without requiring specialist knowledge. It won\u2019t replace dedicated analysis or AI assistant tooling, but it gives developers a reliable foundation for managing databases in production.", + }, + { + question: "What database systems does Dokploy support?", + answer: + "Dokploy supports five widely used database tools: PostgreSQL, MySQL, MariaDB, MongoDB, and Redis. That covers the most common SQL server databases and NoSQL use cases, from relational workloads that rely on structured query language to flexible document and key-value stores. All five\u2014both SQL databases and noSQL systems\u2014can be deployed, backed up, and monitored using the same tools and workflows inside Dokploy.", + }, +]; + +export default function DatabaseManagementToolPage() { + return ( +
+ {/* Hero Section */} +
+ + +
+

+ Database Management, Done Right +

+

+ Create, manage, and back up databases easily with Dokploy's + database tool, and customize the process to suit your project + needs. Deploy in minutes, maintain full control over your stored + data, and recover fast when it matters. +

+
+ + +
+
+ +
+ + {/* Deploy the database you already use */} +
+ +
+

+ Deploy the database you already use +

+

+ Dokploy's database management tool supports five widely used + database systems out of the box, so you're not locked into a + single technology. You pick what fits your stack and your data + management needs. +

+
+
+ {databaseSystems.map((db) => ( +
+
+ +
+

{db.title}

+

+ {db.description} +

+
+ ))} +
+ +
+ + {/* Watch your databases in real time */} +
+ +
+
+
+ +
+
+

+ Watch your databases in real time +

+

+ Dokploy surfaces live monitoring graphs for memory, CPU, disk, and + network directly in the dashboard. The data updates as you view + it, so you can see exactly what your database is doing and catch + problems before they become incidents. +

+
+ +
+ + {/* Protect, recover, and connect with confidence */} +
+ +
+

+ Protect, recover, and connect with confidence +

+

+ Automated backups, transparent logs, straightforward restores, and + flexible connection options. Everything you need to manage a + database reliably, all in one place. +

+
+
+ {protectionFeatures.map((feature) => ( +
+
+ +
+

{feature.title}

+

+ {feature.description} +

+
+ ))} +
+ +
+ + {/* Advanced options, your way */} +
+ +
+

+ Advanced options, your way +

+

+ Dokploy goes beyond the basics, giving you granular control over + how each database runs, from the image it uses to the resources it + consumes and everything in between. +

+
+
+ {advancedOptions.map((option) => ( +
+
+ +
+

+ {option.title} +

+

+ {option.description} +

+
+ ))} +
+ +
+ + {/* Your data stays secure */} +
+ +
+
+
+ +
+
+

+ Your data stays secure +

+

+ Your database data is stored on your own server. Dokploy creates + Docker containers on your infrastructure, so you have full + control over your data—no third parties, no external + dependencies. +

+
+
+ {securityFeatures.map((feature) => ( +
+
+ +
+

{feature.title}

+

+ {feature.description} +

+
+ ))} +
+ +
+ + {/* Start managing databases smarter */} +
+ +
+

+ Start managing databases smarter +

+

+ Dokploy gives you everything you need to deploy, monitor, and + protect your databases—without the complexity. Create your + account and have your first database running in minutes with our + database management tool. +

+
+ +
+
+ +
+ + {/* Database management tool FAQs */} +
+ +
+

+ Database management tool FAQs +

+
+ + {faqs.map((faq, index) => ( + + + {faq.question} + + {faq.answer} + + ))} + + +
+ + +
+ ); +} diff --git a/apps/website/components/Footer.tsx b/apps/website/components/Footer.tsx index a8361d2..f26ef16 100644 --- a/apps/website/components/Footer.tsx +++ b/apps/website/components/Footer.tsx @@ -17,6 +17,10 @@ const footerSections = [ href: "/features/application-deployment-platform", label: "Application Deployment Platform", }, + { + href: "/features/database-management-tool", + label: "Databases", + }, { href: "/contact", label: "Contact" }, ], }, diff --git a/apps/website/components/stats.tsx b/apps/website/components/stats.tsx index 7c2968b..6869d40 100644 --- a/apps/website/components/stats.tsx +++ b/apps/website/components/stats.tsx @@ -5,7 +5,7 @@ import React, { useEffect, useState } from "react"; import { useId } from "react"; import NumberTicker from "./ui/number-ticker"; -const statsValues = { +const defaultStats = { githubStars: 26000, dockerDownloads: 6500000, contributors: 200, @@ -13,26 +13,39 @@ const statsValues = { }; export function StatsSection() { - const [githubStars, setGithubStars] = useState(statsValues.githubStars); + const [githubStars, setGithubStars] = useState(defaultStats.githubStars); + const [dockerDownloads, setDockerDownloads] = useState( + defaultStats.dockerDownloads, + ); + const [contributors, setContributors] = useState( + defaultStats.contributors, + ); useEffect(() => { - const fetchGitHubStars = async () => { - try { - const response = await fetch( - "/api/github-stars?owner=dokploy&repo=dokploy", - ); + const fetchStats = async () => { + const [starsRes, dockerRes, contribRes] = await Promise.allSettled([ + fetch("/api/github-stars?owner=dokploy&repo=dokploy"), + fetch("/api/docker-stats"), + fetch("/api/github-contributors"), + ]); - if (response.ok) { - const data = await response.json(); - setGithubStars(data.stargazers_count); - } - } catch (error) { - console.error("Error fetching GitHub stars:", error); - // Keep default value on error + if (starsRes.status === "fulfilled" && starsRes.value.ok) { + const data = await starsRes.value.json(); + setGithubStars(data.stargazers_count); + } + + if (dockerRes.status === "fulfilled" && dockerRes.value.ok) { + const data = await dockerRes.value.json(); + setDockerDownloads(data.pull_count); + } + + if (contribRes.status === "fulfilled" && contribRes.value.ok) { + const data = await contribRes.value.json(); + setContributors(data.contributors_count); } }; - fetchGitHubStars(); + fetchStats(); }, []); return ( @@ -47,90 +60,97 @@ export function StatsSection() {

- {grid.map((feature, index) => ( -
- + {getGrid({ githubStars, dockerDownloads, contributors }).map( + (feature) => ( +
+ -

- {feature.title} - {feature.icon} -

-

- {typeof feature.description === "function" - ? feature.description(githubStars) - : feature.description} -

- {typeof feature.component === "function" - ? feature.component(githubStars) - : feature.component} -
- ))} +

+ {feature.title} + {feature.icon} +

+

+ {feature.description} +

+ {feature.component} +
+ ), + )}
); } -const grid = [ - { - title: "GitHub Stars", - description: (stars: number) => - `With over ${(stars / 1000).toFixed(1)}k stars on GitHub, Dokploy is trusted by developers worldwide. Explore our repositories and join our community!`, - icon: ( - - ), - component: (stars: number) => ( -

- + -

- ), - }, - { - title: "DockerHub Downloads", - description: `Downloaded over ${(statsValues.dockerDownloads / 1000000).toFixed(2).split(".")[0]}M times, Dokploy has become a go-to solution for seamless deployments. Discover our presence on DockerHub.`, - icon: ( - - - - ), - component: ( -

- + -

- ), - }, - { - title: "Community Contributors", - description: `Thanks to our growing base of over ${statsValues.contributors} contributors, Dokploy continues to thrive, with valuable contributions from developers around the world.`, - icon: , - component: ( -

- + -

- ), - }, - { - title: "Sponsors", - description: `More than ${statsValues.sponsors} companies/individuals have sponsored Dokploy, ensuring a steady flow of support and resources. Join our community!`, - icon: , - component: ( -

- + -

- ), - }, -]; +function getGrid({ + githubStars, + dockerDownloads, + contributors, +}: { + githubStars: number; + dockerDownloads: number; + contributors: number; +}) { + return [ + { + title: "GitHub Stars", + description: `With over ${(githubStars / 1000).toFixed(1)}k stars on GitHub, Dokploy is trusted by developers worldwide. Explore our repositories and join our community!`, + icon: ( + + ), + component: ( +

+ + +

+ ), + }, + { + title: "DockerHub Downloads", + description: `Downloaded over ${Math.floor(dockerDownloads / 1000000)}M times, Dokploy has become a go-to solution for seamless deployments. Discover our presence on DockerHub.`, + icon: ( + + + + ), + component: ( +

+ + +

+ ), + }, + { + title: "Community Contributors", + description: `Thanks to our growing base of over ${contributors} contributors, Dokploy continues to thrive, with valuable contributions from developers around the world.`, + icon: , + component: ( +

+ + +

+ ), + }, + { + title: "Sponsors", + description: `More than ${defaultStats.sponsors} companies/individuals have sponsored Dokploy, ensuring a steady flow of support and resources. Join our community!`, + icon: , + component: ( +

+ + +

+ ), + }, + ]; +} export const Grid = ({ pattern,