mirror of
https://github.com/hex248/ob248.com.git
synced 2026-02-07 18:23:04 +00:00
107 lines
2.9 KiB
TypeScript
107 lines
2.9 KiB
TypeScript
import { Demo } from "@/components/Demo";
|
|
import { ProjectPage } from "@/components/ProjectPage";
|
|
|
|
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",
|
|
};
|
|
|
|
export function GoodMorningProject() {
|
|
return (
|
|
<ProjectPage metadata={metadata}>
|
|
<p className="text-pretty">
|
|
"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 className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="bg-muted p-4 rounded mt-4">
|
|
<h2 className="text-lg text-green-500 mb-2 text-balance">
|
|
Key features
|
|
</h2>
|
|
<ul className="list-disc list-inside space-y-1 text-pretty">
|
|
<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 className="bg-muted p-4 rounded mt-4">
|
|
<h2 className="text-lg text-green-500 mb-2 text-balance">
|
|
Technologies
|
|
</h2>
|
|
<ul className="list-disc list-inside space-y-1 text-pretty">
|
|
<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 className="mt-4">
|
|
<h2 className="text-2xl text-accent mb-3 text-balance">Demo</h2>
|
|
<div className="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>
|
|
);
|
|
}
|