Skip to content

AditiV05/Familiar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

107 Commits
 
 
 
 
 
 

Repository files navigation

Familiar

A Medium-style blogging platform for writing, reading, and responding to stories.

Built with the MERN stack and a focus on a clean, editorial reading experience.

View Live →


React Vite Node.js Express MongoDB JWT


✦ About

Familiar is a full-stack blogging app modeled on the reading and writing experience of Medium. Writers publish articles with a rich-text editor, readers follow authors and respond to stories, and everyone gets an editorial, distraction-free interface. It was built to be a complete, production-deployed application rather than a demo, covering authentication, email flows, a full engagement system, and a responsive front end.

✦ Features

Writing & Reading

  • Rich-text article editor (Quill) with title, description, and body
  • Home feed with infinite scroll
  • Full article pages with author byline, read-time estimate, and clean typography
  • Edit and delete your own articles

Engagement

  • Likes with optimistic UI updates
  • Bookmarks and a dedicated Saved page
  • Threaded comments with one level of replies
  • Comment and reply deletion (by the comment author or the article owner)
  • In-app notifications when someone likes, comments on, or replies to your work, with an unread badge that polls for updates

Social

  • User profiles with avatar, bio, and follower / following / story counts
  • Follow and unfollow other writers
  • Editable profiles

Accounts & Auth

  • Email and password signup with hashed passwords (bcrypt)
  • Google OAuth login (Passport)
  • JWT-based sessions
  • Email verification on signup, with login blocked until the address is confirmed
  • Password reset via emailed link, with a 1-hour expiry

Experience

  • Responsive layout across desktop and mobile
  • Custom avatar system: colored circle with the user's initial, color derived from their name (no image uploads by design)

✦ Tech Stack

Layer Technologies
Frontend React, Vite, React Router, plain CSS
Backend Node.js, Express, Mongoose
Database MongoDB
Auth JWT, Passport (Google OAuth), bcrypt
Email Resend
Hosting Vercel (frontend), Render (backend)

✦ Design

Familiar uses an editorial visual language, intentionally minimal and text-forward.

Token Value
Accent Oxblood #5c1a2b
Display font Fraunces (serif)
UI font Inter
Avatars Initial-based colored circles, hashed from the user's name

✦ Architecture Notes

  • Passwords are hashed with bcrypt, never stored or transmitted in plaintext.
  • Authentication uses signed JWTs; the token carries only a user ID.
  • Notifications are created server-side when an engagement action occurs, skip self-actions, and are fetched on a lightweight client poll so the unread badge stays current without a full page refresh.
  • Email verification gates login: unverified accounts cannot sign in.
  • Password reset returns an identical response whether or not an account exists, preventing account enumeration. Tokens expire after an hour and are cleared on use.

✦ Status

Familiar is live and actively maintained. It has grown well beyond its original scope into a fuller product, with notifications, refined responsive design, and ongoing improvements to the account and engagement systems.


Built by Aditi · familiar-blog.vercel.app

About

A Medium-style blogging platform for writing, reading, and responding to stories. React + Node + MongoDB.

Resources

Stars

Watchers

Forks

Packages

Contributors

Languages