https://github.com/mdsajalali/dream-ai-client
AI-Powered Text-to-Image Generator Web App.
https://github.com/mdsajalali/dream-ai-client
axios lightgallery lucide-react nextjs14 react-hook-form shadcn-ui tailwindcss
Last synced: 3 months ago
JSON representation
AI-Powered Text-to-Image Generator Web App.
- Host: GitHub
- URL: https://github.com/mdsajalali/dream-ai-client
- Owner: mdsajalali
- Created: 2025-01-29T06:48:35.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-23T13:07:57.000Z (over 1 year ago)
- Last Synced: 2025-05-20T02:50:31.478Z (about 1 year ago)
- Topics: axios, lightgallery, lucide-react, nextjs14, react-hook-form, shadcn-ui, tailwindcss
- Language: TypeScript
- Homepage: https://dream-aii.vercel.app
- Size: 949 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎨 Dream AI | Text-to-Image Generator
🚀 **A scalable, high-performance frontend for an AI-powered text-to-image generator, seamlessly integrated with a secure Node.js backend.**
💡 **Impact:**
Dream AI enables users to generate, manage, and share AI-powered images, demonstrating practical full-stack development and AI integration skills.
---
## 🧠 Skills Demonstrated
- Full-Stack Application Architecture
- Angular Component-Based Development
- REST API Integration
- JWT Authentication & Role-Based Access
- AI API Integration (Together AI)
- Cloud Image Storage with Cloudinary
- Admin Dashboard
- Infinite Scroll & Pagination Implementation
- Social Sharing – Users can share images on social media and copy image URLs
## 💻 Tech Stack
### Frontend
- **Angular** – A powerful, component-based framework for building scalable web applications.
- **Tailwind CSS** – Utility-first CSS for rapid, responsive UI development.
- **Axios** – Implementation of custom API services with interceptors for token management.
- **Keen-Slider** – Optimized, touch-friendly image sliders.
- **Lucide Angular** – Minimalist, consistent iconography.
### Backend
- **Node.js & Express** – Scalable JavaScript runtime and flexible web framework.
- **Mongoose** – MongoDB object modeling and efficient query handling.
- **Cloudinary** – Secure, cloud-based image hosting and management.
- **Together AI** – Integration with advanced AI models for text-to-image inference.
---
## 🌟 Key Features
- **Homepage** – Landing page showcasing the platform and AI generation capabilities.
- **Generate** – Transform text prompts into unique digital art using Together AI.
- **My List** – Displays images generated by the user.
- **Discover** – Publicly accessible gallery of all generated images with full preview.
- **Favorites** – Users can save and view their favorite images.
- **Image Preview** – Users can preview images in a detailed view with zoom in/out functionality and download options.
- **Admin Dashboard** – A centralized admin panel to manage users, images, and system roles.
- **User Management** – Admins can search users, update user roles, delete users, and navigate through users with pagination.
- **Image Management** – Admins can search and delete images, with infinite scroll implemented for efficient image browsing.
- **Registration & Authentication** – User signup, login, and demo account credentials.
---
## 🚀 Getting Started
### 1️⃣ Clone the Repository
```sh
git clone https://github.com/mdsajalali/dream-ai-client.git
cd dream-ai-client
```
### 2️⃣ Install Dependencies
```sh
npm install
```
### 3️⃣ Set Up Environment Variables
Replace the apiUrl in the frontend **environment.ts** file and the backend **.env** file with the following:
#### Frontend (environment.ts)
```environment.ts
apiUrl=your_api_url
```
#### Backend (.env)
```env
TOGETHER_API_KEY=your_together_ai_api_key
TOGETHER_AI_MODEL=your_together_ai_model
cloud_name=your_cloudinary_cloud_name
api_key=your_cloudinary_api_key
api_secret=your_cloudinary_api_secret
MONGO_URI=your_mongodb_connection_string
PORT=your_port
SECRET_KEY=your_secret_key
```
### 4️⃣ Run the Project
#### Start Frontend
```sh
npm start
```
#### Start Backend
```sh
cd backend
npm run dev
```
The app will be available at **http://localhost:4200** 🚀
## ⚙️ Deployment & CI/CD
- **GitHub Actions** – Automated build and test pipeline for frontend.
- **Vercel Integration** – Continuous deployment of the frontend, automatically updated on push to main branch.
- **CI/CD Workflow** – Ensures high-quality, production-ready deployments with automated testing and build steps.
## 🌐 Live Demo
- **Frontend Live:** [https://dream-aii.vercel.app](https://dream-aii.vercel.app)
- **Backend API Live:** [https://dreamai-api.vercel.app/api/v1](https://dreamai-api.vercel.app/api/v1)
Check out the [Backend Repository](https://github.com/mdsajalali/dream-ai-server).
---
Connect with me on [LinkedIn](https://www.linkedin.com/in/mdsajalali/).
Happy coding! 🚀