Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/elazzouzihassan/imageeditor
AI-powered image manipulation SaaS platform designed to provide users with advanced tools for editing and enhancing their images.
https://github.com/elazzouzihassan/imageeditor
ai bun clerk cloudinary javascript jsx mongodb nextjs tailwindcss tsx typescript vitejs webapp
Last synced: about 2 months ago
JSON representation
AI-powered image manipulation SaaS platform designed to provide users with advanced tools for editing and enhancing their images.
- Host: GitHub
- URL: https://github.com/elazzouzihassan/imageeditor
- Owner: ElazzouziHassan
- License: other
- Created: 2024-04-17T09:28:10.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-07-18T20:29:30.000Z (6 months ago)
- Last Synced: 2024-07-19T06:01:30.156Z (6 months ago)
- Topics: ai, bun, clerk, cloudinary, javascript, jsx, mongodb, nextjs, tailwindcss, tsx, typescript, vitejs, webapp
- Language: TypeScript
- Homepage: https://smartcanvas.vercel.app
- Size: 11.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# SmartCanvas AI Editor - README
## Introduction
Welcome to SmartCanvas, an AI-powered image manipulation SaaS platform designed to provide users with advanced tools for editing and enhancing their images. This repository contains the source code for the SmartCanvas project, which leverages machine learning models and cloud-based APIs to deliver a seamless and powerful image editing experience.
## Table of Contents
- [Introduction](#introduction)
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Architecture](#architecture)
- [Installation](#installation)
- [Usage](#usage)
- [Contributing](#contributing)
- [License](#license)
- [Acknowledgements](#acknowledgements)
## Features
- **User Authentication**: Secure sign-up, login, and logout functionalities.
- **Image Upload and Management**: Users can upload images, manage their accounts, and view their image gallery.
- **Advanced Image Editing Tools**:
- Object Removal
- Background Removal
- Image Restoration
- Generative Fill
- Object Recoloring
- Image Extension
- **Integration with Cloudinary API**: For processing images using various AI models.
- **User Profile and Image Gallery**: Users can view their profile and access recently edited images.
## Technologies Used
- **Frontend**: Next.js (HTML5, Tailwind CSS, TypeScript), Shadcn/ui
- **Backend**: Bun
- **Database**: MongoDB
- **Cloud Services**: Cloudinary for image processing
- **Authentication**: Clerk
- **Other Libraries**: Various Bun/ Bun x packages for frontend and backend development
## Architecture
The architecture of SmartCanvas is designed to be scalable and maintainable. It consists of the following components:
- **SmartCanvas**: The main application handling user interactions and coordinating between other components.
- **Clerk**: Manages user authentication and database interactions.
- **MongoDB**: Stores user data and image metadata.
- **Cloudinary API**: Provides advanced image processing capabilities.
### Class Diagram
The class diagram illustrates the relationships between the main components:
### Sequence Diagram
The sequence diagram details the interactions during key user operations:
## Installation
To set up the project locally, follow these steps:
1. **Clone the Repository**:
```bash
git clone [email protected]:ElazzouziHassan/ImageEditor.git
cd ImageEditor
```
2. **Install Dependencies**:
```bash
bun install
```
-**Note!**: Some Dependencies you will need to add them by runnig `bun x add `
3. **Set Up Environment Variables**:
Create a `.env` file in the root directory and add the following environment variables:
```
# Clerk & Clerk URLs :
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
# MongoDB :
MONGODB_URL=
# CLERK WEBHOOK SECRET KEY :
WEBHOOK_SECRET=
#CLOUDINARY
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
# STRIPE
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=
```
4. **Run the Application**:
```bash
bun run dev
```
## Usage
Once the application is running, you can access it at `http://localhost:3000`. Create an account, log in, and start uploading and editing images using the available tools.
## Contributing
We welcome contributions to improve SmartCanvas! To contribute:
1. Fork the repository.
2. Create a new branch for your feature or bugfix.
```bash
git checkout -b feature-name
```
3. Make your changes.
4. Commit your changes.
```bash
git commit -m "Description of your changes"
```
5. Push to your branch.
```bash
git push origin feature-name
```
6. Open a pull request.
## License
This project is licensed under a custom licence. See the [LICENSE](LICENSE.md) file for details.
## Acknowledgements
- **Cloudinary**: For providing robust image processing services.
- **Clerk**: For seamless user authentication.
- **MongoDB**: For reliable and scalable database services.
---
Thank you for using SmartCanvas! We hope you find it valuable for your image editing needs. If you have any questions or feedback, please feel free to open an issue or contact us.
[Email](mailto:[email protected])