DevThreads

A Threads-inspired social app built with a React + Vite frontend and an Express/PostgreSQL backend. Users authenticate via GitHub and can post, reply, like, and follow others.

View Live · Report Bug

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. License
5. Contact
6. Acknowledgments

About The Project

Social platforms like Threads are something most developers use daily but rarely think about building. The mechanics underneath (auth, social graphs, threaded replies, etc...) are deceptively simple on the surface and worth understanding from the inside out.

DevThreads is a full-stack microblogging app where users authenticate with GitHub, which pulls in their handle and avatar automatically. From there, they can write posts, reply to others, like content, and follow users.

The backend is an Express API backed by PostgreSQL, with Prisma as the ORM. Authentication is handled via Passport.js using the GitHub OAuth strategy, with sessions managed through JWTs. The frontend is built with React and Vite, communicating with the API over REST.

The frontend is deployed on Vercel and the backend runs on a self-managed Hetzner VPS, giving full control over the server environment end to end.

(back to top)

Built With

• 
• 
• 
• 
• 
• 
• 
• 
• OAUTH
• Frontend hosted on
• Backend hosted on a vps

(back to top)

Getting Started

To get a local copy up and running follow these steps.

Prerequisites

• Node.js 18+
• npm
• A PostgreSQL database (local or hosted)
• A GitHub OAuth App

Installation

1. Clone the repo

   git clone https://github.com/RichardGabelman/social-network-fullstack.git

2. Navigate to the backend directory and install dependencies

   cd backend
   npm install

3. Create a .env file and fill in your values

   DATABASE_URL="postgresql://user:password@localhost:5432/dbname"
   JWT_SECRET="your_jwt_secret"
   GITHUB_CLIENT_ID="your_github_client_id"
   GITHUB_CLIENT_SECRET="your_github_client_secret"
   GITHUB_CALLBACK_URL="backend_base_url(default is http://localhost:3000)/api/auth/github/callback"
   CLIENT_ORIGIN="frontend_url(default is http://localhost:5173)"

4. Run Prisma migrations

   npx prisma migrate dev

5. Start the backend server

   npm run dev

6. Navigate to the frontend directory and install dependencies

   cd frontend
   npm install

7. Create a .env file and point it at your backend

   VITE_API_URL="backend_base_url(default is http://localhost:3000)"

8. Start the frontend dev server

   npm run dev

The frontend will by default be running at http://localhost:5173.

(back to top)

Usage

Once both servers are running, open http://localhost:5173 in your browser.

Sign in with your GitHub account to get started. From there you can:

• Create text posts
• Reply to and like posts
• Follow other users
• Edit your display name and bio from your profile

Try the live app at devthreads.richardgabelman.com.

(back to top)

License

Distributed under the MIT. See LICENSE for more information.

(back to top)

Contact

Richard Gabelman - @RichardGabelman - hello@richardgabelman.com

Project Link: https://github.com/RichardGabelman/social-network-fullstack

(back to top)

Acknowledgments

• The Odin Project
• Best-README-Template - for the README template

(back to top)