Social Network: Building a programming knowledge sharing social network

Introduction

Social Network is a website that I developed in University.

Source code: pchihieuu/social-media-app

Prerequisites

• Docker Desktop for Mac (2.2.0.0 or later) or Docker for Linux or Docker for Windows (if you’re using WSL2)
• docker-compose version 2 or later is required
• Languages used: Go >= 1.22
• Node
• Git
• Postgres

Highlighted features

• Allow users to share text, code snippets, and media (images, videos)
• Separate endpoints for interacting (like/comment) on post
• Managing user relationships and connections
• Finding others users within the platforms
• Delivering a personalized news feed based on users they follow
• Real-time channel for delivering event notifications (new likes, comments, follows).
• Supporting instant, direct messaging between users.

System architecture

Build project from source

Install backend

1. Clone the project:

git clone https://github.com/pchihieuu/social-media-app.git
cd social-media-app

2. Copy environment variables

cp .env.example .env

3. Run docker-compose docker compose up -d --build

• Backend run at port: localhost:8080
• Postgres database run at port: localhost:5432
• Promethues: http://localhost:9090
• Grafana: http://localhost:9090

Install frontend

1. Clone the project:

git clone https://github.com/pchihieuu/social-network.git
cd social-network

2. First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

3. Run the prisma database server:

npx prisma db push
# and
npx prisma studio

• Open http://localhost:3000 with your browser to see the result.

• You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file. This project uses next/font to automatically optimize and load Inter, a custom Google Font.

• Follow Next.js Documentation - learn about Next.js features and API.

Features screenshots

Home page

• Display posts
• View other users information
• Posting frame
• Like, comment and bookmarks a post

Notifications page

Include: like, comment and bookmarks a post

Messages page

• Chat group support: text, images, videos. Emotional interaction, once - once reply
• Search member to group chat
• Add members to group chat

Profile page

• Display profile page
• Display information users on the system
• Edit profile

Bookmarks page

Search page

Search by keyword and hashtag