https://github.com/wajahat001/proj-react-text2image-
This is The React Project that converts text to Images by fetching the API from another site
https://github.com/wajahat001/proj-react-text2image-
json mern-project mern-stack react reactjs server ui-components
Last synced: 2 months ago
JSON representation
This is The React Project that converts text to Images by fetching the API from another site
- Host: GitHub
- URL: https://github.com/wajahat001/proj-react-text2image-
- Owner: wajahat001
- Created: 2024-12-18T04:04:20.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-02T12:00:47.000Z (over 1 year ago)
- Last Synced: 2025-10-22T21:41:59.855Z (8 months ago)
- Topics: json, mern-project, mern-stack, react, reactjs, server, ui-components
- Language: JavaScript
- Homepage:
- Size: 24.9 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#Description
##A full-stack web application that converts text into images. The frontend is built using React, and the backend is developed with Express.js, forming a complete MERN (MongoDB, Express, React, Node.js) stack project.
Features
Convert text into an image with customizable styles.
User-friendly interface built with React.
Backend powered by Express.js for handling text processing.
Uses MongoDB for storing user-generated content (if applicable).
API-based communication between frontend and backend.
Tech Stack
Frontend:
React.js
Tailwind CSS (or any other styling framework used)
Backend:
Node.js
Express.js
MongoDB (if applicable)
Installation
Prerequisites
Ensure you have the following installed:
Node.js (v14 or later)
MongoDB (if using a database)
Git
Clone the Repository
git clone https://github.com/your-username/text-to-image-converter.git
cd text-to-image-converter
Install Dependencies
Frontend
cd client # Navigate to the frontend directory
npm install
Backend
cd server # Navigate to the backend directory
npm install
Configuration
Backend (Express.js)
Create a .env file in the server directory and add the following environment variables:
PORT=5000
MONGO_URI=mongodb://localhost:27017/text-to-image # Change this if using a cloud database
Start the backend server:
npm start
Frontend (React.js)
Navigate to the client directory and start the frontend:
npm start
Usage
Open your browser and go to http://localhost:3000
Enter your text and convert it into an image.
Download or save the generated image.
API Endpoints
Method
Endpoint
Description
POST
/generate
Converts text into an image and returns the image URL
GET
/history
Retrieves past conversions (if stored in DB)
Deployment
Frontend Deployment
You can deploy the frontend on Vercel, Netlify, or any static hosting provider:
npm run build
Upload the build folder to your hosting provider.
Backend Deployment
You can deploy the backend on platforms like Heroku, Render, or VPS:
npm start
Ensure MongoDB is accessible in a cloud environment if required.
Contributing
Feel free to submit issues or pull requests for improvements.