Skip to content

The Real Neighbors v1.0.0 🎉

Choose a tag to compare

View all tags
@CyberSphinxxx CyberSphinxxx released this 01 Jun 22:42
· 267 commits to main since this release
v1.0.0
d990756

Welcome to the release (v1.0.0) of The Real Neighbors! This major release transforms the project from a scaffold into a full-fledged, highly-optimized, real-time social platform designed for close-knit communities. We've packed this release with everything from real-time feeds and live presence to a custom theming engine and robust performance optimizations.

Here is the complete list of features, updates, and improvements included in this release.

🚀 Core Features & Social Experience

Real-Time Social Feed

  • Dynamic Post Feed: A fully realized, real-time social feed where users can share updates, links, and media.
  • Rich Post Composer: Includes automatic Open Graph link preview generation so shared URLs look great instantly.
  • Interactive Reactions: Users can react to posts in real-time.
  • Inline Real-Time Comments: A threaded comment system supporting live updates and discussions natively on the post card.
  • Post Detail Modal: A dedicated modal view for deep-diving into individual posts and their comment threads without losing your place in the feed.
  • Admin Pinning: Administrators can pin important posts to the top of the feed.

Reddit Integration (Explore Tab)

  • Built-in RSS Proxy: View content from your favorite subreddits directly within the app without leaving the platform.
  • Subreddit Manager: Add, remove, and manage which subreddits appear in your feed.
  • Reddit Post Cards: Specially formatted cards for Reddit content seamlessly integrated into the feed layout.

Events Management

  • Dedicated Events Page: Browse all upcoming and past events in a unified view.
  • Create Event Modal: easily schedule new gatherings using a custom DateTimePicker.
  • Shared Event Calendar: An interactive inline calendar to visualize community events.
  • Event Detail Page & RSVPs: Track who is attending, read event notes, and engage in event-specific discussion boards.
  • Event Sidebar Widget: Keeps the most imminent upcoming events visible at all times.

Birthdays Hub

  • Birthdays Page: A comprehensive directory of all community members' birthdays.
  • Birthday Message Board: Leave celebratory messages for neighbors on their special day.
  • Birthday Picker: Easy onboarding UI for users to set their birth dates.
  • Birthday Sidebar Widget: Highlights whose birthday is coming up next so you never miss an occasion.

Shared Resources & Watchlist

  • Curated Watchlist: A dedicated page to track movies/shows the community wants to watch, featuring "Consensus Optimizations" to highlight the most popular picks.
  • Watch Together Sessions: Plan and sync watch parties natively through the platform.
  • Community Links Directory: A centralized hub (LinksPage) for important URLs and shared resources.

🎨 UI/UX & Design Engine

Advanced Theming System

  • CSS Variable Driven: Completely overhauled the design system to use semantic CSS variables.
  • Multiple Curated Themes: Users can choose from 6 distinctly crafted aesthetic themes:
    • Dark (Standard)
    • Amoled (Deep black for OLED displays)
    • Sunset (Warm, vibrant orange/purple hues)
    • Ocean (Deep blue, aquatic tones)
    • Midnight (Sleek, muted dark blues)
    • Forest (Earthy, natural greens)

Premium Animations & Interactions

  • Redesigned Login Experience: An immersive, interactive login page featuring a dynamic particle/aurora background, text scramble effects, and 3D tilted cards (powered by GSAP, Vanilla-tilt, and tsparticles).
  • Smooth Scrolling: Integrated lenis for buttery-smooth page scrolling.
  • Celebratory Confetti: Implemented canvas-confetti for delightful micro-interactions (e.g., on birthdays or goal completions).
  • Reusable Tooltips: Custom-built tooltip components to provide context without cluttering the UI.
  • Deterministic Avatars: A new utility (avatarColor) that automatically assigns a consistent, unique color hash to users without custom profile pictures.

🔔 Engagement & Live Presence

Real-Time Presence

  • Live Online Status: Powered by Firebase Realtime Database (RTDB), the app tracks who is currently online.
  • Online Sidebar Widget: See exactly which neighbors are currently active on the platform.
  • Avatar Status Indicators: Green "online" dots appear on avatars across the app (in posts, comments, and the sidebar).

Notifications & Streaks

  • Interactive Notification Bell: A centralized hub for all alerts, utilizing a queueing system (useStartupNotifications) so you aren't overwhelmed upon logging in.
  • Streak Tracking: Built-in gamification that tracks consecutive login/interaction streaks.
  • Group Streak Widget: See how long the community has collectively kept their streak alive.
  • Interactive Mini-Poll Widget: Quick, real-time sidebar polls to gauge community opinion.

Profiles & Customization

  • Comprehensive Settings Page: Manage notification preferences, active themes, and streak configurations.
  • Top Movies Selector: Users can showcase their favorite films directly on their user profiles.

⚡ Performance & Architecture

  • Virtualized Post Feed: Implemented @tanstack/react-virtual to ensure the feed remains 100% smooth and lag-free, even with hundreds of rendered posts and media items.
  • Route-Based Code Splitting: Heavy pages and components are now lazy-loaded, drastically reducing the initial bundle size. Includes beautiful page skeleton loaders during transitions.
  • Aggressive Memoization: Wrapped high-frequency components (like PostCard, sidebar widgets, and layout shells) in React.memo to prevent unnecessary re-renders.
  • Multi-layered Caching:
    • In-memory Caching (Zustand Stores) for rapid state access.
    • Client-side Caching for Birthday/Event listings.
    • LocalStorage for Reddit feed prefetching.
  • Optimized Firestore Queries: Integrated pagination and cursors to limit data over-fetching.

🔒 Security & Infrastructure

  • Global Authentication: Implemented robust auth state management using Zustand and Firebase Auth.
  • Protected Routing: Strict route guards prevent unauthenticated access to the main application.
  • Advanced Security Rules:
    • Restructured Firestore and Realtime Database rules.
    • Added specific permissions to allow non-authors to update seenBy, reactions, and streaks securely without compromising document integrity.
  • Progressive Web App (PWA) Ready: Configured vite-plugin-pwa for future offline support and installability.
  • Environment & Deployment: Configured Firebase Hosting, Vercel deployments, and added a utility script for seeding admin users.

Version 1.0.0 lays the foundation for a vibrant, fast, and connected neighborhood. Enjoy the new space!

Full Changelog: https://github.com/CyberSphinxxx/The-Real-Neighbors/commits/v1.0.0

Assets 2
Loading