- π Fast Processing: Optimized for performance
- π± Responsive Design: Works on all devices
- π Secure Processing: Your images stay private
- π‘ AI: AI-powered Images
git clone https://github.com/singh04ayush/imagify.git
cd imagify
# 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
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 |
# 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
Variable | Description | Example |
---|---|---|
VITE_BACKEND_URL |
Backend API URL | http://localhost:5000 |
- 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
Command | Description |
---|---|
npm run server |
Starts backend |
npm run dev |
Starts frontend |
Variable | Description | Default |
---|---|---|
PORT |
Server port | 5000 |
MONGODB_URI |
MongoDB connection string | - |
JWT_SECRET |
JWT secret key | - |
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature
) - Commit your changes (
git commit -m 'Add some AmazingFeature'
) - Push to the branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Resource | Description |
---|---|
Heroicons | Beautiful icons |
TailwindCSS | Utility-first CSS framework |
React Community | Amazing React ecosystem |