Skip to content

Imagify is a MERN-stack application that converts text into images with customizable designs. It enables users to transform words into visually appealing graphics seamlessly.

License

Notifications You must be signed in to change notification settings

singh04ayush/Imagify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

87 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Imagify Logo

✨ Imagify - AI Transforming Your Images Magically ✨

🎨 Where Creativity Meet Technology

React Vite TailwindCSS Express.js

GitHub stars GitHub forks GitHub issues


✨ Features

  • πŸš€ Fast Processing: Optimized for performance
  • πŸ“± Responsive Design: Works on all devices
  • πŸ”’ Secure Processing: Your images stay private
  • πŸ’‘ AI: AI-powered Images

πŸš€ Quick Start

Prerequisites

  • Node.js (v18 or higher)
  • npm (v9 or higher)
  • Git

1. Clone the Repository

git clone https://github.com/singh04ayush/imagify.git
cd imagify

2. Backend Setup

# Navigate to server directory
cd server

# Install dependencies
npm install

# Create .env file in the server directory
touch .env

# Add the following environment variables to .env:
PORT=5000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
CLIPDROP_API=your_clipdrop_api_key

# Start the server
npm run server

Backend Environment Variables Explanation

Variable Description Example
PORT Server port number 5000
MONGODB_URI MongoDB connection string mongodb+srv://username:[email protected]/imagify
JWT_SECRET Secret key for JWT authentication your-secret-key-here
CLIPDROP_API API key for ClipDrop image generation your-clipdrop-api-key

3. Frontend Setup

# Open a new terminal
# Navigate to client directory
cd client

# Install dependencies
npm install

# If vite not installed
npm install vite@latest

# Create .env file in the client directory
touch .env

# Add the following environment variable to .env:
VITE_BACKEND_URL=http://localhost:5000

# Start the development server
npm run dev

Frontend Environment Variables Explanation

Variable Description Example
VITE_BACKEND_URL Backend API URL http://localhost:5000

4. Access the Application

  • Frontend: http://localhost:5173
  • Backend API: http://localhost:5000

Important Notes:

  • Never commit your .env files to version control
  • Make sure to replace the example values with your actual configuration
  • The CLIPDROP_API key can be obtained from ClipDrop API
  • Keep your JWT_SECRET secure and use a strong random string

Development Scripts

Command Description
npm run server Starts backend
npm run dev Starts frontend

Environment Variables

Variable Description Default
PORT Server port 5000
MONGODB_URI MongoDB connection string -
JWT_SECRET JWT secret key -

πŸ› οΈ Tech Stack

Frontend

React Vite TailwindCSS

Backend

Node.js Express MongoDB

🀝 Contributing

We welcome contributions! Here's how you can help:

PRs Welcome Open Source Love

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

πŸ“ License

License: MIT

This project is licensed under the MIT License - see the LICENSE file for details.

πŸ™ Acknowledgment

Resource Description
Heroicons Beautiful icons
TailwindCSS Utility-first CSS framework
React Community Amazing React ecosystem

Contributed with ❀️ by [singh04ayush] & [ phoenixdev100 ]

GitHub Follow

About

Imagify is a MERN-stack application that converts text into images with customizable designs. It enables users to transform words into visually appealing graphics seamlessly.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages