• WebP Converter: Convert PNG/JPG images to WebP format with customizable quality
• Background Remover: Remove image backgrounds with AI-powered precision
• Translator: Translate text with DeepL's powerful AI engine
• Base64 Encoder/Decoder: Encode and decode Base64 strings
• UUID Generator: Generate UUIDs v4 and v7
• Lorem Ipsum Generator: Generate placeholder text with custom word/character count
• And more tools coming soon!

• 9 Color Themes: Choose from cyan, lime, amber, blue, emerald, fuschia, indigo, orange, and pink
• Dark/Light Mode: Seamless theme switching
• Pinnable Modules: Pin your favorite tools for quick access
• Responsive Design: Works on all devices

• Framework: Next.js 16 (React 19)
• Language: TypeScript
• Styling: Tailwind CSS 4
• UI Components: shadcn/ui
• Authentication: Better Auth
• Database: PostgreSQL with Prisma
• API: tRPC
• Deployment: Vercel

• Node.js 20+ and pnpm
• PostgreSQL database (see setup options below)
• API keys (optional, only needed for specific features):
  • DeepL API for translation module
  • Remove.bg API for background remover module

⚠️ You can skip this section unless you're working on:

• User authentication features
• Dashboard pinning system
• User preferences

If you need a database, choose one option:

Option 1: Docker (Recommended - Easiest)

docker run --name adatools-db \
  -e POSTGRES_PASSWORD=postgres \
  -e POSTGRES_DB=adatools \
  -p 5432:5432 \
  -d postgres:16

# Your DATABASE_URL will be:
# postgresql://postgres:postgres@localhost:5432/adatools

Option 2: Local PostgreSQL

# Install PostgreSQL on your system
# macOS: brew install postgresql
# Ubuntu: sudo apt install postgresql
# Windows: Download from postgresql.org

# Create database
createdb adatools

# Your DATABASE_URL will be:
# postgresql://yourusername@localhost:5432/adatools

Option 3: Free Cloud Database

• Neon - Free tier with instant setup
• Supabase - Free tier
• Railway - Free tier

⚠️ You can skip this section unless you're working on:

• User authentication features
• Dashboard pinning system
• User preferences

GitHub OAuth:

1. Go to https://github.com/settings/developers
2. Click "New OAuth App"
3. Application name: AdaTools Dev
4. Homepage URL: http://localhost:3000
5. Authorization callback URL: http://localhost:3000/api/auth/callback/github
6. Copy the Client ID and Client Secret to your .env

1. Clone the repository

   git clone https://github.com/SLcode777/AdaTools.git
   cd AdaTools

2. Install dependencies

   pnpm install

3. Set up environment variables

   Create a .env file in the root directory:

   # Database (Optional)
   DATABASE_URL="postgresql://user:password@localhost:5432/adatools"
   
   # Better Auth (Optional)
   BETTER_AUTH_SECRET="your-secret-key-here"
   BETTER_AUTH_URL="http://localhost:3000"
   
   # OAuth (Optional)
   GITHUB_CLIENT_ID="your-github-client-id"
   GITHUB_CLIENT_SECRET="your-github-client-secret"
   GOOGLE_CLIENT_ID="your-google-client-id"
   GOOGLE_CLIENT_SECRET="your-google-client-secret"
   
   # API Keys (Optional)
   DEEPL_API_KEY="your-deepl-api-key"
   REMOVE_BG_API_KEY="your-removebg-api-key"

4. Set up the database

   pnpm prisma generate
   pnpm prisma db push

5. Run the development server

   pnpm dev

6. Open http://localhost:3000 in your browser

For most development, you can work on:

• All modules (UI, features, fixes)
• New modules
• Landing page
• General improvements

You only need Database + Auth if you're working on:

• User authentication flow
• Dashboard pinning system
• User preferences storage
• Per-user API key management

AdaTools/
├── app/                    # Next.js app router
│   ├── api/               # API routes
│   ├── themes/            # Color theme CSS files
│   └── page.tsx           # Landing page
├── components/
│   ├── dashboard/         # Dashboard components
│   ├── layout/            # Layout components (header, footer)
│   ├── modules/           # Tool modules
│   └── ui/                # Reusable UI components (shadcn)
├── src/
│   ├── contexts/          # React contexts
│   ├── lib/               # Utilities and configurations
│   └── server/            # tRPC server and routers
├── prisma/
│   └── schema.prisma      # Database schema
└── public/                # Static assets

1. Create a new component in components/modules/:

   // components/modules/your-tool-module.tsx
   "use client";
   
   import { Module } from "../dashboard/module";
   
   interface YourToolModuleProps {
     isPinned?: boolean;
     onTogglePin?: () => void;
     isAuthenticated: boolean;
     onAuthRequired: () => void;
   }
   
   export function YourToolModule({
     isPinned,
     onTogglePin,
     isAuthenticated,
     onAuthRequired,
   }: YourToolModuleProps) {
     return (
       <Module
         title="Your Tool"
         description="Tool description"
         icon={<YourIcon className="h-5 w-5 text-primary" />}
         isPinned={isPinned}
         onTogglePin={onTogglePin}
         isAuthenticated={isAuthenticated}
         onAuthRequired={onAuthRequired}
       >
         {/* Your tool UI here */}
       </Module>
     );
   }

2. Add it to the modules registry in src/contexts/modules-context.tsx

3. If your tool needs server-side processing, create a tRPC router in src/server/api/routers/

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

See CONTRIBUTING.md for more details.

This project is licensed under the MIT License - see the LICENSE file for details.

• shadcn/ui for the beautiful UI components
• Lucide for the icons
• All the amazing open source libraries that make this project possible
• For the pomodoro sounds, see Pomodoro-sounds-attribution.md for author credits

For questions or suggestions, reach out at: sl.code.777@gmail.com

• More developer tools
• Drag and Drop the modules to organize them freely on the dashboard
• Rework the UI for modules exploration
• Add a searchbar to easily find modules
• Tool usage analytics