Image Moderation System

Overview

This project analyzes the content of uploaded images to ensure compliance with moderation policies using AWS Rekognition. If an image violates these policies, it will not be uploaded to the system. Accepted images are stored in AWS S3, and metadata such as the image path, creation date, and AWS Rekognition analysis results are saved in a PostgreSQL database. The system also provides a user-friendly interface for managing uploaded images and integrates with AWS Cognito for secure user authentication.

Tech Stack

Backend (API)

Framework: Nest.js
Database: PostgreSQL
ORM: TypeORM
Cloud Services:
- AWS S3 (Storage)
- AWS Rekognition (Image Moderation)
- AWS Cognito (Authentication)
Language: TypeScript
Libraries:
- @aws-sdk/client-rekognition (AWS Rekognition Integration)
- @aws-sdk/client-s3 (AWS S3 Integration)
- passport-jwt (JWT Authentication)

Frontend (UI)

Framework: React
Build Tool: Vite
Language: TypeScript
Styling: Tailwind CSS
Libraries:
- axios (HTTP Client)
- react-hook-form (Form Management)
- react-toastify (Notifications)
- zustand (State Management)
- @aws-amplify/ui-react (AWS Amplify Integration)
- react-icons (Icons)
- @heroui/react (UI Components)
- vitest (Testing)

User Authentication with AWS Cognito and Amplify

This project uses AWS Cognito for user authentication and AWS Amplify to integrate authentication into the frontend.

AWS Cognito Setup

Create a Cognito User Pool:
- Go to the AWS Cognito Console.
- Create a new User Pool and configure it with the desired settings (e.g., email as the username, password policies, etc.).
- Note down the User Pool ID and App Client ID.
Configure App Client:
- In the Cognito User Pool, create an App Client.
- Enable the necessary authentication flows (e.g., USER_PASSWORD_AUTH).
Set Up Domain:
- Configure a domain name for the User Pool under the "App Integration" section.

AWS Amplify Setup

Install Amplify CLI:
```
npm install -g @aws-amplify/cli
```
Initialize Amplify:

Navigate to the UI directory:
```
cd UI
```
Run the following command:
```
amplify init
```
Follow the prompts to configure the Amplify project.

Add Authentication:
```
amplify add auth
```

Select "Default configuration" or customize as needed.
Provide the Cognito User Pool details when prompted.

Push Changes to AWS:
```
amplify push
```
Update aws-exports.js:
- After pushing, Amplify generates an aws-exports.js file in the src directory.
- Ensure this file is imported and used in src/main.tsx for Amplify configuration.

Screenshots

Login Page

Sign Up Page

Project Structure

API/
  ├── src/
  │   ├── application/
  │   │   └── post/
  │   │       ├── mapper/
  │   │       │   └── post.mapper.ts
  │   │       ├── models/
  │   │       │   └── post.model.ts
  │   │       ├── post.controller.ts
  │   │       ├── post.module.ts
  │   │       └── post.service.ts
  │   ├── domain/
  │   │   ├── constants/
  │   │   │   │── category-thresholds.constant.ts
  │   │   │   └── file.constant.ts
  │   │   ├── entities/
  │   │   │   └── post.entity.ts
  │   │   └── types/
  │   │       ├── hierarchy.type.ts
  │   │       └── status.type.ts
  │   ├── infrastructure/
  │   │   ├── auth/
  │   │   │   ├── auth.module.ts
  │   │   │   ├── jwt-auth.guard.ts
  │   │   │   ├── jwt.strategy.ts
  │   │   │   └── user.model.ts
  │   │   ├── aws/
  │   │   │   │── rekognition.service.ts
  │   │   │   └── s3.service.ts
  │   ├── shared/
  │   │   └── utils/
  │   │       └── moderation.util.ts
  │   ├── app.module.ts
  │   ├── config.ts
  │   └── main.ts
  ├── test/
  ├── .env
  ├── .eslintrc.js
  ├── .prettierrc
  ├── nest-cli.json
  ├── package.json
  ├── tsconfig.build.json
  └── tsconfig.json
UI/
  ├── src/
  │   ├── components/
  │   │   │── ImageModal/
  │   │   │── NavBar/
  │   │   │── ProtectedRoute/
  │   │   └── UserAccountDropdown/
  │   ├── config/
  │   │   └── constants.ts
  │   ├── hooks/
  │   │   │── useInfiniteScroll.ts
  │   │   │── useUserData.ts
  │   │   └── useUserStore.ts
  │   ├── interfaces/
  │   │   │── Pagination.ts
  │   │   │── Post.ts
  │   │   └── User.ts
  │   ├── layouts/
  │   │   └── MainLayout/
  │   ├── pages/
  │   │   │── AuthPage/
  │   │   │── GalleryPage/
  │   │   │── ProfilePage/
  │   │   └── UploadPage/
  │   ├── services/
  │   │   │── api/
  │   │   │   │── apiClient.ts
  │   │   │   └── requestInterceptor.ts
  │   │   └── postService.ts
  │   ├── utils/
  │   │   └── helpers.ts
  │   ├── App.css
  │   ├── App.tsx
  │   └── main.tsx
  ├── public/
  ├── .env
  ├── .gitignore
  ├── eslint.config.js
  ├── index.html
  ├── package.json
  ├── tsconfig.app.json
  ├── tsconfig.json
  ├── tsconfig.node.json
  └── vite.config.ts

Setup and Installation

Prerequisites

Node.js (v20 or higher)
npm or yarn
PostgreSQL
AWS Account with S3, Rekognition, and Cognito services enabled

Backend (API)

Clone the repository:

git clone https://github.com/cristofima/Demo-AWS-ImageModeration
cd API

Install dependencies:
```
npm install
```
Copy the .env file and rename it to .env.local:
```
cp .env .env.local
```

Configure environment variables in .env.local:

DB_NAME=
DB_USER=
DB_PASSWORD=
DB_HOST=

COGNITO_APP_CLIENT_ID=
COGNITO_APP_REGION=
COGNITO_USER_POOL_ID=

AWS_S3_ACCESS_KEY=
AWS_S3_SECRET_ACCESS_KEY=
AWS_S3_REGION=
AWS_S3_BUCKET_NAME=
AWS_S3_BUCKET_FOLDER=

AWS_REKOGNITION_REGION=
AWS_REKOGNITION_ACCESS_KEY=
AWS_REKOGNITION_SECRET_ACCESS_KEY=

Run the application:
```
npm run start:local
```

Frontend (UI)

Navigate to the UI directory:
```
cd ../UI
```
Install dependencies:
```
npm install
```

Configure environment variables in .env:

REACT_APP_API_BASE_URL=http://localhost:3000/api

Run the application:
```
npm run dev
```