📝 TextToPng

Convert text to clean, downloadable PNG images. Built with ASP.NET Web API 2 and React.

---

📸 Preview

---

✨ Features

📝 Text to PNG Enter any text and generate a clean PNG image. Handles up to 10,000 characters with auto-sized canvas.	📊 History & Regenerate Every prompt is saved. Regenerate any past text with one click — no need to retype.
🔐 JWT Authentication Register and login with email + password. OTP verification for secure access.	⚡ Rate Limiting Redis-powered rate limiting protects the API from abuse.
🎨 Modern UI Warm Lime + Olive Ink dark theme. Responsive design with smooth animations.	🔄 Dual Database SQL Server for local development. PostgreSQL (Supabase) for production.

---

🏗️ Architecture

├── Backend/                    ASP.NET Web API 2 (.NET Framework 4.8)
│   ├── Controllers/            Auth, Generate, Download, Prompts
│   ├── Services/               PNG Generator, Redis
│   ├── Attributes/             JWT Auth, Rate Limiting
│   └── Models/                 EF 6 Database-First
│
└── Frontend/                   React 18 + TypeScript
    └── src/
        ├── pages/              Home, Login, Register, History
        ├── components/         Navbar, Footer
        ├── api.ts              Axios with auto-refresh
        └── cookies.ts          Token storage

---

🛠️ Tech Stack

Layer	Technology
Backend	ASP.NET Web API 2 (.NET Framework 4.8)
Image Generation	System.Drawing
Database	SQL Server + PostgreSQL (dual support)
ORM	Entity Framework 6 (Database-First)
Cache	Redis (Upstash)
Auth	JWT + OTP Verification
Frontend	React 18 + TypeScript + Vite
Styling	Custom CSS (Warm Lime + Olive Ink theme)

---

🔐 Authentication Flow

Register → Email + Password → OTP → Verify → JWT Tokens
Login    → Email + Password → OTP → Verify → JWT Tokens
Request  → Axios Interceptor adds Bearer token
Expired  → Auto-refresh via /api/auth/refresh

• Access Token: 15 minutes (JWT)
• Refresh Token: 7 days with rotation
• OTP: 6 digits, expires in 10 minutes (Redis)

---

🎯 API Endpoints

Method	Endpoint	Auth	Description
POST	/api/generate	Optional	Generate PNG from text
GET	/api/download/{id}	No	Download PNG file
POST	/api/auth/register	No	Create account
POST	/api/auth/login	No	Sign in
POST	/api/auth/verify-otp	No	Verify OTP
POST	/api/auth/refresh	No	Refresh tokens
GET	/api/prompts	JWT	User history
DELETE	/api/prompts/{id}	JWT	Delete prompt

---

🚀 Quick Start

# Clone the repo
git clone https://github.com/XPSTARTS/TextToPng.git

# Backend
cd Backend/TextToPng
# Open in Visual Studio, restore NuGet packages, press F5

# Frontend
cd Frontend/frontend
npm install
npm run dev

Backend runs on https://localhost:44365 | Frontend on http://localhost:3000

---

📝 License

MIT — free to use, modify, and learn from.

---

_{Built with ☕ and attention to detail}