SimpleSocial

Social networking UI built with Next.js 14 — feed, messaging, profiles, notifications and settings.

Overview

SimpleSocial is a full social-network interface covering the complete product surface: home feed with post creation and searching, explore and topic discovery, profiles with an editor, bookmarks with folders, followers and who-to-follow discovery, direct messaging, notifications, post detail with comments and replies, plus settings and an authentication entry screen (sign in, sign up, password reset). State is managed with Zustand, styling with Sass modules, and interaction helpers cover toasts, tooltips, keyboard shortcuts, sliders and tag input.

Tech Stack

• Next.js 14 (App Router)
• TypeScript
• React 18
• Sass / CSS Modules
• Zustand (state)
• react-transition-group / react-animate-height (animations)
• react-hot-toast, react-tooltip, react-hotkeys-hook
• rc-slider, react-tag-input-component
• scroll-lock, usehooks-ts, uuid

Features

• Home feed with post creation, media and tag input
• Post actions: like, comment, replies, repost, bookmark, share
• Search with loading and no-result states
• Messaging UI with conversations, new-message flow and add-people
• Notifications center
• Profile pages plus profile editor with background/cover editing
• Bookmarks organized into folders
• Explore screen with topics and follower discovery
• Who-to-follow suggestions
• Post detail pages with threaded replies
• Settings with account, notifications, preferences, blocked accounts and contact support
• Entry screen with sign in, sign up and password reset

Getting Started

yarn install
yarn dev

Build, start and lint: yarn build, yarn start, yarn lint.

Project Structure

├── app/                 # routes (home, entry, explore, posts, profile, messages, notifications, bookmarks, followers, settings)
├── screens/             # full-page screen components (HomeScreen, ExploreScreen, MessagesScreen, ProfileScreen, ProfileEditScreen, SettingsScreen, …)
├── components/          # reusable UI (Post, Comment, Like, Message, Modal, Search, Sidebar, RightSidebar, …)
├── store/               # Zustand event store
├── constants/           # navigation configuration
├── mocks/               # seed data
├── styles/              # global Sass
└── public/              # static assets