Tafa3ul

Tafa3ul is a social media app built for developers to share posts, showcase their profiles, connect with peers, and find opportunities. The name "Tafa3ul" means "interaction" in Arabic, reflecting the app's focus on fostering engagement and collaboration among developers.

Features

• Authentication with JWT access + refresh tokens
• Developer profiles with bio, socials, skills, experience, and education
• Public app users with search and pagination
• Feed with posts, images, likes, comments and infinite scroll
• Post and profile search (server-backed)
• Role-based authorization
• Responsive UI with light/dark mode support

Tech Stack

Frontend

• React 19 + TypeScript
• Bun v1.3
• Vite v7
• Tailwind CSS and Shadcn UI
• TanStack Query v5
• React Router v7
• Zustand for state management
• React Hook Form with Zod validation
• Axios, Sonner, Lucide + React Icons

Backend

• .NET 10 (ASP.NET Core Web API)
• Entity Framework Core 10
• PostgreSQL (Npgsql)
• JWT auth (access + refresh tokens)
• Scalar OpenAPI (dev-time API docs)
• ImageSharp (image processing)

Project Structure

.
├─ client/                 # React frontend
├─ server/                 # .NET backend
│  ├─ Tafa3ul.Api/         # Web API
│  ├─ Tafa3ul.Core/        # Business logic
│  ├─ Tafa3ul.Data/        # EF Core + migrations
│  └─ Tafa3ul.Domain/      # Domain models + DTOs
└─ showcase/               # Screenshots

Environment Variables

Client (client/.env)

Check client/.env.example

• VITE_BASE_URL: Base URL of the backend (used for absolute links)
• VITE_API_BASE_URL: API base path for HTTP calls
• VITE_PROFILE_PIC_BASE_URL: Static profile image base URL

Server (server/Tafa3ul.Api/appsettings.json)

Check server/Tafa3ul.Api/appsettings.Development.json or server/.env.example

• ConnectionStrings:DefaultConnection: PostgreSQL connection string
• Jwt:Key, Jwt:Issuer, Jwt:Audience, Jwt:ExpirationMinutes, Jwt:RefreshTokenExpirationDays

To connect to a managed PostgreSQL instance like Neon, you can use the connection string provided by the service. make sure to set the env in terminal before running the server:

Windows PowerShell:

$env:ConnectionStrings__DefaultConnection='****'

Linux/MacOS:

export ConnectionStrings__DefaultConnection="****"

wwwroot folder

wwwroot is used to serve static files (profile pictures and post images). In production, these should be stored in a cloud storage service like AWS S3 or Azure Blob Storage.

wwwroot/
├─ profile-images/
├─ post-images/

Docker

Dockerfile for the backend API is included in the root. To build and run the API in a container:

docker build -t tafa3ul-api .

Choose ASPNETCORE_ENVIRONMENT to Production or Development command based on your needs.

docker run --rm -p 8080:8080 `
  -e ASPNETCORE_ENVIRONMENT=Production `
  -e ConnectionStrings__DefaultConnection="LOCAL_OR_EXTERNAL_DB_CONNECTION_STRING" `
  -e Jwt__Key="KEY_LENGTH_MUST_BE_32_CHARACTERS_OR_MORE" `
  -e Jwt__Issuer="Tafa3ul" `
  -e Jwt__Audience="Tafa3ulClient" `
  -e Jwt__ExpirationMinutes=60 `
  -e Jwt__RefreshTokenExpirationDays=7 `
  tafa3ul-api

(Use backslashes \ instead of ` on macOS/Linux.)

API Overview

The API is organized around three main areas:

• Auth: register, login, refresh token, logout, role-protected endpoints
• Profiles: create/update profile, upload avatar, add skills/experience/education, user lookup, list/search profiles
• Posts: create posts (with images), list/search posts, like/unlike, add/delete comments

Scripts

Frontend (client)

• dev: Start Vite dev server
• build: Type-check + production build
• lint: ESLint
• preview: Preview production build

Notes

• CORS is configured for http://localhost:5173 and https://localhost:5173 in development.
• OpenAPI + Scalar docs are enabled in development builds of the API.