mirror of
https://github.com/hex248/ob248.com.git
synced 2026-02-08 10:43:38 +00:00
100 lines
3.4 KiB
Plaintext
100 lines
3.4 KiB
Plaintext
---
|
|
import ProjectPage from "../../components/ProjectPage.astro";
|
|
import Demo from "../../components/Demo.astro";
|
|
|
|
export const metadata = {
|
|
title: "glimpse",
|
|
description: "Simple social media app inspired by early Instagram.",
|
|
date: "May 2025",
|
|
slug: "glimpse",
|
|
image: "/glimpse-icon.svg",
|
|
url: "https://glimpse.ob248.com",
|
|
github: "https://github.com/hex248/glimpse",
|
|
hidden: false,
|
|
tags: [
|
|
"Web",
|
|
"React",
|
|
"TypeScript",
|
|
"PostgreSQL",
|
|
"Blob Storage",
|
|
"Databases",
|
|
],
|
|
type: "personal",
|
|
};
|
|
---
|
|
|
|
<ProjectPage metadata={metadata}>
|
|
<p class="mb-4">
|
|
"glimpse" is a full-stack social app for sharing photos with friends and
|
|
building real community. Early Instagram and tumblr were huge
|
|
inspirations, no influencers and brands, just keeping up with your
|
|
friends and family. Sign in with Google, and immediately access a
|
|
dynamic feed, view and comment on posts. Choose your profile colour, and
|
|
enable push notifications for new posts, comments, and friend requests.
|
|
</p>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="bg-ayu-highlight p-4 rounded">
|
|
<h2 class="text-lg text-ayu-green-500 mb-2">Key features</h2>
|
|
<ul class="list-disc list-inside space-y-1">
|
|
<li>Photo uploads with caption & cropping function</li>
|
|
<li>User profiles with customisable colour themes</li>
|
|
<li>Dynamic, server-rendered feed of friends' photos</li>
|
|
<li>Commenting on posts</li>
|
|
<li>User search</li>
|
|
<li>Push notifications</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="bg-ayu-highlight p-4 rounded">
|
|
<h2 class="text-lg text-ayu-green-500 mb-2">Technologies</h2>
|
|
<ul class="list-disc list-inside space-y-1">
|
|
<li>Next.js + TypeScript</li>
|
|
<li>Prisma ORM + PostgreSQL</li>
|
|
<li>Tailwind CSS</li>
|
|
<li>Google OAuth with NextAuth.js</li>
|
|
<li>Web Push API</li>
|
|
<li>Next.js Server-side rendering & API routes</li>
|
|
<li>Progressive Web App (PWA)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<h2 class="text-2xl text-ayu-accent mb-3">Screenshots</h2>
|
|
<div
|
|
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
|
|
>
|
|
<Demo
|
|
image="/images/glimpse/feed.png"
|
|
title="Feed view"
|
|
type="boxed"
|
|
/>
|
|
<Demo
|
|
image="/images/glimpse/crop.png"
|
|
title="Share - write a caption + crop"
|
|
type="boxed"
|
|
/>
|
|
<Demo
|
|
image="/images/glimpse/comments.png"
|
|
title="Comments & interactions"
|
|
type="boxed"
|
|
/>
|
|
<Demo
|
|
image="/images/glimpse/profile.png"
|
|
title="Profile (custom colours)"
|
|
type="boxed"
|
|
/>
|
|
<Demo
|
|
image="/images/glimpse/settings.png"
|
|
title="Settings"
|
|
type="boxed"
|
|
/>
|
|
<Demo
|
|
image="/images/glimpse/search.png"
|
|
title="User search/discovery"
|
|
type="boxed"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</ProjectPage>
|