Flowy

<sub>ucode connect webster "Flowy" is the project of ucode connect the Track FullStack programming bootcamp
lasting 6 weeks (May 5, 2025 - June 16, 2025),
where the NestJS with TypeScript and React with KonvaJS were used to develop the service for graphic design.

The purpose: create a service for graphic design that allows every user without design skills to create and
process images using the whole cycle of Challenge Based Learning framework with a team.</sub>

• 🎨 About "Flowy" Platform
• 🧑‍💻 Team
• 🌊 About "Flowy" Backend
• 🎯 Features and Functionality
  • 🔐 Authentication & Authorization
  • 👥 User Management
  • 📧 Email System
  • 🛡️ Security Features
  • 🔧 API Documentation
• 🧶 Use case diagram
• 🧲 Activity diagram
  • 👤 User Registaion
  • 🎞 Action History System
  • 📁 File Export
• 🚚 Deployment Diagram
• 📦 Database Diagram
• ⚙️ Requirements and Dependencies
• 🚀 How to Run the Solution
• 🐋 Docker
• 📫 Mailing Service
  • Gmail API Configuration
  • Development Testing with Ethereal
  • Email Templates
• 🔁 REST API documentation
  • API Features
• 📬 Postman
• 📦 Migrations
  • Migration Commands
  • Seeding with fake data

Flowy is a web-based graphic design platform that provides professional tools for creative design and image editing.

Create stunning visual effects with canvas drawing tools, advanced image processing features, layer management, and seamless workflows in your browser.

Built on modern web technologies, Flowy provides a comprehensive design experience with no experience required.

Here is a link to the presentation file.

Inessa Repeshko

Andrew Laskevych

"Flowy" Backend is built on Node.js with NestJS framework, utilizing TypeScript for type safety and maintainability. The platform integrates Prisma ORM with MySQL database, provides secure authentication with JWT tokens and Google OAuth, email services with Nodemailer, comprehensive API documentation with Swagger, containerization with Docker.

• NestJS provides a modular architecture with built-in TypeScript support, a decorator approach, and a dependency injection system.
• Prisma provides a type-safe approach to working with databases and automatic generation of TypeScript types based on the schema.
• JWT and Passport implement authentication with Google OAuth support.
• Swagger provides automatic API documentation generation.
• MySQL guarantees reliable and efficient data storage with transaction support and scalability.
• Docker ensures consistency in the development environment and simplifies deployment processes.
• Postman optimizes the process of API testing and documentation creation.

The selected combination of technologies provides a balanced solution that optimally combines performance, reliability, and ease of development.

Flowy Backend provides a comprehensive set of features for modern web applications:

• User Registration & Login with email verification
• Google OAuth 2.0 integration for social authentication
• JWT-based authentication with access and refresh tokens
• Password reset functionality with secure token validation
• Role-based access control for different user types
• Account email confirmation system
• Refresh token management with nonces for enhanced security

• User profile management with avatar upload support
• Account settings and password management
• User dashboard with personalized content
• Secure password hashing using bcrypt
• Account ownership guards for secure access control

• Email confirmation for account verification
• Password reset emails with secure links
• Ethereal email integration for development testing

• CSRF protection with custom filters
• Request validation with comprehensive validators
• Input sanitization and type checking
• Secure password hashing using bcrypt
• Rate limiting and security headers
• Environment-based configuration management
• JWT token cleanup and security

• Comprehensive Swagger documentation for all endpoints
• Interactive API explorer at /api endpoint
• Detailed request/response schemas
• API versioning and security documentation

Before starting, ensure the required technologies are installed.

• Node.JS >= v22
• NPM >= v10
• MySQL >= 8.0

In the examples of all commands in the text <env> is the name of the environment to perform the migration, e.g. dev or prod.

1. Clone this repository and move to the project directory:

   git clone <repository-url> flowy-backend cd flowy-backend

2. Install all dependencies:

   npm install

3. For development purposes use dev environment. Configure the database connection by copying the .env.development.example to a new file .env.development. After that put your MySQL credentials of root user:

   # Database Root Configuration DB_ROOT_HOST=localhost DB_ROOT_PORT=3306 DB_ROOT_USER=root DB_ROOT_PASSWORD=root 

   Also, new DB user flowy_sql will be created after executing the next command. Credentials of flowy_sql user can be changed:

   # Database App Configuration DB_APP_HOST=localhost DB_APP_PORT=3306 DB_APP_USER=flowy_sql DB_APP_PASSWORD=securepass DB_APP_DATABASE=flowy 

   For test purposes use test environment: create .env.test file by copying the .env.test.example file.
4. Run script for create databases and user:

   npm run setup:db

5. Run command to apply necessary migrations.

   npm run migrate

6. Run command to create prisma client:

   npm run migrate:generate

7. Run command to build the project:

   npm run build

8. Seeds help you fill your database with initial data for a presentation or project launch. To start creating test data, run the command:

   npm run migrate:seed

9. Start the server:

   npm run start:dev

10. Application will be launched on http://localhost:8080/.

Environment variables are taken from .env.development file. You can start containers with the command:

docker-compose --env-file .env.development up -d

To view a list of containers:

docker ps -a

To stop running containers:

docker-compose stop

To stop and delete containers, networks, and associated resources (with volumes):

docker-compose down -v

The application uses Gmail API for production email delivery with OAuth2 authentication, providing reliable and secure email sending capabilities.

The application is configured to use Gmail API for sending emails in production. To set up Gmail integration:

1. Google Cloud Console Setup:
   • Create a project in Google Cloud Console
   • Enable Gmail API for your project
   • Create OAuth 2.0 credentials (Client ID and Client Secret)
   • Add your redirect URI for OAuth flow
2. Environment Configuration: Configure the following variables in your .env.development file:

   GOOGLE_GMAIL_USER=your-gmail@gmail.com GOOGLE_GMAIL_API_REFRESH_TOKEN=your_refresh_token GOOGLE_CLIENT_ID=your_client_id GOOGLE_CLIENT_SECRET=your_client_secret GOOGLE_OAUTH_REDIRECT_URI=your_redirect_uri

3. OAuth2 Flow:
   • Use Google OAuth2 flow to obtain refresh token
   • The application automatically refreshes access tokens as needed

The application uses email services for user communication and verification processes.

For development and testing purposes, you can use Ethereal Email - a fake SMTP service where messages are captured but never delivered.

Default test credentials you can find in .env.development.example:

• login: corrine.strosin80@ethereal.email
• password: EEshmbDQ6mKBzprKVK

Email types supported:

• Account email confirmation
• Password reset notifications

The comprehensive API documentation is available at http://localhost:8080/api or https://flowy-photoshop.onrender.com/api and provides:

• Interactive API Explorer: Built with Swagger UI, allowing you to test endpoints directly in the browser
• Complete Endpoint Coverage: Documentation for all available REST endpoints including authentication and users
• Security Documentation: Clear indication of which endpoints require JWT authentication and CSRF tokens
• Request/Response Schemas: Detailed schema definitions with examples for all data structures
• Error Response Documentation: Comprehensive error codes and response formats

• JWT Authentication: Bearer token authentication for protected endpoints
• CSRF Protection: Cross-Site Request Forgery protection for state-changing operations
• File Upload Support: Endpoints for avatar uploads
• Real-time Validation: Request validation with detailed error messages

To use the predefined settings for Postman, import the file flowy.postman_collection.json.

The collection includes comprehensive API endpoint definitions organized into categories such as:

• Auth: Authentication endpoints (login, register, password reset)
• Users: User management and profile operations

1. Create new migration:

   npm run migrate:create --name <migration_name>

2. Apply migrations:

   npm run migrate

3. Generate Prisma client:

   npm run migrate:generate

4. Seed database with demo data:

   npm run migrate:seed

5. Reset and refresh database:

   npm run migrate:refresh

The seeding system creates comprehensive demo data including:

• Users with verified accounts
• Refresh token nonces for security testing
• Email templates and configurations

To fill the database with demo data of users and system entities, run the following command:

npm run migrate:seed

Here is the fake data for presentations.

User data for testing:

• full name:

  Test User 

• email:

  test.user@flowy.com 

All users have a password:

Password123!$ 

© Inessa Repeshko. 2025