FriendZone+

Finally a zone you want to be in!
A modern social media application built with .NET and React

Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Features
4. Project Structure
5. Usage
6. Code Coverage
7. Roadmap
8. Contributing
9. License
10. Acknowledgments

About The Project

FriendZone+ is what happens when the teacher says "let's build a social media app in two weeks" and actually tries to do it. It's a not so modern social media application that allows users to connect, share posts, follow each other, and send real-time messages. Built with a clean architecture approach (because we had to pretend we knew what we were doing), it features a robust .NET backend with a React TypeScript frontend. Yes, it works. Mostly. Sometimes. We're still figuring it out.

Key Features

• User Authentication: Secure JWT-based authentication system
• Wall Posts: Share posts on your own wall or on friends' walls
• Follow System: Follow and unfollow other users
• Real-time Messaging: Send and receive messages instantly using SignalR
• User Profiles: Customizable user profiles with profile pictures
• User Discovery: Find and connect with other users

(back to top)

Built With

Backend

• 
• 
• 
• 
• 
• 
• 

Frontend

• 
• 
• 
• 
• 
• 

(back to top)

Getting Started

This section will guide you through setting up FriendZone+ locally on your machine.

Prerequisites

Before you begin, ensure you have the following installed:

• .NET 10.0 SDK or later

  # Check if .NET is installed
  dotnet --version

• Node.js (v18 or later) and npm

  # Check if Node.js is installed
  node --version
  npm --version

Installation

1. Clone the repository

   git clone https://github.com/kndynow/FriendZonePlus.git
   cd FriendZonePlus

2. Backend Setup

   Navigate to the backend directory:

   cd backend

   Restore NuGet packages:

   dotnet restore

   The database will be automatically created and migrated when you run the application. The default SQLite database file (friendzoneplus.db) will be created in the FriendZonePlus.API directory.

3. Frontend Setup

   Navigate to the frontend directory:

   cd ../frontend

   Install npm packages:

   npm install

4. Configuration

   Backend configuration is in backend/src/FriendZonePlus.API/appsettings.json. You may need to configure:

   • JWT settings (SecretKey, Issuer, Audience)
   • Connection string for the database

   Frontend API configuration is in frontend/src/api/client.ts. Ensure the API URL matches your backend configuration.

5. Running the Application

   Backend:

   cd backend/src/FriendZonePlus.API
   dotnet run

   The API will run on http://localhost:5000 (or the port specified in launchSettings.json)

   Frontend:

   cd frontend
   npm run dev

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

6. API Documentation

   When running in Development mode, you can access:

   • OpenAPI documentation at /openapi/v1.json
   • Scalar API Reference at /scalar

(back to top)

Features

• ✅ User Registration & Authentication

  • Secure password hashing with BCrypt
  • JWT token-based authentication
  • Cookie-based session management

• ✅ Wall Posts

  • Create posts on your own wall
  • Post on friends' walls
  • View posts from users you follow

• ✅ Follow System

  • Follow and unfollow users
  • View followers and following lists
  • Discover new users

• ✅ Real-time Messaging

  • Send and receive messages instantly
  • SignalR-powered real-time communication
  • Message read status tracking

• ✅ User Profiles

  • Customizable user profiles
  • Profile picture support
  • View user information and activity

(back to top)

Project Structure

FriendZonePlus/
├── backend/
│   ├── src/
│   │   ├── FriendZonePlus.API/          # Web API layer
│   │   ├── FriendZonePlus.Application/  # Application logic & services
│   │   ├── FriendZonePlus.Core/        # Domain entities & interfaces
│   │   └── FriendZonePlus.Infrastructure/ # Data access & external services
│   └── tests/
│       └── FriendZonePlus.UnitTests/    # Unit tests
├── frontend/
│   ├── src/
│   │   ├── api/                         # API client & services
│   │   ├── components/                  # Reusable UI components
│   │   ├── feature/                     # Feature-specific components
│   │   ├── hooks/                       # Custom React hooks
│   │   ├── pages/                       # Page components
│   │   └── types/                       # TypeScript type definitions
│   └── sass/                            # Stylesheets
└── learning-resources/                  # Documentation & learning materials

(back to top)

Usage

Running Tests

Backend Unit Tests:

cd backend
dotnet test

Code Coverage:

# On Windows
.\run-coverage.ps1

# On Unix/Linux/Mac
./run-coverage.sh

Development

The application uses:

• Clean Architecture for backend separation of concerns
• Repository Pattern for data access
• Dependency Injection throughout the application
• FluentValidation for request validation
• Mapster for object mapping

(back to top)

Code Coverage

The project uses Coverlet for code coverage analysis and ReportGenerator for generating HTML reports.

Current Coverage Statistics

• Line Coverage: 34.1% (187 of 548 coverable lines)
• Method Coverage: 58%
• Branch Coverage: 0% (0 of 12 branches)

Generating Coverage Reports

On Windows:

cd backend
.\run-coverage.ps1

On Unix/Linux/Mac:

cd backend
./run-coverage.sh

The coverage report will be generated in backend/coverage/report/index.html. Open this file in a browser to view the detailed coverage report.

Coverage by Assembly

• FriendZonePlus.Core: 100% line coverage
• FriendZonePlus.Application: 63.4% line coverage
• FriendZonePlus.Infrastructure: 63.6% line coverage
• FriendZonePlus.API: 0% line coverage (endpoints not yet covered by unit tests)

(back to top)

Roadmap

• Enhanced user profile customization
• Post likes and comments
• Image upload for posts
• Notifications system
• Search functionality
• Privacy settings

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

Top contributors:

License

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

(back to top)

Acknowledgments

• Best README Template
• .NET Documentation
• React Documentation

(back to top)