Reactivities

A social app for sharing and exploring community activities. Users can create events, follow others, and engage in real-time chat.

---

📘 Table of Contents

1. About the Project
2. Features
3. Tech Stack
4. Integrations
5. Visuals
6. Getting Started
7. Usage
8. Acknowledgments

---

🧹 About the Project

Reactivities is a social platform where users can:

• Share activities they host or attend
• Connect and chat with other community members
• Follow users and explore events by category

---

🚀 Features

• Register (with email confirmation)
• Facebook registration
• Login/logout using JWT with refresh tokens
• Create, edit, and delete activities
• Attend or own activities
• Real-time chat in activity detail pages
• Sort and filter activities
• Follow/unfollow users
• Profile picture uploads
• View user profiles
• Full client/server-side validation

---

🧱 Tech Stack

Architecture

• Clean Architecture
• CQRS with Mediator design pattern

Backend

• .NET Core 8
• C#
• Entity Framework Core
• AutoMapper
• FluentValidation
• Identity
• JWT
• SignalR

Frontend

• React 18.3.1
• TypeScript
• MobX
• Axios
• Semantic UI 2.1.5

Database

• Microsoft SQL Server

Tools

• Visual Studio
• VS Code

---

🔗 Integrations

Email

• Resend

Social Login

• Facebook SDK

---

🖼️ Visuals

• Landing Page

• Register Page

• Login Page

• Facebook Login

• Home Page

• Activity Details

• Create/Edit Activity

• Profile Page

---

🛠️ Getting Started

Prerequisites

• Install Node.js 20+ and npm
• Install .NET Core 8 SDK
• Install Docker

1. Clone the Repository

git clone https://github.com/your-username/reactivities.git
cd reactivities

2. Setup the Client

• Go to client-app and ensure package.json includes:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

• Run:

cd client-app
npm install

3. Setup the Server

• Go to the root of the Repo and run in the terminal

docker compose up -d

• Configure your connection string in appsettings.json:

"ConnectionStrings": {
  "DefaultConnection": ""
}

4. Configure Third-Party Services

Resend (for emails)

• Create a Resend account and API Key
• Add to appsettings.json:

"Resend": {
  "ApiToken": ""
}

Cloudinary (for image uploads)

"Cloudinary": {
  "CloudName": "",
  "ApiKey": "",
  "ApiSecret": ""
}

Facebook Login (Dev Environment)

• Create an SSL certificate Watch this tutorial

• Enable HTTPS in client-app/package.json:

"scripts": {
  "start": "set HTTPS=true&&set SSL_CRT_FILE=<path-to-crt>&&set SSL_KEY_FILE=<path-to-key>&&react-scripts start"
}

5. Run the App

• Start the API (.NET backend) On the first run, it will automatically seed the database with initial data.

• Start the client:

cd client-app
npm start

---

💡 Usage

Login Credentials

Demo users:

• bob@test.com
• tom@test.com

Facebook test users (Heroku only):

• samantha_uhubxff_fergiesen@tfbnw.net
• barbara_zpcalos_letuchysky@tfbnw.net

Password for all users: Pa$$w0rd

Development Mode

• Run the Web API (via Kestrel)
• Open a terminal in client-app and run:

npm start

---

🙌 Acknowledgments

This project was built while following the excellent Udemy course by Neil Cummings, with additional improvements.

(back to top)