DrisyaMagic

A full-stack web application for image processing with multiple modules including Ready to Use, Drisya Look, and Surprise features.

Tech Stack

• Frontend: React, TypeScript, Vite, Tailwind CSS
• Backend: Node.js, Express, TypeScript
• Database: MySQL with Drizzle ORM
• UI Components: Radix UI, Lucide React
• Payment: Stripe integration
• Authentication: Passport.js

Prerequisites

Before running this project, make sure you have:

• Node.js (v18 or higher)
• XAMPP with MySQL running
• npm or yarn package manager

Setup Instructions

1. Clone and Install Dependencies

git clone <repository-url>
cd DrisyaMagic
npm install

2. Database Setup

1. Start XAMPP and ensure MySQL is running
2. Open phpMyAdmin at http://localhost/phpmyadmin/
3. Create a new database called drisyamagic
4. The .env file is already configured for XAMPP's default MySQL settings:

DATABASE_URL=mysql://root@localhost:3306/drisyamagic
PORT=5000
NODE_ENV=development

If you have set a password for MySQL root user, update the DATABASE_URL accordingly:

DATABASE_URL=mysql://root:your_password@localhost:3306/drisyamagic

3. Database Migration

Run the database migration to create tables:

npm run db:push

4. Run the Application

Start the development server:

npm run dev

The application will be available at http://localhost:5000

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run check - Type checking
• npm run db:push - Push database schema changes

Project Structure

├── client/          # React frontend
├── server/          # Express backend
├── shared/          # Shared types and schemas
├── attached_assets/ # Static assets
└── dist/           # Built files

Features

• Ready to Use Module: Quick image processing
• Drisya Look Module: Platform-specific image optimization (Instagram, Amazon, Website, Facebook)
• Surprise Module: Theme-based image/video processing
• Coin System: Credit-based usage system
• Stripe Integration: Payment processing
• User Management: Authentication and user profiles
• Admin Panel: Manage pricing, backgrounds, and themes

Environment Variables

Required environment variables:

DATABASE_URL=postgresql://username:password@host:port/database
PORT=5000
NODE_ENV=development
STRIPE_SECRET_KEY=your_stripe_secret_key (optional for development)
STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key (optional for development)

Database Schema

The application uses the following main tables:

• users - User accounts and profiles
• transactions - Coin transactions
• coin_pricing - Coin package pricing
• module_pricing - Feature pricing
• backgrounds - Available backgrounds
• themes - Available themes
• processed_images - User's processed images
• sessions - User sessions

Development Notes

• The project was migrated from Replit to run locally
• Cross-platform environment variable handling with cross-env
• TypeScript configuration for both frontend and backend
• Drizzle ORM for type-safe database operations

Troubleshooting

1. Database Connection Issues: Ensure PostgreSQL is running and the DATABASE_URL is correct
2. Port Already in Use: Change the PORT in .env file
3. TypeScript Errors: Run npm run check to verify types
4. Build Issues: Clear node_modules and dist folders, then reinstall dependencies

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and type checking
5. Submit a pull request