Comunia Frontend

A responsive and accessible social media application built with Next.js 16, connecting to a NestJS backend.

✨ Key Features

🔐 Authentication & Security

Login with email and password
OAuth 2.0 login (Github, Google, and Facebook)
JWT token authentication with NextAuth.js
Middleware for route protection

👤 Profile Management

Update personal information, profile picture, and cover photo
Profile page with tabs: Posts, Media, About
Display lists of followers and following
Search for users with filters

📝 Content Interaction

Create, edit, and delete posts, comments, and replies
Like/unlike posts, comments, and replies
Add images and videos to posts
Drag & drop to sort media when creating/editing a post
Support for hashtags in posts
@mention users in posts, comments, and replies

📱 Feed & Discovery

Personalized feed with infinite scrolling
Real-time feed with auto-refresh
Trending page with popular hashtags
Search and discover new content
Bookmarks to save favorite posts
Activity history

🔔 Notifications & Activity

Real-time notification system
Activity logging
Notifications for new interactions

🎨 UI & Experience

Fully responsive design (mobile-first)
Dark/Light theme with theme switcher
Accessible components with React Aria
Full-page gallery for viewing photos/videos
Smooth animations with Framer Motion
Modern UI with shadcn/ui components

👥 Groups & Community

Join and manage groups
"My Groups" page to view joined groups
Admin panel for moderation

🛠️ Tech Stack

Frontend Core

Next.js 16 - React framework with App Router, Turbopack default bundler
React 19 - UI library with Server & Client Components and React Compiler support
TypeScript - Type safety
Tailwind CSS - Utility-first CSS framework

State Management & Data Fetching

TanStack Query - Server state management
Axios - HTTP client
Zustand - Client state management

UI Components & Styling

shadcn/ui - Re-usable component library
Radix UI - Unstyled, accessible components
React Aria - Accessibility hooks
Lucide React - Icon library
Framer Motion - Animation library

Forms & Validation

React Hook Form - Form management
Zod - Schema validation
@hookform/resolvers - Form validation resolvers

Authentication & Security

NextAuth.js - Authentication solution
Jose - JWT operations
bcryptjs - Password hashing

Media & Rich Content

DND Kit - Drag and drop functionality
Swiper - Touch slider
DOMPurify - HTML sanitization
html-react-parser - HTML parsing

Development & Code Quality

ESLint - Code linting
Prettier - Code formatting
TypeScript ESLint - TypeScript linting

📁 Project Structure

comunia/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── (auth)/            # Auth layout group
│   │   ├── (protected)/       # Protected routes
│   │   │   ├── feed/          # Main feed page
│   │   │   ├── [username]/    # User profile pages
│   │   │   ├── groups/        # Groups functionality
│   │   │   ├── notifications/ # Notifications page
│   │   │   └── ...
│   │   ├── (unprotected)/     # Public routes
│   │   ├── admin/             # Admin panel
│   │   └── layout.tsx         # Root layout
│   ├── components/            # Reusable UI components
│   │   ├── ui/               # Base UI components (shadcn/ui)
│   │   ├── feed/             # Feed-related components
│   │   └── ...
│   ├── hooks/                # Custom React hooks
│   ├── lib/                  # Utility functions
│   ├── types/                # TypeScript type definitions
│   ├── contexts/             # React contexts
│   └── constants/            # App constants
├── public/                   # Static assets
└── docs/                    # Documentation

🚀 Getting Started

Prerequisites

Node.js 18+
npm or yarn
Backend API running on port 3001

Installation

Clone repository:

git clone https://github.com/lugondev/comunia.git
cd comunia

Install dependencies:

pnpm install

Environment Setup: Create a .env.local file in the root directory:

# NextAuth Configuration
NEXTAUTH_URL=http://localhost:3002
NEXTAUTH_SECRET=your-secret-key

# OAuth Providers
GITHUB_CLIENT_ID=your-github-client-id
GITHUB_CLIENT_SECRET=your-github-client-secret

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

FACEBOOK_CLIENT_ID=your-facebook-client-id
FACEBOOK_CLIENT_SECRET=your-facebook-client-secret

# Backend API
NEXT_PUBLIC_API_URL=http://localhost:3001
API_URL=http://localhost:3001

# Database (if needed)
DATABASE_URL=postgresql://username:password@localhost:5432/comunia

Run development server:

pnpm run dev

The frontend will run on http://localhost:3002

Build for Production

pnpm run build
pnpm run start

🧰 Troubleshooting

If you see a warning like "Ignored build scripts ... Run pnpm approve-builds":
```
pnpm approve-builds
```
Then re-run the install/build command.

🏗️ Architecture

Next.js App Router

The project uses Next.js 16 with the App Router, leveraging:

Server Components - Render server-side for performance
Client Components - Interactive UI components
Route Groups - Organize routes by layout
Nested Layouts - Shared layouts for route groups
Middleware - Authentication & route protection
Turbopack - Default dev bundler in Next 16 for faster HMR and rebuilds
React Compiler - Leverages React 19 compiler improvements

State Management

TanStack Query - Server state, caching, and synchronization
React Context - Authentication state and theme
Local State - Component-level state with useState/useReducer

Data Fetching Pattern

// Example: Custom hook with TanStack Query
export function useFeed(feedType: FeedType) {
    return useInfiniteQuery({
        queryKey: ['feed', feedType],
        queryFn: ({ pageParam = 1 }) => fetchFeed(feedType, pageParam),
        getNextPageParam: (lastPage) => lastPage.nextPage,
        staleTime: 5 * 60 * 1000, // 5 minutes
    })
}

Component Structure

// Composition pattern with compound components
<FeedContainer>
    <FeedTabs />
    <PostList>
        <PostCard>
            <PostHeader />
            <PostContent />
            <PostActions />
        </PostCard>
    </PostList>
</FeedContainer>

🎨 UI Components

Design System

Color System: Semantic colors with CSS variables
Typography: Poppins font family with responsive sizing
Spacing: Consistent spacing scale with Tailwind
Breakpoints: Mobile-first responsive design

Component Library

Using shadcn/ui as a base, extended with:

Custom animations with Framer Motion
Accessible components with React Aria
Form components with React Hook Form integration

🔐 Authentication Flow

Login Page - Email/password or OAuth providers
Middleware Check - Verify JWT token
Protected Routes - Redirect if not authenticated
Token Refresh - Auto-refresh expired tokens
Logout - Clear tokens and redirect

📱 Responsive Design

Breakpoints

Mobile: < 768px - Single column layout
Tablet: 768px - 1024px - Adapted layouts
Desktop: > 1024px - Multi-column with sidebar

Mobile-First Features

Touch-friendly interactions
Swipe gestures for media gallery
Bottom navigation on mobile
Optimized infinite scroll

🚀 Performance Optimizations

Code Splitting

Route-based code splitting with Next.js
Dynamic imports for heavy components
Lazy loading for images and videos

Caching Strategy

TanStack Query cache with stale-while-revalidate
Next.js static generation for public pages
Browser caching for static assets

Bundle Optimization

// next.config.js
module.exports = {
    experimental: {
        optimizePackageImports: ['lucide-react', '@radix-ui/react-*'],
    },
    images: {
        domains: ['localhost', 'your-cdn-domain.com'],
    },
}

🧪 Testing Strategy

Testing Stack

Unit Tests: Jest + React Testing Library
Integration Tests: Playwright
E2E Tests: Cypress (planned)

Test Commands

npm run test           # Unit tests
npm run test:watch     # Watch mode
npm run test:e2e       # E2E tests

🔧 Development Guidelines

Code Style

ESLint + Prettier - Enforced code formatting
TypeScript Strict Mode - Type safety
Absolute Imports - Clean import paths with @/ alias

Commit Convention

feat: add new post creation modal
fix: resolve infinite scroll bug
docs: update README with deployment steps
style: improve mobile navigation layout

Component Guidelines

// Use function declarations for components
export default function ComponentName() {
    // Custom hooks at the top
    const { user } = useUser()
    const { data, isLoading } = useQuery(...)
    
    // Event handlers
    const handleClick = useCallback(() => {
        // Implementation
    }, [])
    
    // Early returns for loading/error states
    if (isLoading) return <LoadingSkeleton />
    
    return (
        <div className="component-container">
            {/* JSX content */}
        </div>
    )
}

🚀 Deployment

Frontend Deployment on EC2

Setup Environment:

# Clone repository
git clone https://github.com/lugondev/comunia.git
cd comunia

# Install dependencies
npm install

# Setup environment variables
cp .env.example .env.local
# Edit .env.local with production values

Build Application:

# Production build
npm run build

# Start production server
npm start
# or use PM2
npm run pm2

Nginx Configuration:

server {
        listen 80;
        server_name your-domain.com;
        
        location / {
                proxy_pass http://localhost:3002;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }
}

Environment Variables for Production

NODE_ENV=production
NEXTAUTH_URL=https://your-domain.com
NEXT_PUBLIC_API_URL=https://api.your-domain.com
# Add other production secrets

📊 Monitoring & Analytics

Performance Monitoring

Next.js Analytics - Core Web Vitals tracking
Vercel Analytics - Real-time performance data
Custom Metrics - User engagement tracking

Error Tracking

Sentry Integration - Error monitoring and alerting
Console Logging - Development debugging

🤝 Contributing

Development Setup

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Commit your changes: git commit -m 'feat: add amazing feature'
Push to the branch: git push origin feature/amazing-feature
Open a Pull Request

Pull Request Guidelines

Ensure all tests pass
Update documentation if necessary
Follow coding conventions
Add screenshots for UI changes

📚 Additional Resources

Documentation

Backend Integration

Backend API documentation: /docs/backend-api-status-report.md
Authentication flow: /docs/auth-system.md
Database schema: /comunia-backend/prisma/schema.prisma

📝 License

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

👨‍💻 Author

Lugon - GitHub

Note: This project is under active development and may contain bugs. It will be continuously updated to keep up with the latest framework changes.

Name		Name	Last commit message	Last commit date
Latest commit History 717 Commits
public		public
scripts		scripts
src		src
.env.example		.env.example
.env.local.example		.env.local.example
.eslintignore		.eslintignore
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
components.json		components.json
docker-compose.yml		docker-compose.yml
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.js		postcss.config.js
prettier.config.js		prettier.config.js
proxy.ts		proxy.ts
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

Comunia Frontend

✨ Key Features

🔐 Authentication & Security

👤 Profile Management

📝 Content Interaction

📱 Feed & Discovery

🔔 Notifications & Activity

🎨 UI & Experience

👥 Groups & Community

🛠️ Tech Stack

Frontend Core

State Management & Data Fetching

UI Components & Styling

Forms & Validation

Authentication & Security

Media & Rich Content

Development & Code Quality

📁 Project Structure

🚀 Getting Started

Prerequisites

Installation

Build for Production

🧰 Troubleshooting

🏗️ Architecture

Next.js App Router

State Management

Data Fetching Pattern

Component Structure

🎨 UI Components

Design System

Component Library

🔐 Authentication Flow

📱 Responsive Design

Breakpoints

Mobile-First Features

🚀 Performance Optimizations

Code Splitting

Caching Strategy

Bundle Optimization

🧪 Testing Strategy

Testing Stack

Test Commands

🔧 Development Guidelines

Code Style

Commit Convention

Component Guidelines

🚀 Deployment

Frontend Deployment on EC2

Environment Variables for Production

📊 Monitoring & Analytics

Performance Monitoring

Error Tracking

🤝 Contributing

Development Setup

Pull Request Guidelines

📚 Additional Resources

Documentation

Backend Integration

📝 License

👨‍💻 Author

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages