Welcome to the ArabDev Wiki

ArabDev is a social and professional platform where developers publish technical posts, follow each other's work, discuss code in comments, and discover projects through tags, trending posts and search.

It was built first for the Arabic-speaking developer community. The whole interface works in Arabic from right to left and in English from left to right, and a single post can mix both languages: every paragraph picks its own direction.

This wiki explains how every part of ArabDev works. It is written for three kinds of readers: people using ArabDev, people who want to understand how their data and account are protected, and developers who run the platform or build on its API.

The wiki opens in its own browser tab so you can keep it next to ArabDev while you work. Use the search box at the top (or press /) to jump to any topic.

Start with these

Many ArabDev posts explain an idea in Arabic and show the code in English. The editor handles this without any extra steps. Each paragraph, heading, list item and table cell is marked with an automatic direction, so an Arabic paragraph lines up on the right and an English one on the left inside the same post.

Code blocks are always shown left-to-right, whatever language surrounds them. Hashtags and @mentions are isolated from the surrounding text, so @layla_dev stays readable even in the middle of an Arabic sentence.

Main article: Writing posts. See also: Accessibility and languages.

Did you know…

  • …that the home feed shows exactly 20 posts per page, with numbered pages instead of endless scrolling? (The home feed)
  • …that an ad appears only after every 8 posts, and ads are chosen by page and language only, never by your personal data? (Ads on ArabDev)
  • …that every uploaded image is re-encoded, which removes hidden photo metadata such as GPS location? (Privacy and safety)
  • …that typing ## followed by a space in the editor turns the line into a heading? (Formatting reference)
  • …that #js, #JavaScript and #javascript all end up in the same tag? (Tags and interests)
  • …that you can hide yourself from search and suggestions while keeping your profile reachable by direct link? (Settings)
  • …that ArabDev is free software under the GNU GPL, so anyone can read exactly how it handles data? (Contributing and license)

Browse by section

About this wiki

This wiki documents ArabDev version 1.0.0. When a new version changes how something works, the matching article is updated and the change is listed in the patch notes.

The wiki is a set of static pages. It has no accounts, no comments, no analytics and no tracking. The only thing it remembers is your light or dark mode choice, which it shares with ArabDev in your browser's local storage.

Categories: WikiStart here

Getting started

This article walks you through your first ten minutes on ArabDev: creating an account, signing in, the four-step setup that runs on your first visit, and what to do next.

Creating an account

Open arabdev.site and choose Create account. You need four things:

  1. Username, the unique handle people use to mention you (for example @layla_dev).
  2. Email address, used to sign in and to reset your password. It is never shown on your profile.
  3. Password, entered twice to make sure there is no typo.
  4. The interface language you are using when you sign up is saved as your starting preference. You can change it at any time.

As you type a username, ArabDev checks whether it is free and shows a green check mark or a message such as "This username is already taken". When you leave the email field it also checks that no account already uses that address.

Username rules

  • 3 to 20 characters long.
  • English letters (a–z), numbers (0–9) and the underscore (_) only.
  • Must start with a letter.
  • Not case-sensitive: Layla_Dev is saved as layla_dev.
  • A few names are reserved because they are used by the site itself, for example admin, api, settings, explore, search, notifications, privacy, support and arabdev.

Your display name is separate and can be written in any script, including Arabic. See Profiles.

Password rules

  • At least 8 characters and at most 128.
  • Must contain at least one letter and at least one number.
  • Must not be too repetitive (a password made of three or fewer distinct characters is refused).

A strength bar under the password field rates your choice as weak, fair, good or strong while you type. It gives the best rating to longer passwords that mix upper- and lower-case letters, numbers and symbols. The server applies the rules above no matter what the bar shows.

Tip

A long passphrase of four or five unrelated words plus a number is both strong and easy to remember. A password manager is even better.

Signing in

Sign in with your email address and password. Creating an account signs you in automatically, so you only need this page when you come back.

  • Keep me signed in (checked by default) keeps you signed in on this browser for up to 30 days.
  • If you uncheck it, your session ends when you close the browser, and in any case after 12 hours.
  • If you type the wrong email or password, ArabDev says only "Email or password is incorrect". It never reveals whether an email address has an account.
  • After 10 attempts in one minute from the same network, sign-in pauses briefly. Wait a moment and try again.

Forgot your password? See Resetting a forgotten password.

First visit: setting up your profile

The first time you arrive after creating an account, ArabDev opens a short setup window. It has four steps, a progress bar and a counter such as "Step 2 of 4". Every step has a Skip button, and the × button in the corner closes the window for good. You can finish anything you skipped later from Settings.

Step 1: profile picture

Choose Upload photo and pick an image. A circular preview appears straight away while the image uploads. You can replace it or remove it before moving on. Accepted formats are JPEG, PNG, WebP and GIF, up to 5 MB and at least 96×96 pixels.

Step 2: username, display name and bio

Adjust your username if you like (the same availability check runs), set a display name of up to 50 characters, and optionally write a short bio of up to 280 characters. A counter under the bio shows how many characters you have used.

Step 3: interests

Pick the topics you work with, such as Python, React, DevOps or UI/UX. You can choose as many as you like; picking at least three gives better suggestions. Selected topics show a check mark and a tinted background.

Step 4: developers to follow

ArabDev suggests up to eight developers based on the interests you just chose. Each card shows their picture, name, username, bio and interests with a Follow button. Follow as many as you like, then choose Go to my feed.

What to do next

  1. Read your home feed and switch between the For you, Following and Latest tabs.
  2. Write your first post: choose Create post in the navigation. See Writing posts.
  3. Visit Explore to find trending posts, popular tags and more people to follow.
  4. Review your privacy settings and notification preferences.
  5. Pick light or dark mode and your preferred language under Settings → Appearance.

Finding your way around

Screen sizeNavigation
Large screens (1200 px and wider)A navigation column with labels (Home, Explore, Notifications, Bookmarks, Profile, Settings and a Create post button), the main column, and a side column with suggested developers, one ad and popular tags.
Tablets (900–1199 px)A narrow column of icons with tooltips, plus the main column. The side column is hidden.
Phones (under 900 px)A bar along the bottom with Home, Explore, a red Create button, Notifications and Profile. Search is the magnifying glass at the top.

Your picture in the top corner opens the account menu, with links to Edit profile, Drafts, Bookmarks and Settings, quick theme and language switches, links to this wiki, the privacy policy and the patch notes, and Sign out.

Categories: Start hereAccounts

Profiles

Every member has a public profile at /u/username, for example /u/layla_dev. A profile shows who someone is, what they work on and what they have written.

What a profile shows

  • Profile picture, or the initials of the display name if there is no picture.
  • Display name and @username.
  • A Follows you badge when that person follows you.
  • Bio, location and website, if filled in.
  • Joined month and year.
  • Counts of Following, Followers and Posts. The first two open the full lists, unless the person keeps them private.
  • Interests as chips. Each chip opens the matching tag page.
  • A Follow button on other people's profiles, or Edit profile on your own.

Profile tabs

TabContentsWho can see it
PostsPosts the person wrote and posts they reposted, newest activity first. Reposts carry a "reposted" label.Everyone
RepliesComments the person wrote, each with a link to the post it was written on.Everyone
SavedPosts you bookmarked.Only you, on your own profile

All three tabs are split into pages of 20 with numbered page links at the bottom.

Editing your profile

Open Edit profile from your profile or the account menu. The same editor is also under Settings → Profile.

FieldLimitsNotes
Display name1–50 charactersAny language. Leading and trailing spaces are removed.
Username3–20 charactersSame rules as at sign-up. Changing it changes your profile link.
BioUp to 280 charactersOptional. Line breaks are kept.
LocationUp to 60 charactersOptional. Free text; ArabDev never uses it for anything else.
WebsiteUp to 200 charactersOptional. If you leave out https:// it is added for you.
InterestsAny of the 25 topicsUsed for your feed and suggestions. See Tags and interests.

The Save button stays disabled until you change something. If a field has a problem, such as a taken username, the message appears under that field.

Changing your username

Your old profile link stops working and the old name becomes available to others. Links other people shared and @mentions in old posts still use the old name.

Profile pictures

  • Formats: JPEG, PNG, WebP or GIF.
  • Size: up to 5 MB.
  • Dimensions: at least 96×96 pixels, at most 8000 pixels on any side.
  • ArabDev crops the image to a centered square, resizes it to 400×400 pixels and saves it as WebP. Animated GIFs become still images.
  • Re-encoding removes hidden metadata such as the camera model and GPS location.
  • When you replace or remove a picture, the previous file is deleted from storage.

Followers and following lists

Open the lists from the counts on a profile, or go to /u/username/followers and /u/username/following. Each person is shown as a card with their bio, interests and a follow button. If someone has turned off Show my followers and following lists, other people see "This account keeps its connections private" instead. The owner can always see their own lists.

Categories: AccountsCommunity

The home feed

The home feed is the first page you see after signing in. It has three tabs, a quick way to start a post, and numbered pages rather than an endless scroll.

The three tabs

For you

The default tab. It shows every post on ArabDev, arranged like this:

  1. Posts are grouped by the day they were published (in Coordinated Universal Time), newest day first.
  2. Within the same day, posts from people you follow come first, then posts tagged with one of your interests, then everything else.
  3. Within each of those groups, the newest post comes first.

This keeps the feed fresh while making sure that people and topics you chose are not buried under the day's other posts. No post is hidden; For you only changes the order.

Following

Only posts from you and the people you follow, plus the posts those people reposted. If several people you follow repost the same post, it appears once, at the time of the most recent repost, with a label such as "Omar Khatib reposted".

Latest

Every post, strictly newest first, with no ranking at all.

The tab you pick is kept in the address bar (for example /dashboard?tab=following), so reloading the page or sharing the link keeps the same view.

Pages instead of infinite scroll

ArabDev deliberately does not load posts endlessly as you scroll. The feed shows at most 20 posts per page. At the bottom you find:

  • Previous and Next buttons.
  • Numbered page links such as 1 2 3 … 20 on larger screens, or "Page 2 of 5" on phones.

The page number is part of the address (?page=2), so you can come back to exactly where you were. When you change page, the view returns to the top, and the previous page stays visible, slightly faded, until the next one arrives, so the screen never flashes blank.

Why pages?

Pages give the feed a natural end, make it easy to find a post again, and keep the app light: the server only ever sends 20 posts at a time.

What a post looks like in the feed

  • The author's picture, display name, @username and how long ago the post was published (hover to see the exact date and time). An "edited" note appears if the author changed it.
  • The title, or "by" and the author's name if the post has no title.
  • The beginning of the post. Long posts are cut at about 300 pixels with a gentle fade and a Read more link.
  • The attached image and link, if any, and the post's tags.
  • The action row: comment, repost, like, save and share, each with its count when it is above zero.

Clicking anywhere on a post opens it, except on links, buttons and text you are selecting.

Starting a post from the feed

The box at the top of the feed ("What are you working on?") and the Write a post button both open the full post editor. See Writing posts.

Ads in the feed

An ad appears after every 8 posts: after the 8th and the 16th post of each page, so at most two per page. Ads are clearly labelled and never look like posts.

Main article: Ads on ArabDev.

When the feed is empty

  • If nobody has posted yet, you see "No posts yet" and a Create your first post button.
  • If the Following tab is empty, you see "Nothing from people you follow" and a button that takes you to Explore to find developers.
Categories: FeedDiscovery

Writing posts

Posts are the heart of ArabDev: tutorials, questions, project announcements, tips and write-ups. The editor gives you everything a technical post needs, such as headings, code, tables and links, without turning into a word processor.

For every button and shortcut, see Formatting reference.

Opening the editor

Choose Create post in the navigation (the red + on phones), the Write a post button on the home feed, or open one of your drafts. The editor has:

  • A title field at the top (optional, up to 200 characters).
  • The toolbar, which stays pinned under the top bar while you scroll a long post.
  • The body, where you write.
  • Tags, an image and a link below the body.
  • A preview, next to the editor on large screens or behind a Preview tab on smaller ones.
  • Save draft and Publish buttons at the top.

Writing the body

The body is required: a post needs at least some text. Everything else is optional. You can use:

  • Paragraphs, headings and subheadings.
  • Bold, italic, underline, strikethrough and inline code.
  • Bulleted and numbered lists, including lists inside lists.
  • Quotes.
  • Code blocks for multi-line code.
  • Links inside the text.
  • Tables with an optional header row.
  • Text alignment (start, center, end, justify).
  • A choice of three fonts, six sizes and five colors.

The editor also accepts Markdown-style shortcuts as you type: ## and a space starts a heading, - and a space starts a list, ``` and a space starts a code block, and **bold** becomes bold.

Fonts, sizes and colors

ArabDev offers a small, deliberate set of choices so posts stay readable and consistent:

  • Fonts: Tajawal (the default body font), Alexandria (used for headings on ArabDev) and Anton (a tall display font, best for short emphasis).
  • Sizes: 14, 16, 18, 20, 24 and 30.
  • Colors: Red, Dark red, Ink, Graphite and Muted, plus the default text color.

Colors are not fixed values: each one has a light and a dark version, so a red phrase written in light mode is still easy to read for someone using dark mode.

Only these choices are kept

If you paste formatted text from another website, fonts, sizes and colors outside this set are removed when you publish. The words themselves are kept.

Writing in Arabic and English together

Each paragraph, heading, list item and table cell decides its own direction from its first letters. An Arabic paragraph flows right-to-left and an English one left-to-right in the same post. Code blocks are always left-to-right. "Start" and "end" alignment follow each paragraph's own direction, so "start" means right for Arabic and left for English.

Image and link attachments

Attaching an image

Choose Add image below the body. The image uploads immediately with a progress bar and then appears as a preview with a remove button. One image per post.

  • Formats: JPEG, PNG, WebP or GIF; up to 5 MB.
  • At least 64 pixels on the shorter side and at most 10,000 pixels on the longer side.
  • Large images are scaled down to fit within 1600×1600 pixels and saved as WebP. Animated GIFs become still images.
  • If you remove an image you just uploaded before saving, it is deleted from the server.

The Attach a link field is for the one link your post is about, such as a repository, a demo or an article. It appears under the post as a card showing the site's name and the full address. It must start with http:// or https:// and be at most 500 characters. For links inside your text, use the link button in the toolbar instead.

Tags

Add up to 5 tags to help people find your post. Type a tag and press Enter, pick a suggestion from the list, or paste several separated by commas. Each tag can be up to 30 characters.

Main article: Tags and interests.

Preview

The preview shows your post exactly as readers will see it: your picture and name, the title, the formatted body, the image, the link card and the tags. On screens 1200 pixels and wider it sits next to the editor and updates as you type. On smaller screens, switch between the Write and Preview tabs.

Drafts

  • Save draft stores everything, including the title, body, tags, image and link, without publishing.
  • After the first save, the address changes to the draft's own address (/drafts/12), so you can bookmark it or reload safely. Later saves update the same draft.
  • All your drafts are listed under Drafts in the account menu, most recently edited first, with a short excerpt and their tags.
  • Publishing from a draft turns it into a post and removes the draft.
  • Drafts are private. Nobody else can see or open them.

Leaving with unsaved changes

If you try to leave the editor with changes you have not saved, ArabDev asks "Discard your changes?" You can stay and keep editing, or leave and lose the changes. The browser shows a similar warning if you try to close the tab.

Publishing

Choose Publish. If the body is empty you see "Write something before publishing"; if the attached link is not valid, the message appears under the link field. Once published, you are taken to your new post. You can publish up to 30 posts per hour.

Editing and deleting posts

  • Open the menu on your post and choose Edit post. You can change everything: title, body, tags, image and link. The post then shows an "edited" note.
  • Choose Delete post from the same menu. ArabDev asks you to confirm, because deleting also removes the post's comments, likes, reposts and bookmarks. This cannot be undone.
  • If an image is no longer used by any post or draft after an edit or deletion, the file is deleted.
  • Copy link in the same menu works on anyone's post.

Mentioning people

Write @username anywhere in a post to mention someone. They get a notification (unless their settings say otherwise). Up to 10 different people are notified per post.

What happens to your post when you publish

The server checks and cleans every post before saving it. It keeps only the formatting the editor offers and removes anything else, including scripts, unknown tags, styles outside the allowed fonts, sizes and colors, and links that do not use http, https or mailto. Links in posts open in a new tab and are marked so search engines do not treat them as endorsements. The browser checks the post again before showing it. This double check keeps everyone who reads your post safe.

Categories: PostsEditor

Formatting reference

A complete list of the editor's toolbar buttons, keyboard shortcuts and Markdown-style shortcuts. On Mac, use wherever this page says Ctrl.

Toolbar, from start to end

ControlWhat it does
Undo / RedoStep backward or forward through your changes. Greyed out when there is nothing to undo or redo.
Text styleParagraph, Heading or Subheading for the current block.
FontDefault font, Alexandria, Tajawal or Anton for the selected text. Each option is shown in its own font.
SizeDefault, 14, 16, 18, 20, 24 or 30 for the selected text.
BoldMakes the selected text bold.
ItalicMakes the selected text italic.
UnderlineUnderlines the selected text.
StrikethroughDraws a line through the selected text.
Inline codeFormats a short piece of code inside a sentence, like npm install.
Text colorOpens a menu: Default, Red, Dark red, Ink, Graphite, Muted. Each option is shown in its color.
Align to start / Center / Align to end / JustifySets the alignment of the current paragraph or heading. Choosing the active alignment again removes it.
Bulleted listTurns the paragraph into a bulleted list, or back.
Numbered listTurns the paragraph into a numbered list, or back.
QuoteTurns the paragraph into a quote, shown with a red bar at its start.
Code blockStarts a block for multi-line code, shown on a dark background, always left-to-right.
LinkOpens a dialog to add, change or remove a link on the selected text. Addresses without https:// get it added.
TableOutside a table: insert a new table. Inside a table: add or delete rows and columns, or delete the table.

Buttons for formatting that is active where your cursor is are highlighted, so you can always see which styles apply. On narrow screens the toolbar scrolls sideways instead of wrapping onto several lines.

Keyboard shortcuts

ShortcutAction
Ctrl + BBold
Ctrl + IItalic
Ctrl + UUnderline
Ctrl + Shift + SStrikethrough
Ctrl + EInline code
Ctrl + Alt + 2 / 3Heading / Subheading
Ctrl + Shift + 8Bulleted list
Ctrl + Shift + 7Numbered list
Ctrl + Shift + BQuote
Ctrl + Alt + CCode block
Ctrl + ZUndo
Ctrl + Shift + Z or Ctrl + YRedo
Shift + EnterLine break inside the same paragraph
Tab / Shift + Tab in a listIndent / outdent the list item
Tab in a tableMove to the next cell; in the last cell, add a new row
Ctrl + Enter in a commentSend the comment

Markdown-style shortcuts

Type these at the start of an empty line (for blocks) or around text (for inline styles). They turn into formatting as you type.

TypeResult
## then spaceHeading
### then spaceSubheading
-, * or + then spaceBulleted list
1. then spaceNumbered list (starting at that number)
> then spaceQuote
``` then spaceCode block (you can add a language name, for example ```python)
---Horizontal divider
**text**Bold
*text* or _text_Italic
~~text~~Strikethrough
`text`Inline code

Typing or pasting a web address followed by a space turns it into a link automatically. Pasting an address while text is selected links that text.

Working with tables

  1. Choose the table button while your cursor is outside a table.
  2. Set the number of rows (1–20) and columns (1–8) and whether the first row is a header row.
  3. Choose Insert table.
  4. With the cursor inside the table, the same button opens a menu: Add row below, Add column after, Delete row, Delete column and Delete table.

Wide tables scroll sideways on small screens instead of squeezing their content. Header cells are shown in bold on a tinted background.

  • Allowed kinds of address: https://, http:// and mailto:.
  • Anything else, such as javascript:, is refused by the editor and removed by the server.
  • To remove a link, place the cursor on it, open the link dialog and choose Remove link, or clear the address and save.

Color meanings

ColorSuggested use
RedThe ArabDev red: warnings, key terms, emphasis.
Dark redA calmer emphasis for longer phrases.
InkMaximum contrast, for example to stand out inside muted text.
GraphiteSecondary information.
MutedAsides, footnotes and "optional" remarks.

Do not rely on color alone to carry meaning: some readers cannot tell colors apart. Pair color with words such as "Warning:".

Categories: EditorPosts

Tags and interests

Tags describe what a post is about. Interests describe what a person works with. ArabDev connects the two: when a post's tag matches one of the 25 interests, the post counts as being about that interest, which shapes the For you feed and developer suggestions.

How tags are written

You can type tags however you like, and ArabDev turns each one into a tidy tag name:

  • A leading # is removed.
  • Letters become lower-case.
  • Spaces, underscores, dots and slashes become hyphens, and repeated hyphens are merged.
  • + becomes p and # becomes sharp, so C-family languages stay distinct.
  • Arabic letters are kept, so #برمجة is a valid tag.
  • Well-known spellings are merged into one tag (see the table below).
  • Duplicate tags on the same post are kept once, and up to 5 tags are kept per post.

Spellings that are merged

You typeTag
jsjavascript
tstypescript
c++cpp
c#csharp
.netdotnet
node, node.jsnodejs
golanggo
mlmachine-learning
security, infoseccybersecurity
sql, databasedatabases
gamedevgame-development
mobilemobile-development
ui, ux, uiux, ui/uxui-ux
opensource, ossopen-source
vuejs, vue.jsvue
reactjs, react.jsreact

The 25 interests

InterestTagArabic name
JavaScriptjavascriptJavaScript
TypeScripttypescriptTypeScript
PythonpythonPython
C++cppC++
RustrustRust
GogoGo
JavajavaJava
C#csharpC#
ReactreactReact
VuevueVue
AngularangularAngular
Node.jsnodejsNode.js
FastAPIfastapiFastAPI
DjangodjangoDjango
AIaiالذكاء الاصطناعي
Machine Learningmachine-learningتعلّم الآلة
Cybersecuritycybersecurityالأمن السيبراني
LinuxlinuxLinux
DevOpsdevopsDevOps
Cloudcloudالحوسبة السحابية
Databasesdatabasesقواعد البيانات
Game Developmentgame-developmentتطوير الألعاب
Mobile Developmentmobile-developmentتطوير تطبيقات الجوال
UI/UXui-uxتصميم الواجهات UI/UX
Open Sourceopen-sourceالمصادر المفتوحة

Programming languages and frameworks keep their original names in the Arabic interface, because that is how developers write them.

Tag pages

Every tag has a page at /tags/name listing its posts, newest first, 20 per page, with how many posts use it. You reach tag pages by clicking a tag on a post, an interest chip on a profile, a popular tag, or a tag in search results.

The Popular tags list (in the side column and on Explore) ranks tags by how many posts used them in the last 30 days. If no posts were tagged in that time, it falls back to the all-time ranking. The list is refreshed every two minutes. The top three ranks are shown in red.

Categories: DiscoveryPosts

Comments and interactions

Under every post is an action row with five buttons: comment, repost, like, save and share. This article covers each of them.

Likes

The heart button likes a post; select it again to unlike. The heart fills in and turns red when you have liked a post, and the count updates immediately. The author gets a notification, and if you unlike before they read it, the notification is withdrawn.

Reposts

  • The repost button shares someone else's post with your followers. It appears in their Following feed with a label such as "Layla Hassan reposted" and on your profile's Posts tab.
  • Select it again to undo the repost.
  • You cannot repost your own posts, so the button is disabled on them.
  • The author gets a notification.

Bookmarks (saved posts)

The bookmark button saves a post for later. Saved posts are listed on the Bookmarks page and on the Saved tab of your own profile, newest save first. Bookmarks are completely private: nobody, including the author, is told or can see who saved a post.

Sharing

The share button opens your device's share sheet where available (most phones). Otherwise it copies the post's link and shows "Link copied".

Comments

Comments appear on the post's page under Discussion, oldest first, so conversations read from top to bottom. Twenty comments are shown per page.

Writing a comment

  • Type in the box under the post and choose Comment, or press Ctrl + Enter.
  • Comments are plain text of 1 to 2000 characters. Line breaks are kept. A counter shows how much you have written.
  • Arabic and English comments each align correctly on their own.
  • After posting, the list jumps to the page with your new comment.

Replying

Choose Reply on a comment. A "Replying to @username" chip appears above the box; remove it to cancel the reply. Replies are shown in order with a "Replying to @username" note. The person you reply to is notified.

Mentions in comments

Write @username to mention someone. Mentions become links to their profiles and stay readable inside Arabic sentences. Mentioned people are notified, except those already notified about the same comment (for example the post's author).

Deleting comments

A comment can be deleted by its author, by the author of the post it is on, and by ArabDev administrators. Deleting a comment also deletes the replies to it, and the post's comment count is recalculated.

Without an account

Anyone can read public posts and comments. If you are not signed in and select like, repost or save, ArabDev asks you to sign in and brings you back to the post afterwards.

Limits

To prevent abuse, each network can make up to 300 likes, saves and reposts per hour, and up to 60 comments per 10 minutes. Normal use never comes close.

Following and discovery

Following someone puts their posts and reposts in your Following feed and ranks them higher in For you. This article explains following, how ArabDev suggests people, and the Explore page.

Following and unfollowing

  • Select Follow on a profile, a suggestion card or a post page.
  • The button changes to Following. Hovering over it (or focusing it with the keyboard) changes the label to Unfollow in red, and selecting it then unfollows. The label changes as well as the color.
  • The person gets a "started following you" notification. If you unfollow before they read it, it is withdrawn.
  • You cannot follow yourself.
  • Following is public: it is shown in both people's lists unless they have made their lists private.

How suggestions work

"Developers to follow" appears in the side column, on Explore and in the last step of setup. Each candidate gets a score:

  • 3 points for each interest you share with them.
  • 2 points for each person you follow who also follows them.

Candidates with the same score are ordered by how many followers they have, then by who joined most recently. ArabDev never suggests you to yourself, people you already follow, deactivated accounts, or anyone who turned off Show me in search and suggestions. Visitors who are not signed in see the most-followed developers.

The Explore page

Explore is open to everyone, signed in or not. It contains:

  • A search box. See Search.
  • Trending this week: posts from the last 7 days ranked by likes plus twice their comments plus twice their reposts, so posts that start conversations rank highest. If nothing was posted that week, the all-time ranking is shown. Trending posts are paginated, 20 per page.
  • Popular tags and developers to follow. On large screens these live in the side column; on smaller screens they appear at the top of Explore.
Categories: DiscoveryCommunity

Search

ArabDev searches posts, developers and tags from one box: in the top bar on large screens, behind the magnifying glass on phones, and on the Explore and Search pages.

Live suggestions

After you type two characters, ArabDev waits a moment (300 milliseconds) for you to stop typing, then shows suggestions grouped into Developers, Tags and Posts, up to five of each, and a final "See all results" line.

  • and move through the suggestions.
  • Enter opens the highlighted suggestion, or runs a full search if none is highlighted.
  • Esc closes the list.
  • The × button clears the box.

What is searched

GroupMatchesOrder
PostsThe title and the text of the bodyNewest first
DevelopersUsername and display nameExact username match first, then newest members
TagsTag nameMost-used first

Developers who turned off Show me in search and suggestions are left out of developer results, unless you type their exact username.

Search tips

  • Start with @ to look for people: @layla.
  • Start with # to look for tags: #rust.
  • Search is not case-sensitive, and characters such as % and _ are searched literally, so 100% finds exactly that.
  • Searches can be up to 100 characters long.

The results page

Pressing Enter or choosing "See all results" opens /search?q=…. Its tabs are All, Posts, Developers and Tags. All shows a short preview of each group with a "View all" button, and the other tabs show the complete list, 20 per page. If nothing matches, ArabDev suggests checking the spelling, trying a shorter phrase or searching for a tag.

Categories: Discovery

Notifications

Notifications tell you when people interact with you. They appear on the Notifications page, and a red badge with the number of unread notifications appears on the Notifications item in the navigation.

Kinds of notifications

KindYou are notified when…
Likesomeone likes your post.
Commentsomeone comments on your post, or replies to your comment on someone else's post.
Followsomeone starts following you.
Repostsomeone reposts your post.
Mentionsomeone writes your @username in a post or comment.

How notifications behave

  • You are never notified about your own actions.
  • Liking, following or reposting the same thing again does not create duplicate notifications.
  • If someone undoes a like, follow or repost before you have read the notification, it disappears.
  • If one comment both replies to you and mentions you, you get one notification, not two.
  • The unread badge refreshes every 30 seconds while ArabDev is open; the Notifications page refreshes every minute.

Reading notifications

Unread notifications have a tinted background, a bold name and a red dot with the word New, so they stand out without relying on color alone. Each shows who acted, what they did, the post title and, for comments, the comment itself. Selecting a notification marks it as read and opens the post or profile. Mark all as read clears every unread notification at once. Notifications are listed newest first, 20 per page.

Choosing what you are notified about

Go to Settings → Notifications to turn each kind on or off. Turning a kind off stops new notifications of that kind; ones you already have stay. To control who can notify you with a mention, see Settings → Privacy.

No email notifications

ArabDev does not send notifications by email. The only emails it sends are password reset links you ask for.

Settings

Settings are grouped into five sections: Account, Profile, Appearance, Privacy and Notifications. On large screens the sections are listed on the side; on phones they are tabs across the top. Switches save as soon as you change them and show "Settings saved"; if saving fails, the switch returns to its previous position and an error explains why.

Account

Username

Shows your current username. The Edit link takes you to the Profile section, where you can change it.

Email

Enter a new email address and your current password, then choose Update email. The password is required so that someone using your unlocked device cannot take over your account. The new address must not belong to another account.

Password

Enter your current password, a new one and the new one again. The new password must follow the password rules and differ from the current one. Changing your password signs you out everywhere else; you stay signed in on the device you used.

Deleting your account

Delete my account permanently removes your account after you confirm with your password. Your posts, comments, replies, likes, reposts, bookmarks, follows, drafts, notifications and uploaded files are all deleted, and the counts on other people's posts are updated. This cannot be undone.

Profile

The same editor as Edit profile: picture, display name, username, bio, location, website and interests. See Editing your profile.

Appearance

  • Theme: Light, Dark or System. System follows your device and switches automatically when your device does.
  • Language: العربية or English. The whole layout changes direction with the language: right-to-left for Arabic, left-to-right for English.

When you are signed in, your theme and language are saved to your account and applied when you sign in on another device. The same switches are in the account menu.

Privacy

SettingWhen on (default)When off
Show me in search and suggestionsYou can appear in developer search and "Developers to follow".You are left out of both. People can still open your profile from a direct link, your posts, or by typing your exact username.
Show my followers and following listsAnyone can open your lists.Only you can see your lists. The counts stay visible.

Who can notify you with a mention has three choices: Everyone (default), People you follow and No one. It controls mention notifications only; it does not stop people from writing your name.

Notifications

Five switches, all on by default: likes on your posts, comments and replies, new followers, reposts of your posts, and mentions.

Categories: SettingsPrivacy

Privacy and safety

This article is a practical summary. The full, binding text is the ArabDev Privacy Policy.

Our promise

ArabDev does not sell, rent or trade your personal information, and it does not use it to target ads. There are no third-party trackers, analytics scripts or advertising pixels on ArabDev.

What is public and what is private

InformationWho can see it
Username, display name, picture, bio, location, website, interests, join dateEveryone, including people without an account
Posts, comments and repostsEveryone
Follower and following listsEveryone, unless you turn them off (then only you)
Like, comment and repost countsEveryone
Which posts you likedYou, and the post's author through notifications
Email addressOnly you
BookmarksOnly you
DraftsOnly you
Notifications and settingsOnly you
PasswordNobody. It is stored only as a one-way hash.

What ArabDev keeps in your browser

NameKindPurpose
arabdev_refreshCookie (HttpOnly)Keeps you signed in. Scripts cannot read it, and it is only sent to the sign-in endpoints.
arabdev.langLocal storageYour interface language.
arabdev.modeLocal storageLight, dark or system theme.
arabdev.sessionLocal storageA yes/no hint that this browser has signed in, so visitors are not sent an unnecessary sign-in check.
mui-color-scheme-light, mui-color-scheme-darkLocal storageWritten by the interface library to remember which palette belongs to light and dark mode.
react-router-scroll-positionsSession storageRemembers your scroll position when you go back. Cleared when the tab closes.

That is the complete list. There are no advertising or analytics cookies.

Images and hidden metadata

Photos taken on phones often carry hidden information such as the date, the camera and the GPS location. ArabDev re-encodes every uploaded image into a new file, which leaves that information behind. Only the picture itself is stored and shown.

Your controls

  • Hide yourself from search and suggestions. See Settings → Privacy.
  • Make your follower and following lists private.
  • Choose who can notify you with mentions.
  • Turn off any kind of notification.
  • Edit or delete any post or comment you wrote.
  • Delete your account and everything in it. See Deleting your account.

Staying safe

  • Never share your password. ArabDev staff will never ask for it.
  • Think before posting anything personal. Posts are public and can be read by anyone.
  • Do not post API keys, tokens or passwords in code samples. Replace them with placeholders.
  • Links in posts lead to other websites that have their own privacy practices.
Categories: PrivacySecurity

Account security

How ArabDev protects your account, and what you can do to help.

How passwords are stored

ArabDev never stores your password. It stores a one-way hash made with Argon2id, a method designed to be slow and memory-hungry for anyone trying to guess passwords. Even the people running ArabDev cannot see your password. When you sign in, ArabDev hashes what you typed and compares the results.

How sessions work

  • When you sign in, your browser receives a short-lived access pass that lasts 15 minutes and is kept only in the page's memory, never in storage.
  • A longer-lived sign-in cookie renews that pass automatically. The cookie is HttpOnly, so scripts on the page cannot read it, and it is only sent to ArabDev's sign-in endpoints.
  • Every renewal replaces the cookie with a new one. If an old cookie is ever used again, which is a sign it was copied, ArabDev ends that whole session. A short grace period prevents this from happening by mistake when two tabs renew at the same moment.
  • The server stores only a hash of each sign-in cookie, the browser description, and when it was created and when it expires.

Signing out

Choose Sign out from the account menu. This ends the session on that browser and removes the sign-in cookie. Changing your password or resetting a forgotten password signs you out of every other browser too.

Resetting a forgotten password

  1. On the sign-in page choose Forgot password?
  2. Enter the email address you signed up with and choose Send reset link.
  3. ArabDev always answers the same way, whether or not the address has an account, so nobody can use this form to find out who is registered.
  4. Open the link in the email within 30 minutes. It works only once.
  5. Choose a new password. All your existing sessions are signed out, and you can sign in with the new password.
For people running ArabDev

Version 1.0.0 does not include an email provider. Until one is connected, reset links are written to the server log. See Email.

Protection against guessing and abuse

ArabDev limits how often the same network can repeat sensitive actions. When a limit is reached you see "Too many attempts. Wait a moment and try again."

ActionLimit per network
Sign in10 per minute
Create account10 per hour
Forgot password5 per 15 minutes
Reset password10 per 15 minutes
Change password10 per 15 minutes
Username and email availability checks60 per minute
Session renewal60 per minute
Publish a post30 per hour
Comment60 per 10 minutes
Like, save and repost300 per hour
Follow120 per hour
Upload an image30 per 10 minutes
Search120 per minute

Other protections

  • Every request that changes something is checked on the server. The buttons you see in the app are for convenience; permission is always decided by the server.
  • Post content is cleaned on the server and again in the browser. See What happens to your post when you publish.
  • Uploads are decoded as images and re-encoded; any other kind of file is refused.
  • The site tells browsers not to guess file types and not to show ArabDev inside other websites' frames.

Tips

  • Use a unique password for ArabDev and keep it in a password manager.
  • Uncheck "Keep me signed in" on shared or public computers, and sign out when you are done.
  • If you think someone else knows your password, change it: that signs every other device out.
Categories: SecurityPrivacy

Ads on ArabDev

ArabDev shows a small number of ads to help keep the platform free. They follow strict rules so they never get in the way of reading or mislead anyone.

Where ads appear

  • In feeds: after every 8 posts, so after the 8th and the 16th post of a 20-post page. Never at random places.
  • In the side column: one ad slot, only on large screens.
  • Nowhere else: no ads inside posts, comments, profiles, search results, notifications or settings, and no pop-ups.

How to recognise an ad

  • Every ad carries a boxed Sponsored label and says who is promoting it.
  • Ads sit on a tinted background with a dashed frame, and have no profile picture or action row, so they cannot be mistaken for posts.
  • An information icon explains why the ad is there.

How ads are chosen

An ad is chosen only by where it appears (feed or side column), your interface language and the page number, which rotates the ads predictably. Your personal information is never used to choose ads. ArabDev does not build advertising profiles and does not share anything about you with advertisers.

What is counted

For each ad, ArabDev keeps two totals: how many times it was shown and how many times it was clicked. These totals are not linked to you or to any account.

House ads

At launch, the ads you see are ArabDev's own messages, for example inviting you to share an open-source project or complete your profile. They are labelled "Promoted by ArabDev".

Categories: AdsPrivacy

Community guidelines

ArabDev works best when it stays technical, generous and respectful. These guidelines describe what that means in practice.

Do

  • Share what you learn, including small tips and honest mistakes.
  • Explain the "why", not only the "how". Include versions, context and trade-offs.
  • Credit the work you build on: link to original authors, projects and documentation.
  • Give feedback on the code and the idea, not the person.
  • Welcome beginners. Everyone asked a first question once.
  • Write in whichever language serves your readers best: Arabic, English or both.
  • Use tags that describe the post, so the right people find it.

Do not

  • Harass, insult, threaten or target anyone, for any reason.
  • Post hateful content about people's origin, religion, gender, disability or any other part of who they are.
  • Post spam, repeated self-promotion, link farms or misleading titles.
  • Share other people's private information.
  • Share malware, exploits aimed at systems you do not own, or stolen credentials.
  • Post content that is illegal, or that infringes someone's copyright or trademark.
  • Impersonate other people, companies or ArabDev.

Security research

Discussing vulnerabilities, defensive techniques and how attacks work is welcome, because it is how developers learn to build safer software. Publish details about a specific, unpatched vulnerability in someone else's product only after giving them a reasonable chance to fix it. If you find a security problem in ArabDev itself, report it privately to support@arabdev.site rather than posting it (see Reporting a security problem).

Moderation

Post authors can delete comments on their own posts. ArabDev administrators can delete any post or comment that breaks these guidelines. Accounts that repeatedly or seriously break them may be deactivated. Version 1.0.0 has no in-app report button yet; until it does, send the link to support@arabdev.site (see Reporting content).

Categories: CommunitySafety

Accessibility and languages

ArabDev aims to be usable by everyone, with any input method and in either of its languages.

Arabic and English

  • Arabic is the default. Switch with the language control in the top bar (when signed out), in the account menu, or under Settings → Appearance.
  • Changing the language flips the entire layout: navigation, menus, drawers, arrows, spacing and text alignment all follow the new direction at once.
  • Icons with a direction, such as back arrows, pagination arrows and undo, are mirrored in Arabic.
  • Numbers are shown with Western digits (0–9) in both languages, which developers read most easily next to code.
  • Dates and relative times ("3 hr. ago", "منذ 3 ساعات") are written in the interface language.
  • Arabic grammar for counts is handled properly: one, two, a few and many each have their own wording.

Keyboard use

  • A Skip to content link appears when you first press Tab.
  • Every button, link, menu and form field can be reached and used with the keyboard, and shows a clear red outline when focused.
  • Search suggestions follow the standard combobox pattern: arrow keys, Enter and Esc.
  • Dialogs keep focus inside them until closed.

Screen readers

  • Icon-only buttons have spoken names, such as "Like (4)" or "Remove from saved".
  • Toggle buttons such as like, save and follow announce whether they are on.
  • Images attached to posts are described as attached images, together with the post title.
  • Loading areas are marked as busy, and status messages such as "Link copied" are announced.

Seeing the interface

  • Text and buttons meet common contrast guidelines in both light and dark mode.
  • State is never shown by color alone. Unread notifications also have a "New" label, and selected interests have a check mark.
  • If your device asks for reduced motion, ArabDev turns animations off.
  • The layout works from small phones to wide screens, and you can zoom in without losing content.

Frequently asked questions

Account

Is ArabDev free?

Yes. ArabDev is free to use, and its source code is free software under the GNU General Public License v3.

Can other people see my email address?

No. Your email address is only used to sign in and to reset your password.

Can I change my username?

Yes, under Settings → Profile or Edit profile. Your profile address changes with it. See Editing your profile.

Why can't my username be in Arabic?

Usernames are used in addresses and @mentions, so they are limited to English letters, numbers and underscores to keep them easy to type everywhere. Your display name can be in Arabic.

How do I delete my account?

Settings → Account → Delete my account. You confirm with your password, and everything is removed permanently.

Posting

Does a post need a title?

No, but it helps people decide whether to read it. Without a title, the post is shown as "by" and your name.

How many images can I add to a post?

One attached image per post in version 1.0.0.

Why did my pasted colors disappear?

ArabDev keeps only its own five text colors, three fonts and six sizes so posts stay readable in both light and dark mode. See Fonts, sizes and colors.

Can I schedule a post?

Not yet. Save it as a draft and publish it when you are ready.

Can people see what I changed when I edit a post?

They see an "edited" note, but not the previous version.

Feed and discovery

Why doesn't the feed scroll forever?

ArabDev uses numbered pages of 20 posts on purpose. See Pages instead of infinite scroll.

Why is this post at the top of my feed?

In the For you tab, posts from people you follow and posts about your interests come first within each day. Use the Latest tab for pure time order.

Can I stop appearing in suggestions?

Yes: turn off Show me in search and suggestions in Settings → Privacy.

Privacy and ads

Does ArabDev sell my data?

No. ArabDev does not sell, rent or trade personal information, and ads are never chosen using your personal data. See the Privacy Policy.

Can people see which posts I liked?

The author of a post is notified when you like it. There is no public list of your likes.

Are bookmarks private?

Yes, completely.

How many ads will I see?

At most two in each 20-post page of a feed, plus one in the side column on large screens.

Other

Is there private messaging?

Not in version 1.0.0.

Is there a mobile app?

ArabDev is a responsive website designed for phones as well as computers. There is no separate app to install.

Can I contribute to ArabDev?

Yes. See Contributing and license, or write to hi@arabdev.site.

How do I contact ArabDev?

For help, bugs and reports write to support@arabdev.site; for sponsorship, contributions and other questions write to hi@arabdev.site. See Contact and support.

Categories: Help

Troubleshooting

Common problems and how to fix them. Messages are quoted as they appear in the English interface.

Signing in

Message or symptomWhat to do
"Email or password is incorrect."Check the email for typos and make sure Caps Lock is off. If you are unsure of your password, use Forgot password?
"Too many attempts. Wait a moment and try again."You reached a rate limit. Wait a minute and try again.
"Your session has expired. Please sign in again."Your sign-in ended: you were signed out elsewhere, you changed your password, or "Keep me signed in" was off and the session ran out. Sign in again.
You keep being signed out when closing the browserCheck "Keep me signed in" when signing in. Browsers set to delete cookies on exit also sign you out.
The reset link says it is invalid or expiredLinks last 30 minutes and work only once. Request a new one.

Creating an account

MessageMeaning
"This username is already taken."Someone else has it. Try adding numbers or an underscore.
"This username is reserved."The name is used by the site itself. Choose another.
"3–20 characters: English letters, numbers and _, starting with a letter."The username breaks one of the username rules.
"An account with this email already exists."Sign in instead, or reset the password for that account.
"Mix letters and numbers so it's harder to guess."Add at least one letter and one number, and avoid repeating the same few characters.
"Passwords don't match."The two password fields are different.

Uploading images

MessageWhat to do
"Images must be 5 MB or smaller."Export the image at a smaller size or lower quality.
"Use a JPEG, PNG, WebP or GIF image."Convert the file, for example from HEIC, BMP or TIFF, to one of these.
"This file isn't a valid image."The file is damaged or is not really an image. Open and re-save it in an image editor.
"This image is too small."Profile pictures need at least 96×96 pixels, post images at least 64 pixels on the shorter side.
"This image's dimensions are too large."Resize it: profile pictures up to 8000 pixels per side, post images up to 10,000.

Posting

  • "Write something before publishing." The body is empty. A title alone is not enough.
  • "Enter a valid link starting with http:// or https://." Fix the attached link or clear the field.
  • "You can't repost your own post." Reposting is for sharing other people's posts.
  • My formatting changed after publishing. Formatting outside the editor's options is removed. See What happens to your post when you publish.

Display

  • The layout is mirrored the wrong way. The direction follows the language. Switch the language in the account menu or Settings → Appearance.
  • Dark mode does not follow my device. Set the theme to System.
  • "Can't reach the server." Check your internet connection and reload the page.
Categories: Help

Contact and support

ArabDev has two email addresses, one for getting help and one for everything else. Write in Arabic or English; a person reads every message.

Which address to use

AddressWrite to it about
support@arabdev.siteProblems with your account, signing in or password resets; bugs and anything that does not work as described in this wiki; reporting posts, comments or profiles that break the community guidelines; security problems; privacy requests such as a copy of your data.
hi@arabdev.siteSponsoring ArabDev or advertising on it; contributing code, translations or documentation; partnerships and commitments with communities, companies and universities; press; and general questions about ArabDev.
Not sure?

If something is broken or blocking you, use support. For anything you would like to discuss, say hi.

Getting support

To help us answer quickly:

  • Write from the email address of your ArabDev account, and include your username.
  • Describe what you were doing, what you expected and what happened instead.
  • Quote any message exactly as it appeared, or attach a screenshot.
  • Say which browser and device you use, and whether ArabDev was in Arabic or English.
  • Never send your password. Nobody from ArabDev will ever ask for it.

Before writing, the Troubleshooting and Frequently asked questions articles may already have the answer.

Reporting content

Version 1.0.0 has no in-app report button yet. To report a post, comment or profile, send its link to support@arabdev.site with a short explanation. Reports are handled confidentially; the person reported is not told who reported them.

Reporting a security problem

Send security problems privately to support@arabdev.site with the subject "Security", and do not publish them until they are fixed. Include the steps to reproduce the problem and what an attacker could do with it. Please do not access other people's data or disrupt the service while testing.

Privacy requests

To get a copy of your data, correct it, or ask a question about how it is used, write to support@arabdev.site from your account's email address. Requests are acknowledged within 7 days and answered within 30. See the Privacy Policy for your rights.

Sponsors, contributors and partners

Write to hi@arabdev.site if you would like to:

  • Sponsor ArabDev or place an ad. Ads follow strict rules; see Ads on ArabDev.
  • Contribute code, fix a translation or improve this wiki. See Contributing and license.
  • Bring your community, company or university to ArabDev, or make a longer-term commitment to support it.
  • Ask anything else about ArabDev.

ArabDev addresses

AddressWhat it is
arabdev.site/dashboardThe ArabDev app. The dashboard is your home feed; arabdev.site takes you there.
wiki.arabdev.siteThis wiki.
privacy.arabdev.siteThe Privacy Policy.
patch.arabdev.sitePatch notes: what changed in each release.

ArabDev will only ever email you from an @arabdev.site address, and never asks for your password by email. Treat any other message claiming to be from ArabDev as suspicious.

Categories: Help · Safety

Glossary

Bookmark
A private save of a post, listed on your Bookmarks page and the Saved tab of your profile.
Display name
The name shown on your profile and posts. Any script, up to 50 characters.
Draft
An unpublished post that only you can see.
Feed
A list of posts. The home feed has three tabs: For you, Following and Latest.
Follow
Subscribing to someone's posts and reposts in your Following feed.
House ad
An ad in which ArabDev promotes its own features.
Interest
One of 25 topics you can pick to shape your feed and suggestions.
Mention
Writing @username in a post or comment, which notifies that person.
Onboarding
The four-step setup window shown on your first visit.
Repost
Sharing someone else's post with your followers without changing it.
RTL / LTR
Right-to-left (Arabic) and left-to-right (English) text direction.
Sponsored
The label that marks every ad.
Tag
A keyword describing a post, such as #python. Up to 5 per post.
Trending
Posts from the last 7 days ranked by likes, comments and reposts.
Username
Your unique handle, used in your profile address and in mentions.
Categories: Reference

Architecture overview

ArabDev is a single-page web application backed by a REST API. This article describes how the pieces fit together.

Technology

LayerTechnology
User interfaceReact 19, TypeScript, Material UI 9, Emotion (with a right-to-left style plugin)
Routing and dataReact Router 8, TanStack Query 5, Axios
EditorTipTap 3 (ProseMirror)
Languagesi18next with ar.json and en.json
BuildVite 8
APIPython, FastAPI, Pydantic 2
DatabaseSQLAlchemy 2 with Alembic migrations: SQLite for development and single-server hosting, PostgreSQL (Neon) on Vercel
SecurityArgon2id password hashing, JWT access tokens, rotating refresh tokens
Content safetynh3 on the server, DOMPurify in the browser
ImagesPillow, re-encoding to WebP
OptionalRedis for shared rate limiting and caching
Testspytest (51 tests, run against SQLite and PostgreSQL)

Repository layout

Arabdev/
├── backend/          FastAPI application, Alembic migrations, tests
├── frontend/         React application
├── wiki/             This wiki (static site)
├── privacy/          Privacy Policy (static site)
├── patch-notes/      Patch notes (static site)
├── api/index.py      Entry point that serves the API on Vercel
├── vercel.json       Build, routing and the scheduled clean-up
├── requirements.txt  Python packages for the Vercel function
├── LICENSE           GNU GPL v3
├── docker-compose.yml
└── README.md

Backend structure

  • app/main.py creates the application: middleware, error handlers, the API router and the media file mount.
  • app/core/: settings, database engine, security helpers, dependencies, error types, rate limiting and caching.
  • app/models/: SQLAlchemy models for the 19 tables.
  • app/schemas/: Pydantic models for requests and responses.
  • app/api/v1/: route modules grouped by topic.
  • app/repositories/: query builders.
  • app/services/: business rules such as permissions, notifications, feeds and media processing.
  • app/utils/: the HTML sanitizer, validators, pagination and text helpers.

Frontend structure

  • src/api/: the HTTP client, endpoint functions, query keys and cache update helpers.
  • src/features/: auth, onboarding, posts, editor, comments, profile, users, search, ads, notifications and preferences.
  • src/components/: shared pieces such as Logo, EmptyState, LoadingState, Pagination and Notifier.
  • src/layouts/: AppLayout, Navbar, Sidebar, RightSidebar and MobileNavigation.
  • src/pages/: route components, loaded on demand.
  • src/theme/: colors, typography, tokens and the Material UI theme.

Database tables

TableHolds
usersAccounts: username, email, password hash, flags, token version
profilesDisplay name, bio, location, website, avatar
user_settingsTheme, language, privacy and notification preferences
interests, user_interestsThe 25 topics and who picked them
posts, draftsPublished posts (with counters) and unpublished drafts
tags, post_tagsTags, their link to interests, and which posts use them
commentsComments and replies
likes, bookmarks, reposts, followsOne row per person and target
notificationsWho did what to whom, and whether it was read
mediaUploaded images: owner, kind, storage key, size and dimensions
adsAds with placement, language, schedule and total counts
refresh_tokens, password_reset_tokensHashed session and reset tokens with expiry

Foreign keys, usernames, emails, creation dates, tags and follow relationships are indexed. SQLite runs in WAL mode with foreign keys enforced.

Categories: Developers

Running and self-hosting

Running locally

# Backend
cd backend
python -m venv .venv
.venv/Scripts/activate        # macOS/Linux: source .venv/bin/activate
pip install -e ".[dev]"
cp .env.example .env          # set SECRET_KEY
alembic upgrade head          # creates backend/arabdev.db
python -m app.cli seed --demo # optional demo content
uvicorn app.main:app --reload --port 8000

# Frontend (second terminal)
cd frontend
npm install
npm run dev                   # http://localhost:5173

The development server forwards /api and /media to the API on port 8000 and serves this wiki, the privacy policy and the patch notes at /wiki/, /privacy/ and /patch-notes/.

Configuration

VariableDefaultPurpose
SECRET_KEYdevelopment valueSigns access tokens. Required in production.
DATABASE_URLbackend/arabdev.dbSQLite file location, or a PostgreSQL URL such as the one Neon adds to a Vercel project.
ENVIRONMENTdevelopmentproduction refuses to start without a real secret key.
REDIS_URLunsetShares rate limits and caches between processes.
CORS_ORIGINSlocal dev addressesComma-separated list of allowed browser origins.
FRONTEND_URLhttp://localhost:5173Base address used in password reset links. In production: https://arabdev.site.
COOKIE_SECUREfalseSet to true when serving over HTTPS.
MEDIA_ROOTbackend/mediaWhere uploaded images are stored.
STORAGE_BACKENDlocaldatabase keeps images in the database instead of on disk (the default on Vercel).
CRON_SECRETunsetBearer token the scheduled clean-up endpoint expects.
ACCESS_TOKEN_EXPIRE_MINUTES15Access token lifetime.
REFRESH_TOKEN_EXPIRE_DAYS30"Keep me signed in" lifetime.
RATE_LIMIT_ENABLEDtrueTurns rate limiting on or off.

Management commands

  • python -m app.cli seed adds the 25 interests and the house ads. Safe to run repeatedly.
  • python -m app.cli seed --demo also adds ten fictional developers and 26 posts. For development only.
  • python -m app.cli make-admin USERNAME gives a user administrator rights.
  • python -m app.cli purge-tokens deletes ended sign-in sessions and old password reset links. The API also does this when it starts, then every six hours on a server, or once a day on Vercel through the scheduled job in vercel.json.
  • alembic upgrade head applies database migrations.
  • pytest runs the test suite on a fresh in-memory database.

Docker

docker compose up --build starts Redis, the API (with the SQLite file on a data volume and uploads on a media volume) and nginx serving the app on port 8080. The API container applies migrations and seeds reference data when it starts.

Deploying

  • Vercel (how arabdev.site runs): one project built from the repository root. vercel.json builds the app into frontend/dist and serves the API from api/index.py, so the app and the API share one address and no cross-site settings are needed.
  • That project needs a PostgreSQL database (add Neon under Storage, which sets DATABASE_URL), plus SECRET_KEY and CRON_SECRET. VERCEL=1 is set for you and switches on production mode, secure cookies and database image storage.
  • The wiki, privacy and patch-notes folders are complete static sites with no build step, deployed as their own projects to wiki.arabdev.site, privacy.arabdev.site and patch.arabdev.site.
  • One server instead (VPS, Docker): keep SQLite and store images on disk. The API then needs a persistent disk for the database file and uploads, and runs as a single process. Serve the app build (frontend/dist, including LICENSE.txt) as a static site; set VITE_API_ORIGIN when the API is on another address.
  • Serve everything over HTTPS and set COOKIE_SECURE=true.

Backups

With SQLite, back up arabdev.db and the media folder; while the API is running, use sqlite3 arabdev.db ".backup backup.db" for a consistent copy. With PostgreSQL, use your provider's backups (Neon keeps a restore window) or pg_dump; images are inside the database, so one dump covers everything.

Email

Version 1.0.0 writes password reset emails to the server log. To send real email, connect a provider in backend/app/services/email_service.py.

API reference

Everything the app does goes through a versioned REST API under /api/v1. Interactive documentation is served at /api/docs (Swagger UI) and /api/redoc, and the machine-readable description at /api/v1/openapi.json.

Authentication

  • Send the access token as Authorization: Bearer <token>.
  • POST /auth/login and POST /auth/register return {access_token, token_type, expires_in, user} and set the refresh cookie.
  • POST /auth/refresh and POST /auth/logout use the cookie and require an X-ArabDev-Client header, which protects them from cross-site requests.

Pagination

Every list endpoint accepts page (from 1) and limit (1–20, default 20) and returns:

{ "items": [...], "page": 1, "limit": 20, "total": 100, "pages": 5 }

Errors

Errors always have a readable detail and a stable code. Validation errors add an errors list; errors about one field add field.

{ "detail": "Username is already taken", "code": "username_taken", "field": "username" }

Common codes include invalid_credentials, token_invalid, session_expired, rate_limited, username_taken, email_taken, password_too_weak, post_empty, not_post_author, cannot_repost_own, cannot_follow_self, follow_lists_private, file_too_large, file_not_image and media_not_owned.

Endpoints

GroupEndpoints
AuthenticationPOST /auth/register, POST /auth/login, POST /auth/refresh, POST /auth/logout, GET /auth/availability, POST /auth/forgot-password, POST /auth/reset-password
Your accountGET /users/me, PATCH /users/me/profile, PATCH /users/me/username, PATCH /users/me/email, PUT /users/me/password, PUT /users/me/interests, GET|PATCH /users/me/settings, POST /users/me/onboarding/complete, POST|DELETE /users/me/avatar, DELETE /users/me, GET /users/me/bookmarks
UsersGET /users/recommended, GET /users/{username}, GET /users/{username}/posts, GET /users/{username}/replies, GET /users/{username}/followers, GET /users/{username}/following, POST|DELETE /users/{id}/follow
PostsGET /posts?tab=for_you|following|latest&tag=, GET /posts/trending, GET /posts/{id}, POST /posts, PUT /posts/{id}, DELETE /posts/{id}
InteractionsPOST|DELETE /posts/{id}/like, POST|DELETE /posts/{id}/bookmark, POST|DELETE /posts/{id}/repost
CommentsGET /posts/{id}/comments, POST /posts/{id}/comments, DELETE /comments/{id}
DraftsGET|POST /drafts, GET|PUT|DELETE /drafts/{id}
Search, tags, interestsGET /search?q=&type=all|posts|users|tags, GET /tags/popular, GET /tags/{slug}, GET /interests
NotificationsGET /notifications, GET /notifications/unread-count, POST /notifications/read-all, POST /notifications/{id}/read
MediaPOST /media, DELETE /media/{id}
AdsGET /ads, POST /ads/{id}/click; for administrators, GET|POST /ads/manage and PUT|DELETE /ads/manage/{id}
HealthGET /health

Example: publishing a post

POST /api/v1/posts
Authorization: Bearer eyJhbGciOi...
Content-Type: application/json

{
  "title": "Pagination that doesn't lie",
  "content_html": "<p>Always return total and pages.</p>",
  "link_url": "https://example.org/article",
  "image_media_id": null,
  "tags": ["fastapi", "databases"]
}

The response is the created post, with its sanitized HTML, tags, author, counters and your like, save and repost state.

Categories: DevelopersAPI

Contributing and license

The license

ArabDev is free software released under the GNU General Public License, version 3 or later (GPL-3.0-or-later). In short:

  • You may use, study, share and change ArabDev.
  • If you distribute ArabDev or a modified version, you must share its source code under the same license and keep the copyright and license notices.
  • ArabDev comes without any warranty.

This summary is for convenience. The license text itself is what applies.

Third-party components

ArabDev uses open-source libraries under their own licenses, listed in frontend/package.json and backend/pyproject.toml. The Alexandria, Tajawal and Anton fonts are used under the SIL Open Font License; each font folder under frontend/public/fonts includes its license.

To talk about contributing, sponsoring or partnering with ArabDev, write to hi@arabdev.site.

Contributing code

  • Keep the backend layering: routes call services, services use repositories.
  • Return errors with a stable code and add its translation to both language files.
  • Never put interface text directly in components: add keys to src/i18n/ar.json and src/i18n/en.json.
  • Use theme values, not hard-coded colors, and physical CSS properties that the RTL plugin can mirror (or logical ones where content direction matters).
  • Add or update tests for backend changes and run pytest, npm run typecheck and npm run format:check.
  • Update this wiki and the patch notes when behaviour changes.

Improving translations

Both languages live in two JSON files with identical keys. Arabic plural forms (zero, one, two, few, many, other) are supported and should be filled in for any text that contains a number.

Categories: DevelopersAbout