Skip to content

README.md

Latest commit

 

History

History
369 lines (269 loc) · 11.4 KB

README.md

File metadata and controls

369 lines (269 loc) · 11.4 KB
Raw

SocialMediaAPP 📱

A full-stack social media application built with ASP.NET Core Web API and React, featuring user management, posts, comments, followers, and comprehensive statistics with network visualization.

🚀 Features

Core Functionality

  • User Management: Complete CRUD operations for user accounts with authentication
  • Posts & Comments: Create, read, update, and delete posts with nested commenting system
  • Follower System: Follow/unfollow users with relationship tracking
  • Authentication: JWT-based authentication with secure password hashing (BCrypt)
  • Statistics Dashboard: Interactive charts and network graphs showing user engagement
  • Image Management: User profile image upload and management
  • Pagination: Efficient data loading with search and filtering capabilities

Advanced Features

  • Network Graph Visualization: Interactive network showing user relationships
  • Statistics Charts: Highcharts integration for data visualization
  • Cyclic Data Generation: Special controller for generating test data patterns
  • Real-time Updates: Dynamic content loading with infinite scroll
  • Responsive Design: Mobile-first approach with Tailwind CSS
  • WYSIWYG Editor: Rich text editing for posts and comments

🏗️ Architecture

Backend (.NET 8)

  • Framework: ASP.NET Core Web API 8.0
  • Database: SQL Server with Entity Framework Core 9.0.2
  • Authentication: JWT Bearer tokens with custom security implementation
  • API Documentation: Swagger/OpenAPI 3.0 with comprehensive documentation
  • Data Mapping: AutoMapper for DTO transformations
  • Password Security: BCrypt.Net for secure password hashing
  • CORS: Configured for cross-origin requests

Frontend (React 18)

  • Framework: React 18.3.1 with Vite build tool
  • Routing: React Router DOM 6.30.0
  • Styling: Tailwind CSS 4.0.11 with custom components
  • HTTP Client: Axios with interceptors for authentication
  • Charts: Highcharts React for data visualization
  • Text Editor: React Draft WYSIWYG for rich content creation
  • UI Components: Headless UI with Heroicons
  • Utilities: Moment.js for date handling, React CountUp for animations

📊 Database Schema

Core Entities

Users
├── ID (Primary Key)
├── Username
├── Password (BCrypt hashed)
├── Email
├── FirstName, LastName
├── BirthDate
├── CreatedAt
└── Image (Profile picture)

Posts
├── ID (Primary Key)
├── UserID (Foreign Key → Users)
├── Content (Rich text)
├── Likes
├── CreatedAt
└── Comments (One-to-Many)

Comments
├── ID (Primary Key)
├── UserID (Foreign Key → Users)
├── PostID (Foreign Key → Posts)
├── Content
├── Likes
└── CreatedAt

Followers
├── ID (Primary Key)
├── UserID (Foreign Key → Users) - Being followed
├── FollowerUserID (Foreign Key → Users) - Following
└── FollowedAt

Operators
├── ID (Primary Key)
├── UserID (Foreign Key → Users)
├── Email
└── Password (System administrators)

🔧 API Endpoints

Authentication

  • POST /api/v1/Authorization/token - Generate JWT token

Users

  • GET /api/v1/User - Get all users
  • GET /api/v1/User/{id} - Get user by ID
  • POST /api/v1/User - Create new user (public)
  • PUT /api/v1/User/{id} - Update user
  • DELETE /api/v1/User/{id} - Delete user
  • GET /api/v1/User/pagination/{page} - Paginated users with search
  • POST /api/v1/User/{id}/setImage - Upload profile image
  • GET /api/v1/User/generate/{amount} - Generate test users

Posts

  • GET /api/v1/Post - Get all posts with comments
  • GET /api/v1/Post/{id} - Get specific post
  • POST /api/v1/Post - Create new post
  • PUT /api/v1/Post/{id} - Update post
  • DELETE /api/v1/Post/{id} - Delete post
  • GET /api/v1/Post/pagination/{page} - Paginated posts with search
  • GET /api/v1/Post/generate/{amount} - Generate test posts

Comments

  • GET /api/v1/Comment - Get all comments
  • GET /api/v1/Comment/{id} - Get specific comment
  • POST /api/v1/Comment - Create new comment
  • PUT /api/v1/Comment/{id} - Update comment
  • DELETE /api/v1/Comment/{id} - Delete comment
  • GET /api/v1/Comment/pagination/{page} - Paginated comments

Followers

  • GET /api/v1/Follower - Get all follower relationships
  • POST /api/v1/Follower - Create follow relationship
  • DELETE /api/v1/Follower/{id} - Unfollow user
  • GET /api/v1/Follower/followStatuses - Check follow status
  • GET /api/v1/Follower/pagination/{page} - Paginated followers

Statistics

  • GET /api/v1/Statistics/totalData - Get total counts
  • GET /api/v1/Statistics/topUserStats - Get top user statistics
  • GET /api/v1/Statistics/randomUsers - Get random user data
  • GET /api/v1/Statistics/pagination/{page} - Paginated statistics

🛠️ Setup Instructions

Prerequisites

  • .NET 8.0 SDK
  • Node.js 18+ and npm/bun
  • SQL Server (LocalDB or full instance)
  • Visual Studio 2022 or VS Code

Backend Setup

  1. Clone the repository

    git clone https://github.com/Sacobrt/SocialMediaAPP.git
cd SocialMediaAPP/Backend

  2. Configure Database

    • Update appsettings.json with your SQL Server connection string
    • Run the database creation script: socialMedia.sql

  3. Install Dependencies

    dotnet restore

  4. Run the Application

    dotnet run
    • API will be available at https://localhost:7256
    • Swagger documentation at https://localhost:7256/swagger
    • Frontend will also start automatically and be available at http://localhost:5173

Frontend Setup

  1. Navigate to Frontend Directory

    cd SocialMediaAPP/Frontend

  2. Install Dependencies

    # Using npm
npm install

# Using bun (recommended)
bun install

  3. Configure API URL

    • Update src/constants.js with your backend URL if different

  4. Run Development Server

    # Using npm
npm run dev

# Using bun
bun run dev
    • Frontend will be available at http://localhost:5173

Production Build

# Frontend
bun run build

# This automatically moves built files to Backend/wwwroot
# Backend serves both API and frontend in production

🔐 Authentication & Security

JWT Implementation

  • Token Generation: 8-hour expiration with secure HMAC SHA256 signing
  • Claims: UserID, Username, Email, FirstName, LastName, Image
  • Security: BCrypt password hashing with salt rounds

Authorization Levels

  • Public Endpoints: User registration, token generation
  • Authenticated Endpoints: All CRUD operations require valid JWT
  • Operator System: Special admin accounts for system management

CORS Configuration

  • Configured for development and production environments
  • Allows all origins, methods, and headers in development
  • Restrictive settings recommended for production

📈 Statistics & Analytics

Dashboard Features

  • Total Counts: Users, Posts, Comments with animated counters
  • Most Liked Content: Interactive column charts
  • User Activity: Recent user registrations timeline
  • Network Graph: Interactive visualization of user relationships
  • Top Users: Statistics on most active users

Data Visualization

  • Highcharts Integration: Professional charting library
  • Interactive Elements: Hover effects, clickable data points
  • Responsive Design: Charts adapt to screen size
  • Real-time Updates: Data refreshes automatically

🔄 Data Management

Pagination System

  • Configurable Page Sizes: Default 20 items per page
  • Search Filtering: Full-text search across relevant fields
  • Sorting Options: Multiple sort criteria support
  • Performance Optimized: Efficient database queries with Entity Framework

Test Data Generation

  • Faker.Net Integration: Realistic test data generation
  • Bulk Operations: Generate hundreds of users, posts, comments
  • Relationship Maintenance: Proper foreign key relationships
  • Development Support: Quick setup for testing and development

🎨 Frontend Architecture

Component Structure

src/
├── components/          # Reusable UI components
│   ├── AuthContext.jsx  # Authentication context
│   ├── NavBar.jsx       # Navigation component
│   ├── NetworkGraph.jsx # D3.js network visualization
│   └── TotalData.jsx    # Statistics display
├── hooks/               # Custom React hooks
│   ├── useAuth.js       # Authentication management
│   ├── useError.js      # Error handling
│   └── parseJwt.js      # JWT token parsing
├── pages/               # Route components
│   ├── users/           # User management pages
│   ├── posts/           # Post management pages
│   ├── comments/        # Comment management pages
│   ├── followers/       # Follower management pages
│   └── Statistics.jsx   # Analytics dashboard
└── services/            # API communication
    ├── HttpService.js   # Axios configuration
    ├── AuthService.js   # Authentication API
    └── *Service.js      # Entity-specific APIs

State Management

  • React Context: Authentication and error state
  • Local Storage: JWT token persistence
  • Component State: UI-specific state management
  • HTTP Interceptors: Automatic token attachment and error handling

🚀 Deployment

Development Environment

  • Backend: https://localhost:7256
  • Frontend: http://localhost:5173
  • Database: SQL Server LocalDB

Production Environment

  • Static Files: Served from Backend wwwroot
  • SPA Support: Fallback routing for client-side navigation
  • HTTPS: Enforced for security

Build Process

  1. Frontend builds to dist/ directory
  2. Build script moves files to Backend/wwwroot/
  3. Backend serves both API and static files
  4. Single deployment artifact

📝 API Documentation

Swagger Integration

  • Comprehensive Documentation: All endpoints documented with examples
  • Authentication Support: JWT token testing interface
  • Multiple Environments: Development and production server configurations

Response Formats

  • Success Responses: Consistent JSON structure with data
  • Error Responses: Standardized error messages with HTTP status codes
  • Validation: Model state validation with detailed error messages

🧪 Testing & Development

Data Generation

  • Realistic Data: Faker.Net generates authentic-looking test data
  • Bulk Operations: Generate thousands of records quickly
  • Relationship Integrity: Maintains proper foreign key relationships
  • Development Seeding: Pre-populated data for immediate testing

Development Tools

  • Hot Reload: Both frontend and backend support hot reload
  • API Explorer: Swagger UI for API testing
  • Network Inspector: Browser dev tools for request monitoring
  • Error Handling: Comprehensive error boundaries and logging

📄 License

This project is licensed under the MIT License - suitable for educational and commercial use.

👨‍💻 Author