Child-Free Platform - Frontend

Next.js Frontend for the Child-Free Community Platform

A prototype full-stack social application built with Next.js 15, Auth.js , and TypeScript. It features a hybrid authentication system, real-time messaging, and community engagement tools.

Table of Contents

1. About The Project
   • Key Features
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
   • Environment Variables
3. Usage
4. Running Tests
5. Architecture Overview
6. Roadmap
7. License
8. Contact

---

About The Project

This repository contains the frontend portion of the CF Platform, a dedicated social space for the child-free community. It connects with a NestJS backend to provide a secure and interactive user experience.

The application leverages a Hybrid Session Architecture:

• Social Login: Google OAuth is managed by Auth.js (NextAuth v5).
• Credentials: Email/Password login is handled directly by the NestJS backend.
• Session Bridge: A specialized bridging mechanism synchronizes the NextAuth session with the backend's cookie-based HTTP-only session, to ensure a unified state across the app.

Key Features

• Community Groups: Discover, create, and join interest-based groups to connect with like-minded individuals.
• Events & Meetups: Browse upcoming local and virtual events, create new ones, and manage RSVPs.
• Real-Time Messaging: Instant private messaging powered by Socket.io, featuring read receipts and live updates.
• Customizable Profiles: Users can edit their bio, location, and interests, and view their event/group history.
• Secure Authentication: Robust protection using JWTs and secure session cookies.

Built With

This project is built with a modern, type-safe, and performant technology stack.

• Next.js
• React
• TypeScript
• Auth.js
• SWR - for data fetching
• Socket.io Client - Real-time event-based communication
• TailwindCSS
• Shadcn UI
• Cypress - End-to-End Testing

Getting Started

To get a local copy up and running, follow these steps.

Prerequisites

You must have Node.js 22 (or higher) and npm installed on your machine.

npm install npm@latest -g

Installation

1. Clone the repo

   git clone https://github.com/sbassong/cf-platform-frontend.git

2. Navigate into the project directory

   cd cf-platform-frontend

3. Install NPM packages

   npm install

Environment Variables

This project requires several environment variables to run. Create a file named .env.local in the root of your project and add the following variables.

# Auth.js (NextAuth.js) Secret
# A long, random string used to encrypt the session JWT.
# Generate one with: openssl rand -base64 32
AUTH_SECRET="your-super-secret-string-for-next-auth"

# Google OAuth Credentials
# Get these from your project in the Google Cloud Console.
GOOGLE_CLIENT_ID="your-google-client-id.apps.googleusercontent.com"
GOOGLE_CLIENT_SECRET="your-google-client-secret"

# Auth.js (NextAuth.js) Configuration
# The canonical URL of your Next.js application. Required for OAuth redirects.
NEXTAUTH_URL="http://localhost:3000"

# Backend API URL
# The URL for your corresponding NestJS backend service.
NEXT_PUBLIC_LOCAL_BACKEND_URL="http://localhost:3001"

Usage

Once the environment variables are set, you can run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result. The page will auto-update as you edit the files.

---

Running Tests

This project uses Cypress for end-to-end (E2E) testing to ensure the reliability of key user flows.

End-to-End Tests (In progress)

The E2E test suite currently covers:

• Authentication: Sign-in/Sign-up (Credentials & OAuth), Sign-out, and Session Bridging.

How to Run E2E Tests

1. Start the development server:

   npm run dev

2. Open the Cypress Test Runner: In a separate terminal window, run:

   npx cypress open

3. Select E2E Testing, choose your browser, and run the desired spec files.

---

Architecture Overview

Authentication & Sessions

• /auth.ts: Configures Auth.js providers and callbacks.
• src/app/context/AuthContext.tsx: Provides a global useAuth hook that unifies NextAuth and Backend sessions into a single user object.
• src/app/(auth)/bridge: HHndles the synchronization of Google OAuth sessions with the backend database.

Data Fetching

• SWR: Used throughout the application (e.g., useSWR('/events', fetcher)) for efficient, cached, and optimistic UI updates.
• src/lib/api.ts: Contains the core fetcher and API utility functions.

Real-Time Communication

• src/hooks/use-messaging-socket.ts: A custom hook that manages the Socket.io connection, handling events like sendMessage and receiveMessage for the chat functionality.

---

Roadmap

The following features have been implemented or are planned:

• User Authentication (Google & credentials)
• User Profile Editing (Bio, location, Interests)
• Events System (Create, View, Attend)
• Groups & Communities (Create, Join, Post)
• Real-time Chat (live messaging)
• Advanced moderation tools
• Push Notifications
• Mobile-responsive optimizations
• Mobile app migration

---

License

Distributed under the MIT License. See LICENSE.txt for more information.

---

Contact

Samuel Bassong – sam.bassong@gmail.com - linkedin.com/in/sambassong