🌐 Nexora

A modern full-featured social media platform built with React 19

🚀 Live Demo  ·  🐛 Report Bug  ·  ✨ Request Feature

• About The Project
• What's New in v2.0
• Tech Stack
• Features
• Getting Started
• Project Structure
• Context Architecture
• API Documentation
• Pages & Routes
• Contributing
• Contact

Nexora is a full-featured social media platform where users can connect, share posts, react to content, follow people, and build their network. Built with the latest React 19, TanStack Query v5, and HeroUI, Nexora delivers a seamless and polished experience across all devices.

Full changelog at /updates

• Follow / Unfollow with optimistic UI, mutual follower badges, and paginated suggestions
• Infinite pagination on suggestions, comments, and replies via useInfiniteQuery
• Real-time notifications — unread badge, mark-one-read, mark-all-read
• Full comment & reply system — create, edit, delete, like, paginated replies via CommentContext
• Repost with caption — inline on feed, post card, and post page
• Bookmark toggle with paginated library, sort by date or popularity
• Image expand modal on ProfilePostCard with download support
• Pricing page — Free / Pro / Elite with monthly/yearly toggle and feature comparison table
• Features showcase page with interactive hover cards
• Updates & changelog page

• All like / bookmark mutations extracted to QuickActionsContext — no more prop-drilled mutations
• CommentContext is now the single source of truth for all comment state across the app
• FollowContext migrated to useInfiniteQuery for proper paginated suggestions
• queryClient.invalidateQueries updated to TQ v5 object syntax throughout

• Fixed FollowContext crash — QueryClient called on class instead of hook instance
• Fixed axios.put auth header passed as body instead of config
• Fixed WhoToFollow undefined context crash when rendered outside provider
• Fixed post liked state initialization using unreliable likes[] array
• Fixed PostPage deprecated onSuccess callback replaced with useEffect

• Base URL: https://linked-posts.routemisr.com
• Auth: Bearer token (JWT) via Authorization header
• Storage: Cloudflare R2 for media

• Registration, login, and JWT token management
• Profile photo upload to Cloudflare R2
• Password change with token rotation
• Follow / unfollow with mutual follower count
• Paginated follow suggestions

• Create posts with body text and image upload
• Edit and delete own posts
• Home timeline — All / Following / Me tabs
• Privacy per post — Public, Followers only, Private
• Like / unlike with optimistic updates
• Bookmark / unbookmark with instant toggle
• Repost with optional caption

• Paginated comments via infinite scroll
• Nested replies with their own pagination
• Like comments
• Edit and delete own comments
• Images in comments

• Real-time unread badge count
• Mark individual or all notifications as read
• Paginated notification list

• Explore feed with trending topics sidebar and Who to Follow
• Bookmarks library with sort controls
• Suggested friends grid with search and filter
• Individual post page with full comment thread
• User profiles with posts grid
• Pricing page (Free / Pro / Elite)
• Features showcase
• Changelog / Updates
• About, Contact, Support, Download App
• Privacy Policy, Terms of Service, Cookie Policy, Licensing, Press Kit

• Node.js v18 or higher
• npm or yarn

# 1. Clone the repository
git clone https://github.com/Abdelrahman968/nexora-route.git
cd nexora-route

# 2. Install dependencies
npm install

# 3. Create environment file
cp .env.example .env

VITE_BASE_URL=https://linked-posts.routemisr.com

npm run dev
# → http://localhost:5173

npm run build
npm run preview

npm run dev        # Start dev server with HMR
npm run build      # Production build → dist/
npm run preview    # Preview production build locally
npm run lint       # Run ESLint

nexora/
├── public/
│   └── logo.png
├── src/
│   ├── assets/
│   ├── component/
│   │   ├── Comment/
│   │   │   └── Comment.jsx          # Comments sheet + DeleteModal + ShareModal
│   │   ├── CreatePost/
│   │   │   └── CreatePost.jsx
│   │   ├── Donation/
│   │   ├── DownloadApp/
│   │   ├── Error/
│   │   ├── Explore/
│   │   │   └── Explore.jsx          # Feed tabs + WhoToFollow sidebar
│   │   ├── ForgotPassword/
│   │   ├── Loading/
│   │   ├── Login/
│   │   ├── Navbar/
│   │   ├── Notifications/
│   │   ├── PostCard/
│   │   │   └── PostCard.jsx         # Feed post card (optimistic like/bookmark)
│   │   ├── Postpage/
│   │   │   └── Postpage.jsx         # Full post page with comments
│   │   ├── Profile/
│   │   │   ├── Profile.jsx
│   │   │   └── UserProfile.jsx
│   │   ├── ProfilePostCard/
│   │   │   └── ProfilePostCard.jsx  # Grid card with hover overlay
│   │   ├── Register/
│   │   ├── SEO/
│   │   │   └── SEO.jsx
│   │   ├── Settings/
│   │   ├── SuggestedFriends/
│   │   │   └── SuggestedFriends.jsx # Full suggested friends page
│   │   ├── Support/
│   │   ├── Footer/
│   │   └── WhoToFollow/
│   │       └── WhoToFollow.jsx      # Sidebar widget (real API)
│   ├── context/
│   │   ├── AuthContext.jsx          # JWT token + user session
│   │   ├── CommentContext.jsx       # Comments, replies, likes CRUD
│   │   ├── FollowContext.jsx        # Suggestions (infinite), follow toggle
│   │   ├── NotificationContext.jsx  # Notifications + unread count
│   │   ├── PostContext.jsx          # Home feed with tab switching
│   │   ├── ProfileInfoContext.jsx   # Current user profile data
│   │   ├── ProtectedRoute.jsx       # Auth guard HOC
│   │   ├── QuickActionsContext.jsx  # Post like, likes list, bookmark
│   │   └── ToastContext.jsx         # Global toast notifications
│   ├── pages/
│   │   ├── About/
│   │   ├── Bookmarks/
│   │   │   └── Bookmarks.jsx
│   │   ├── Contact/
│   │   ├── Cookiepolicy/
│   │   ├── Error404/
│   │   ├── Features/
│   │   │   └── Features.jsx         # Feature showcase page
│   │   ├── Home/
│   │   ├── Layout/
│   │   │   └── Layout.jsx
│   │   ├── Licensing/
│   │   ├── Presskit/
│   │   ├── Pricing/
│   │   │   └── Pricing.jsx          # Plans + comparison table + FAQ
│   │   ├── PrivacyPolicy/
│   │   ├── Termsofservice/
│   │   └── Updates/
│   │       └── Updates.jsx          # Changelog page
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .env
├── .gitignore
├── eslint.config.js
├── index.html
├── package.json
└── vite.config.js

Nexora uses a layered context system. Each context has a single responsibility:

App
└── HeroUIProvider
    └── QueryClientProvider
        └── ToastContextProvider
            └── RouterProvider
                └── AuthContextProvider           # JWT session
                    └── ProfileInfoContextProvider # Current user data
                        └── NotificationProvider  # Unread count + list
                            └── QuickActionsProvider # Post like / bookmark
                                └── CommentProvider  # Comments / replies
                                    └── ProtectedRoute
                                        └── Layout
                                            ├── PostContextProvider  # Feed (per route)
                                            └── FollowContextProvider # Suggestions (per route)

https://linked-posts.routemisr.com

Success

{
  "success": true,
  "message": "success",
  "data": {},
  "meta": {}
}

Error

{
  "success": false,
  "message": "Validation error message",
  "errors": ["field error 1", "field error 2"]
}

POST /users/signup
Content-Type: application/json

{
  "name": "string",
  "email": "string",
  "password": "string",
  "rePassword": "string",
  "dateOfBirth": "YYYY-MM-DD",
  "gender": "male | female"
}

POST /users/signin
Content-Type: application/json

{
  "email": "string",
  "password": "string"
}

POST /posts
Authorization: Bearer {token}
Content-Type: multipart/form-data

body: "string"
image: File (optional)
privacy: "public | following | private"

Contributions are welcome and greatly appreciated!

1. Fork the repository
2. Create your feature branch — git checkout -b feature/your-feature
3. Commit your changes — git commit -m 'feat: add your feature'
4. Push to the branch — git push origin feature/your-feature
5. Open a Pull Request

Please follow the existing code patterns — use the context system for shared state, prefer optimistic updates for UX-sensitive actions, and keep components focused on presentation.

This project is licensed under the MIT License — see the LICENSE file for details.

Abdelrahman

• GitHub: @Abdelrahman968
• Email: [email protected]
• Live Demo: nexora-route.netlify.app
• Project: github.com/Abdelrahman968/nexora-route

• React — UI library
• TanStack Query — Server state management
• Vite — Blazing fast build tool
• Tailwind CSS — Utility-first CSS
• HeroUI — Beautiful component library
• Framer Motion — Animations
• Route Academy — API provider
• Netlify — Hosting & CI/CD