🚀 Dana Davis's Dev Blog

---

🌟 About

Welcome to danadavis.dev, my personal blog and portfolio built with modern web technologies. This is where I share my experiences, tutorials, project showcases, and insights from my journey as a software engineer.

Sharing is learning!
I started this blog to document and share things I've learned and found useful. Writing helps solidify my understanding and hopefully provides value to the developer community.

✨ Features

• 📝 Blog Posts: Rich MDX-powered articles with code syntax highlighting
• 📚 Books & Movies: Personal recommendations and reviews
• 💼 Projects Portfolio: Showcase of my development projects
• 🔧 Code Snippets: Reusable code snippets and utilities
• 🏷️ Tags System: Organized content by topics
• 🔍 Search Functionality: Powered by KBar for quick navigation
• 🌙 Dark Mode: GitHub dark dimmed theme support
• 📊 Analytics: Umami integration for privacy-focused tracking
• 🗄️ Database: PostgreSQL with Prisma ORM for type-safe operations
• 🔐 Admin Panel: Manage posts, comments, and more
• 🎵 Integrations: Spotify now-playing, GitHub activities, and more
• 📱 Responsive Design: Optimized for all devices

�️ Tech Stack

Category	Technologies
Frontend	Next.js 15 (App Router), React 19, TypeScript
Styling	Tailwind CSS, PostCSS
Content	Contentlayer, MDX
Database	PostgreSQL (Supabase), Prisma ORM
Analytics	Umami
Linting	Biome
Deployment	Vercel

🔄 Additions and Changes from Original Repository

This blog is forked and heavily customized from leohuynh.dev, a Next.js starter blog. Here are the key additions and modifications:

🎨 Visual & UI Enhancements

• Hero Parallax Landing: Custom animated hero section with infinite scrolling projects/blog posts, kinetic typography, and interactive parallax effects built with Framer Motion
• Custom Color Scheme: Implemented Black, Orange, and Green theme (replacing default blues)
• Interactive Header Section: Dynamic mouse-tracking effects, animated title reveals, and glitch-style typography
• Responsive Animations: Separate mobile and desktop animation strategies for optimal performance
• Enhanced Components: Custom UI components with advanced motion effects and styling

� Content Management

• Books & Movies Sections: Personal book and movie tracking with ratings and filtering system
• Code Snippets: Dedicated section for sharing reusable code snippets with tagging
• Comprehensive Tags System: Organized content discovery across all sections
• Rich Media Support: Better handling of images, videos, and media in posts

🔧 Content Management System & Authentication

• Themed CMS Admin Panel: Full-featured dashboard for managing blog posts, media, and comments

  • Add/Edit/Delete posts with Novel.sh rich text editor
  • Post management with filtering and organization
  • Built-in authentication with Kinde Auth for secure access
  • Comprehensive metadata management (tags, categories, images, canonical URLs)
  • Draft and featured post toggles for content workflow

• Captain's Log: Voice-to-text note-taking system with AI-powered analysis

  • Record audio notes that are automatically transcribed using OpenAI Whisper
  • AI summarization and content type classification (thought, idea, blog-draft, project-idea, note)
  • Automatic tagging and potential identification for blog posts and projects
  • Full editing capabilities with privacy controls and metadata tracking

• Comments: User authentication via Kinde Auth for secure commenting

  • Threaded conversations with nested replies
  • Like/reaction system for comment engagement
  • Markdown support for rich text formatting

• Novel.sh Editor: Advanced AI-powered WYSIWYG editor with support for formatting, links, images, code blocks, and slash commands

• Type-Safe Database: PostgreSQL with Prisma ORM for dynamic content management and querying

• Admin Dashboard: Secure access to manage all content through an authenticated interface

🔗 API Integrations & Data

• GitHub Integration: GitHub GraphQL API for displaying user activities and contributions
• Spotify Integration: Now-playing track display with album artwork and playback info
• RSS Feed Generation: Automated RSS feed creation from blog posts
• Newsletter Support: Email subscription API endpoint
• Post Metadata: Dynamic post views tracking and engagement metrics

📊 Analytics & Features

🚀 Getting Started with Deployment

Before deploying to production, you'll need to gather API credentials from various services. Here's a straightforward guide to get all the keys you need:

Prerequisites

• A Vercel account (for hosting)
• A GitHub account (for repository connection)
• Browser access to set up services

Supabase (PostgreSQL Database)

1. Go to supabase.com and sign in
2. Click "New Project" and select your organization
3. Enter a project name and set a strong database password
4. Choose a region close to your users
5. Wait for the project to be created (~2 minutes)
6. Navigate to Settings > Database
7. Copy the Connection String (choose "URI" format) and set it as DATABASE_URL

Environment Variable: DATABASE_URL

Kinde Auth (Admin Dashboard Protection)

1. Visit kinde.com and create a free account
2. Go to Settings > Applications in your dashboard
3. Click "Create Application" and name it (e.g., "My Blog")
4. Copy these credentials:
   • Client ID → KINDE_CLIENT_ID
   • Client Secret → KINDE_CLIENT_SECRET (click "View Secret")
5. Go to Settings > Applications > Details
6. Under "Allowed callback URLs," add: https://yourdomain.com/api/auth/kinde/callback
7. Under "Allowed logout redirect URLs," add: https://yourdomain.com

Environment Variables:

• KINDE_CLIENT_ID
• KINDE_CLIENT_SECRET
• KINDE_ISSUER_URL (format: https://yourdomain.kinde.com)
• KINDE_SITE_URL (your production URL)
• KINDE_POST_LOGOUT_REDIRECT_URL
• KINDE_POST_LOGIN_REDIRECT_URL
• SITE_URL (your production URL, e.g., https://danadavis.dev)

GitHub API Token

1. Go to github.com/settings/tokens
2. Click "Generate new token" → "Generate new token (classic)"
3. Name it "Blog API" and set expiration (90 days recommended)
4. Check these scopes:
   • repo (full control of private repositories)
   • read:user (read user profile data)
5. Click "Generate token" and copy it immediately (it won't show again)

Environment Variable: GITHUB_API_TOKEN

Spotify API Credentials

1. Go to developer.spotify.com/dashboard
2. Log in with or create a Spotify account
3. Click "Create App" and accept the Developer Terms
4. Fill in the form:
   • App Name: "My Blog"
   • App Description: "Displays currently playing track"
5. Copy the credentials:
   • Client ID → SPOTIFY_CLIENT_ID
   • Client Secret → SPOTIFY_CLIENT_SECRET (click "Show Client Secret")
6. Click "Edit Settings" and add Redirect URI:
   • https://yourdomain.com/api/spotify/callback

To Get Refresh Token:

After deploying, visit your deployed app's authorization URL:

https://accounts.spotify.com/authorize?client_id=YOUR_CLIENT_ID&response_type=code&redirect_uri=https://yourdomain.com/api/spotify/callback&scope=user-read-currently-playing

This will redirect to your callback page with an authorization code. Use this to generate a refresh token (detailed instructions in the callback page).

Environment Variables:

• SPOTIFY_CLIENT_ID
• SPOTIFY_CLIENT_SECRET
• SPOTIFY_REFRESH_TOKEN (obtain via authorization flow)

Umami Analytics

1. Go to umami.is and create an account
2. Create a new website and enter your domain
3. Copy the Tracking ID

Environment Variable: NEXT_UMAMI_ID

OpenAI API Key (For Captain's Log Transcription)

1. Go to platform.openai.com and sign in or create an account
2. Navigate to API Keys in your account settings
3. Click "Create new secret key"
4. Name it "My Blog's - Captain's Log" and copy the key immediately (it won't show again)
5. Note: You'll need to add credit to your OpenAI account to use the Whisper API for transcription

Environment Variable: OPENAI_API_KEY

1. Go to stripe.com and create an account
2. Go to Developers > API Keys
3. Copy your Secret Key (Test Mode) → STRIPE_SECRET_KEY

Environment Variables:

• STRIPE_SECRET_KEY

1. Go to vercel.com and sign in with GitHub
2. Click "Add New" > "Project"
3. Select your blog repository from GitHub
4. Click "Import"
5. Go to Settings > Environment Variables
6. Add all the environment variables from above
7. Click "Deploy"

---