---
import Demo from "../../components/Demo.astro";
import ProjectPage from "../../components/ProjectPage.astro";

export const metadata = {
    title: "good morning!",
    description: "An app for couples or friends to share daily notices with songs and photos",
    date: "October 2025",
    slug: "good-morning",
    image: "/good-morning-icon.png",
    url: "https://gm.ob248.com",
    github: "https://github.com/hex248/good-morning",
    hidden: false,
    tags: ["Web", "React", "TypeScript", "Go", "PostgreSQL", "AWS S3", "Databases", "OAuth2", "Spotify API"],
    type: "personal",
};
---

<ProjectPage metadata={metadata}>
  <p>
    "good morning!" is a web app I built to help couples or friends share daily
    notices, songs, and photos with each other. It features a simple and
    intuitive interface for sending and receiving messages, along with support
    for photo attachments. The app is built with React and TypeScript on the
    frontend, and Go with PostgreSQL on the backend. Media files are stored
    securely using Cloudflare R2 (AWS S3).
  </p>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="bg-ayu-highlight p-4 rounded mt-4">
      <h2 class="text-lg text-ayu-green-500 mb-2">Key features</h2>
      <ul class="list-disc list-inside space-y-1">
        <li>Create daily notices with photos and Spotify songs</li>
        <li>Simple user interface</li>
        <li>Google OAuth2 authentication for user accounts</li>
      </ul>
    </div>

    <div class="bg-ayu-highlight p-4 rounded mt-4">
      <h2 class="text-lg text-ayu-green-500 mb-2">Technologies</h2>
      <ul class="list-disc list-inside space-y-1">
        <li>React</li>
        <li>TypeScript</li>
        <li>Go</li>
        <li>PostgreSQL</li>
        <li>Cloudflare R2 (AWS S3)</li>
        <li>Spotify API</li>
        <li>OAuth2 Authentication</li>
        <li>Progressive Web App (PWA)</li>
      </ul>
    </div>
  </div>

  <div class="mt-4">
    <h2 class="text-2xl text-ayu-accent mb-3">Demo</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <Demo
        image="/images/good-morning/notice.png"
        title="Notice from partner"
        type="boxed"
      />
      <Demo
        image="/images/good-morning/no-notice.png"
        title="No notice from partner"
        type="boxed"
      />
      <Demo
        image="/images/good-morning/create-notice.png"
        title="Create notice"
        type="boxed"
      />
      <Demo
        image="/images/good-morning/login-with-google.png"
        title="Login with Google"
        type="boxed"
      />
      <Demo
        image="/images/good-morning/partner-pairing.png"
        title="Partner pairing"
        type="boxed"
      />
      <Demo
        image="/images/good-morning/me.png"
        title="'Me' page"
        type="boxed"
      />
    </div>
  </div>
</ProjectPage>
