Egg Community: A Modern Social Platform for the Egg Antifan Community

Discover Egg Community, a social web app built with Next.js, ElysiaJS, Prisma, and TailwindCSS. Explore its features, tech stack, and how it brings people together.

social networknextjselysiajstailwindcsstypescriptprismacloudinaryweb development

28/04/2024

Introduction

Egg Community is a feature-rich, modern social platform created for the egg antifan community. Built with cutting-edge web technologies like Next.js, ElysiaJS, Prisma, and TailwindCSS, it delivers a smooth, beautiful, and functional user experience for sharing posts, images, and discussions.

View the repo on GitHub

View the live demo

Key Features

Social Posting: Users can create, edit, and delete rich-text posts, optionally with images.
Comments & Likes: Engage with others via comments and like buttons on each post.
User Profiles: Each user has a profile with avatar, name, and their own posts.
Image Uploads: Uses Cloudinary for fast, reliable, and scalable media storage.
Authentication: Session-based authentication with user context for secure, personalized experiences.
Responsive UI: Built with TailwindCSS for a seamless experience on all devices.
SEO & Metadata: Custom SEO configuration for better search engine visibility and shareability.
Dark Mode: Theming support out of the box.

Technical Stack

Frontend: Next.js (React), TypeScript, TailwindCSS
Backend: ElysiaJS API, Prisma ORM for database interactions
Authentication: Session management with React context and server-side session checks
Media Storage: Cloudinary integration for image uploads and management
SEO: Dynamic meta tags via a central seo utility
Database: Prisma ORM with environment-based logging for local development and production

Architectural Highlights

Modular Components: UI and logic are split into reusable React components, including post menus, comment menus, and session providers.
API Communication: Uses @elysiajs/eden and a typed API client for seamless, type-safe client-server interaction.
Session Context: The SessionProvider React context shares user and session information throughout the app.
Cloudinary File Handling: Server-side utilities to upload and delete images, keeping media management simple and robust.
Loading States: Custom loading pages and animated spinners for smooth navigation.

Example: Post Page Workflow

When a user navigates to a post:

Server Auth: User authentication is checked server-side for personalized experience.
Fetch Post: The post data, including author details, content, images, and comments, is fetched from the API.
Render: The post is rendered with author info, content, image (if any), and interactive like/comment features.
Interactions: Users can like, comment, and (if they are the author) edit or delete their post.

Why Egg Community Stands Out

Performance: Built on Next.js app directory with server components for fast loading.
Modern Stack: Combines the best of React, TypeScript, and serverless APIs.
Developer Experience: Clean, well-organized code with full TypeScript support and environment-based configuration for easy scaling.

Conclusion

Egg Community illustrates how to build a next-generation social network with today's web technology stack. Whether you're part of the egg antifan community or just looking for a reference for your own social app, this project provides a strong foundation, modern patterns, and extensibility.