Pytknap - "Pyt med det!" 🔴

A Danish web app featuring a big red button that displays encouraging "pyt med det" (it doesn't matter) quotes. Share your quotes on social media!

🚀 Quick Start

1. Install Dependencies

npm install

2. Set Up Supabase Database

1. Go to https://supabase.com and create a free account
2. Create a new project
3. Go to the SQL Editor and run this query to create the quotes table:

CREATE TABLE quotes (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  quote TEXT NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL
);

-- Enable Row Level Security
ALTER TABLE quotes ENABLE ROW LEVEL SECURITY;

-- Create policy to allow reading all quotes
CREATE POLICY "Allow public read access" ON quotes
  FOR SELECT USING (true);

-- Create policy to allow inserting quotes
CREATE POLICY "Allow public insert access" ON quotes
  FOR INSERT WITH CHECK (true);

-- Create policy to allow deleting quotes
CREATE POLICY "Allow public delete access" ON quotes
  FOR DELETE USING (true);

4. Get your project URL and anon key from Settings > API

3. Configure Environment Variables

1. Copy the example env file:

cp .env.local.example .env.local

2. Edit .env.local and add your Supabase credentials:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Run Development Server

npm run dev

Open http://localhost:3000 to see your app!

📦 Deploy to Vercel

Step 1: Push to GitHub

1. Create a new GitHub repository
2. Push your code:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/yourusername/pytknap.git
git push -u origin main

Step 2: Deploy to Vercel

1. Go to https://vercel.com
2. Sign in with GitHub
3. Click Add New > Project
4. Import your pytknap repository
5. Add your environment variables:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
6. Click Deploy

Your app will be live in ~2 minutes! 🎉

🏗️ Project Structure

pytknap-nextjs/
├── app/
│   ├── api/
│   │   └── quotes/
│   │       └── route.ts          # API endpoints for quotes
│   ├── components/
│   │   ├── PytButton.tsx         # Big red button
│   │   ├── QuoteDisplay.tsx      # Quote display with share buttons
│   │   └── Sidebar.tsx           # Navigation sidebar
│   ├── upload/
│   │   └── page.tsx              # Quote management page
│   ├── globals.css               # Global styles
│   ├── layout.tsx                # Root layout
│   └── page.tsx                  # Home page
├── lib/
│   └── supabase.ts               # Supabase client configuration
└── .env.local                    # Environment variables (not in git)

🎨 Features

• ✅ Big red "PYT" button
• ✅ Random quote display
• ✅ Social media sharing (Facebook, Instagram, LinkedIn)
• ✅ Upload and manage quotes
• ✅ Collapsible sidebar (mobile-friendly)
• ✅ Supabase database integration
• ✅ Responsive design with Tailwind CSS

🛠️ Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Database: Supabase (PostgreSQL)
• Hosting: Vercel

📝 Adding Default Quotes to Database (Optional)

If you want to seed your database with the default quotes, run this in Supabase SQL Editor:

INSERT INTO quotes (quote) VALUES
('Du blev fyret uden grund? Pyt med det! Der findes bedre jobs derude.'),
('En kunde råbte af dig? Pyt med det! Deres dårlige dag er ikke dit problem.'),
('Missede bussen? Pyt med det! Den næste kommer snart.'),
('Spildte kaffe på skjorten? Pyt med det! Det giver karakter.'),
('Fik du en parkeringsbøde? Pyt med det! Pengene kommer igen.'),
('Regnede på din ferie? Pyt med det! Hygge indendørs er også godt.'),
('Telefonen døde? Pyt med det! Nyd stilheden.'),
('Glemte nøglerne? Pyt med det! Tag en pause og slap af.');

📱 Social Media Sharing

• Facebook: Opens Facebook share dialog
• LinkedIn: Opens LinkedIn share dialog
• Instagram: Copies quote to clipboard (Instagram doesn't support web sharing)

🤝 Contributing

Feel free to open issues or submit pull requests!

📄 License

MIT License - feel free to use this project for your own purposes.