SkillAgentSearch skills...

Imagify

Imagify is an AI-powered image generation SaaS web application built with the MERN stack. It leverages the Clipdrop API to create high-quality, AI-generated images. The app features a secure login/signup system, a user-friendly interface, and seamless integration between the client and server for an enhanced user experience.

Install / Use

/learn @shozabali06/Imagify

README

Imagify

Live Demo

Click here to view the live demo <!-- Replace # with the actual live demo link -->

Description

Imagify is an AI-powered image generation SaaS web application built with the MERN stack. It uses the Clipdrop API to generate high-quality images and includes a secure login/signup system.


Features

  • AI-based image generation using the Clipdrop API.
  • User authentication system with login and signup functionality.
  • Clean and modern user interface.

Installation Instructions

  1. Clone the repository:
git clone https://github.com/shozabali06/Imagify.git
  1. Navigate to the project directory:
cd Imagify

Server Setup

  1. Navigate to the server folder:
cd server
  1. Install dependencies:
npm install
  1. Configure environment variables: Create a .env file in the server folder and add the following:

    MONGODB_URI=<your-mongodb-connection-string>
    JWT_SECRET=<your-jwt-secret>
    CLIPDROP_API=<your-clipdrop-api-key>
    
  2. Start the server:

npm run server

Client Setup

  1. Navigate to the client folder:
cd client
  1. Install dependencies:
npm install
  1. Configure environment variables: Create a .env file in the client folder and add the following:

    VITE_BACKEND_URL=<url-for-server-side>
    
  2. Start the client:

npm run dev

Commands Summary

Server Commands

  • Install dependencies: npm install
  • Run the server: npm run server

Client Commands

  • Install dependencies: npm install
  • Run the client: npm run dev

Environment Variables Summary

Server Folder

  • MONGODB_URI: MongoDB connection string.
  • JWT_SECRET: Secret key for JSON Web Token.
  • CLIPDROP_API: API key for the Clipdrop API.

Client Folder

  • VITE_BACKEND_URL: URL of the server application.

Feel free to reach out for further assistance or feature suggestions!

Related Skills

View on GitHub
GitHub Stars6
CategoryContent
Updated2mo ago
Forks0

Languages

JavaScript

Security Score

75/100

Audited on Jan 22, 2026

No findings