├── .eslintrc.json ├── public ├── og.png ├── HackMail.gif ├── YassineAtik-FR.pdf ├── vercel.svg ├── next.svg └── Done.json ├── app ├── favicon.ico ├── themeProvider.tsx ├── page.tsx ├── api │ └── sendEmail │ │ └── route.ts ├── layout.tsx ├── _actions.js └── globals.css ├── postcss.config.js ├── lib ├── utils.ts └── sendEmail.ts ├── .env.example ├── components.json ├── next.config.js ├── .gitignore ├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── tsconfig.json ├── components ├── layout │ ├── Footer.tsx │ └── Header.tsx ├── homePage │ ├── GithubStar.tsx │ ├── RecipientSetup.tsx │ ├── EmailSetup.tsx │ ├── SmtpSetup.tsx │ └── Content.tsx └── ui │ ├── switch.tsx │ └── button.tsx ├── LICENSE ├── package.json ├── README.md └── tailwind.config.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /public/og.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yassineatik/HackMails/HEAD/public/og.png -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yassineatik/HackMails/HEAD/app/favicon.ico -------------------------------------------------------------------------------- /public/HackMail.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yassineatik/HackMails/HEAD/public/HackMail.gif -------------------------------------------------------------------------------- /public/YassineAtik-FR.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yassineatik/HackMails/HEAD/public/YassineAtik-FR.pdf -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { type ClassValue, clsx } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /app/themeProvider.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { ThemeProvider } from "next-themes"; 3 | 4 | export default function Providers({ children }: any) { 5 | return {children}; 6 | } 7 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | NEXT_PUBLIC_CLOUDINARY_UPLOAD_URL = https://api.cloudinary.com/v1_1//image/upload 2 | 3 | // Get all these values from your Cloudinary account 4 | CLOUDINARY_CLUD_NAME = 5 | NEXT_PUBLIC_CLOUDINARY_API_KEY = 6 | CLOUDINARY_API_SECRET = -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "new-york", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.js", 8 | "css": "app/globals.css", 9 | "baseColor": "gray", 10 | "cssVariables": true 11 | }, 12 | "aliases": { 13 | "components": "components", 14 | "utils": "@/lib/utils" 15 | } 16 | } -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | experimental: { 4 | serverActions: true, 5 | }, 6 | env: { 7 | CLOUDINARY_CLOUD_NAME: process.env.CLOUDINARY_CLOUD_NAME, 8 | CLOUDINARY_API_SECRET: process.env.CLOUDINARY_API_SECRET, 9 | NEXT_PUBLIC_CLOUDINARY_API_KEY: 10 | process.env.NEXT_PUBLIC_CLOUDINARY_API_KEY, 11 | CLOUDINARY_API_SECRET: process.env.CLOUDINARY_API_SECRET, 12 | }, 13 | }; 14 | 15 | module.exports = nextConfig; 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | .env 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | 38 | .env -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import Content from '@/components/homePage/Content' 3 | import Footer from '@/components/layout/Footer' 4 | import Header from '@/components/layout/Header' 5 | import Image from 'next/image' 6 | 7 | import { ToastContainer, toast } from 'react-toastify'; 8 | import 'react-toastify/dist/ReactToastify.css'; 9 | 10 | export default function Home() { 11 | return ( 12 |
13 | 14 |
15 | 16 |
17 |
18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Additional context** 27 | Add any other context about the problem here. 28 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "bundler", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "plugins": [ 18 | { 19 | "name": "next" 20 | } 21 | ], 22 | "paths": { 23 | "@/*": ["./*"] 24 | } 25 | }, 26 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 27 | "exclude": ["node_modules"] 28 | } 29 | -------------------------------------------------------------------------------- /app/api/sendEmail/route.ts: -------------------------------------------------------------------------------- 1 | import { sendMail } from "@/lib/sendEmail"; 2 | import { NextResponse } from "next/server"; 3 | export const POST = async (req: Request, res: Response) => { 4 | const body = await req.json(); 5 | console.log(body); 6 | const { 7 | subject, 8 | toEmail, 9 | otpText, 10 | host, 11 | port = 465, 12 | secure = true, 13 | user, 14 | pass, 15 | attachmentPath = null, 16 | } = body; 17 | try { 18 | await sendMail( 19 | subject, 20 | toEmail, 21 | otpText, 22 | host, 23 | port, 24 | secure, 25 | user, 26 | pass, 27 | attachmentPath 28 | ); 29 | return NextResponse.json({ message: "Email sent" }, { status: 200 }); 30 | } catch (err) { 31 | console.log("err from Route.ts", err); 32 | return NextResponse.json({ message: err }, { status: 500 }); 33 | } 34 | }; 35 | -------------------------------------------------------------------------------- /components/layout/Footer.tsx: -------------------------------------------------------------------------------- 1 | import { Icon } from '@iconify/react/dist/iconify.js' 2 | import Link from 'next/link' 3 | import React from 'react' 4 | 5 | const Footer = () => { 6 | return ( 7 | 23 | ) 24 | } 25 | 26 | export default Footer -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Yassine Atik 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /components/homePage/GithubStar.tsx: -------------------------------------------------------------------------------- 1 | import { Icon } from '@iconify/react/dist/iconify.js' 2 | import Link from 'next/link' 3 | import React from 'react' 4 | 5 | const GithubStar = () => { 6 | return ( 7 |
8 | 9 |

10 | Star 11 | 12 | on GitHub 13 | 14 | 15 |

16 | 17 |
18 | ) 19 | } 20 | 21 | export default GithubStar -------------------------------------------------------------------------------- /components/ui/switch.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as SwitchPrimitives from "@radix-ui/react-switch" 5 | 6 | import { cn } from "@/lib/utils" 7 | 8 | const Switch = React.forwardRef< 9 | React.ElementRef, 10 | React.ComponentPropsWithoutRef 11 | >(({ className, ...props }, ref) => ( 12 | 20 | 25 | 26 | )) 27 | Switch.displayName = SwitchPrimitives.Root.displayName 28 | 29 | export { Switch } 30 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import Header from '@/components/layout/Header' 2 | import './globals.css' 3 | import type { Metadata } from 'next' 4 | import { Inter } from 'next/font/google' 5 | import Providers from './themeProvider' 6 | 7 | const inter = Inter({ subsets: ['latin'] }) 8 | 9 | export const metadata: Metadata = { 10 | title: 'Hack Mails', 11 | description: "Effortlessly streamline your job application process with our personalized email tool. Send tailored emails to multiple companies using dynamic placeholders, eliminating the need for manual editing. Automate your outreach, save time, and make a lasting impression on potential employers. Simplify your job search today.", 12 | // set the image here to be used in meta tags for social sharing 13 | openGraph: { 14 | title: "HackMails - Reach More ", 15 | description: 16 | "Streamlined Job Application Email Tool .", 17 | url: "https://www.hackmails.com/", 18 | siteName: "HackMails", 19 | images: [ 20 | { 21 | url: "/og.png", 22 | width: 1920, 23 | height: 1080, 24 | }, 25 | ], 26 | locale: "en-US", 27 | type: "website", 28 | }, 29 | 30 | } 31 | 32 | export default function RootLayout({ 33 | children, 34 | }: { 35 | children: React.ReactNode 36 | }) { 37 | return ( 38 | 39 | 40 | 41 | {children} 42 | 43 | 44 | 45 | ) 46 | } 47 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hackmails", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@cloudinary/react": "^1.11.2", 13 | "@cloudinary/url-gen": "^1.11.2", 14 | "@material-tailwind/react": "^2.1.1", 15 | "@radix-ui/react-icons": "^1.3.0", 16 | "@radix-ui/react-slot": "^1.0.2", 17 | "@radix-ui/react-switch": "^1.0.3", 18 | "@types/node": "20.4.5", 19 | "@types/react": "18.2.18", 20 | "@types/react-dom": "18.2.7", 21 | "autoprefixer": "10.4.14", 22 | "axios": "^1.5.0", 23 | "class-variance-authority": "^0.7.0", 24 | "cloudinary": "^1.40.0", 25 | "clsx": "^2.0.0", 26 | "dotenv": "^16.3.1", 27 | "eslint": "8.46.0", 28 | "eslint-config-next": "13.4.12", 29 | "flowbite": "^1.8.1", 30 | "lottie-react": "^2.4.0", 31 | "next": "13.4.12", 32 | "next-themes": "^0.2.1", 33 | "nodemailer": "^6.9.4", 34 | "postcss": "8.4.27", 35 | "react": "18.2.0", 36 | "react-dom": "18.2.0", 37 | "react-icons": "^4.10.1", 38 | "react-toastify": "^9.1.3", 39 | "tailwind-merge": "^1.14.0", 40 | "tailwindcss": "3.3.3", 41 | "tailwindcss-animate": "^1.0.6", 42 | "typescript": "5.1.6" 43 | }, 44 | "devDependencies": { 45 | "@iconify/react": "^4.1.1" 46 | }, 47 | "browser": { 48 | "fs": false, 49 | "path": false, 50 | "os": false 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /app/_actions.js: -------------------------------------------------------------------------------- 1 | "use server"; 2 | import { v2 as cloudinary } from "cloudinary"; 3 | 4 | const cloudinaryConfig = { 5 | cloud_name: process.env.CLOUDINARY_CLOUD_NAME, 6 | api_key: process.env.NEXT_PUBLIC_CLOUDINARY_API_KEY, 7 | api_secret: process.env.CLOUDINARY_API_SECRET, 8 | }; 9 | 10 | export async function getSignature() { 11 | const timestamp = Math.round(new Date().getTime() / 1000); 12 | 13 | const signature = cloudinary.utils.api_sign_request( 14 | { 15 | timestamp: timestamp, 16 | folder: "next", 17 | }, 18 | cloudinaryConfig.api_secret 19 | ); 20 | console.log({ "signature is ": signature }); 21 | return { 22 | timestamp, 23 | signature, 24 | }; 25 | } 26 | 27 | export async function saveToDatabase({ public_id, version, signature }) { 28 | console.log({ public_id, version, signature }); 29 | const expectedSignature = cloudinary.utils.api_sign_request( 30 | { public_id, version }, 31 | cloudinaryConfig.api_secret 32 | ); 33 | console.log({ "expectedSignature is ": expectedSignature }); 34 | if (expectedSignature !== signature) { 35 | console.log("Invalid signature"); 36 | throw new Error("Invalid signature"); 37 | } else { 38 | // get the image url 39 | const url = cloudinary.url(public_id, { 40 | version, 41 | secure: true, 42 | cloud_name: process.env.CLOUDINARY_CLUD_NAME, // Make sure this is the correct value 43 | }); 44 | console.log({ url }); 45 | return url; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer base { 6 | :root { 7 | --background: 0 0% 100%; 8 | --foreground: 224 71.4% 4.1%; 9 | 10 | --muted: 220 14.3% 95.9%; 11 | --muted-foreground: 220 8.9% 46.1%; 12 | 13 | --popover: 0 0% 100%; 14 | --popover-foreground: 224 71.4% 4.1%; 15 | 16 | --card: 0 0% 100%; 17 | --card-foreground: 224 71.4% 4.1%; 18 | 19 | --border: 220 13% 91%; 20 | --input: 220 13% 91%; 21 | 22 | --primary: 220.9 39.3% 11%; 23 | --primary-foreground: 210 20% 98%; 24 | 25 | --secondary: 220 14.3% 95.9%; 26 | --secondary-foreground: 220.9 39.3% 11%; 27 | 28 | --accent: 220 14.3% 95.9%; 29 | --accent-foreground: 220.9 39.3% 11%; 30 | 31 | --destructive: 0 84.2% 60.2%; 32 | --destructive-foreground: 210 20% 98%; 33 | 34 | --ring: 217.9 10.6% 64.9%; 35 | 36 | --radius: 0.5rem; 37 | } 38 | 39 | .dark { 40 | --background: 224 71.4% 4.1%; 41 | --foreground: 210 20% 98%; 42 | 43 | --muted: 215 27.9% 16.9%; 44 | --muted-foreground: 217.9 10.6% 64.9%; 45 | 46 | --popover: 224 71.4% 4.1%; 47 | --popover-foreground: 210 20% 98%; 48 | 49 | --card: 224 71.4% 4.1%; 50 | --card-foreground: 210 20% 98%; 51 | 52 | --border: 215 27.9% 16.9%; 53 | --input: 215 27.9% 16.9%; 54 | 55 | --primary: 210 20% 98%; 56 | --primary-foreground: 220.9 39.3% 11%; 57 | 58 | --secondary: 215 27.9% 16.9%; 59 | --secondary-foreground: 210 20% 98%; 60 | 61 | --accent: 215 27.9% 16.9%; 62 | --accent-foreground: 210 20% 98%; 63 | 64 | --destructive: 0 62.8% 30.6%; 65 | --destructive-foreground: 0 85.7% 97.3%; 66 | 67 | --ring: 215 27.9% 16.9%; 68 | } 69 | } 70 | 71 | @layer base { 72 | * { 73 | @apply border-border; 74 | } 75 | body { 76 | @apply bg-background text-foreground; 77 | } 78 | } -------------------------------------------------------------------------------- /components/layout/Header.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | import Link from 'next/link' 3 | import React, { useEffect } from 'react' 4 | import { Switch } from '../ui/switch' 5 | import { Icon } from '@iconify/react'; 6 | import { useTheme } from 'next-themes' 7 | import { CiDark } from "react-icons/ci" 8 | import { GoSun } from 'react-icons/go' 9 | import Image from 'next/image' 10 | 11 | 12 | 13 | const Header = () => { 14 | 15 | const { theme, setTheme } = useTheme() 16 | const [isDark, setIsDark] = React.useState(false) 17 | useEffect(() => { 18 | if (theme == 'dark') { 19 | setIsDark(true) 20 | } else { 21 | setIsDark(false) 22 | } 23 | }, [theme]) 24 | 25 | return ( 26 |
27 |

28 | HackMails 29 | 30 |

31 | {/*
    32 |
  • Playground
    • 33 |
  • Pricing
    • 34 |
*/} 35 |
36 | 37 | { 41 | setTheme(e ? 'dark' : 'light') 42 | console.log(theme) 43 | }} /> 44 | 45 |
46 |
47 | ) 48 | } 49 | 50 | export default Header -------------------------------------------------------------------------------- /lib/sendEmail.ts: -------------------------------------------------------------------------------- 1 | var nodemailer = require("nodemailer"); 2 | var fs = require("fs"); 3 | //----------------------------------------------------------------------------- 4 | export async function sendMail( 5 | subject: string, 6 | toEmail: string, 7 | otpText: string, 8 | host: string, 9 | port: number, 10 | secure: boolean, 11 | user: string, 12 | pass: string, 13 | attachmentPath: string | null 14 | ) { 15 | var transporter = nodemailer.createTransport({ 16 | host: host, 17 | port: port, 18 | secure: secure, 19 | auth: { 20 | user: user, 21 | pass: pass, 22 | }, 23 | }); 24 | 25 | // var mailOptions = { 26 | // from: user, 27 | // to: toEmail, 28 | // subject: subject, 29 | // text: otpText, 30 | // attachements: [ 31 | // { 32 | // filename: "logo.png", 33 | // path: "/public/logo.png", 34 | // cid: "logo", 35 | // }, 36 | // ], 37 | // }; 38 | 39 | await new Promise((resolve, reject) => { 40 | transporter.sendMail( 41 | { 42 | from: user, 43 | to: toEmail, 44 | subject: subject, 45 | text: otpText, 46 | ...(attachmentPath && { 47 | attachments: [ 48 | { 49 | filename: "CV.pdf", 50 | path: attachmentPath, 51 | }, 52 | ], 53 | }), 54 | }, 55 | (err: any, response: any) => { 56 | if (err) { 57 | console.log("err from sendMail.ts", err); 58 | reject(err); 59 | } else { 60 | console.log("response from sendMail.ts", response); 61 | resolve(response); 62 | } 63 | } 64 | ); 65 | }); 66 | } 67 | -------------------------------------------------------------------------------- /components/ui/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { Slot } from "@radix-ui/react-slot" 3 | import { cva, type VariantProps } from "class-variance-authority" 4 | 5 | import { cn } from "@/lib/utils" 6 | 7 | const buttonVariants = cva( 8 | "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", 9 | { 10 | variants: { 11 | variant: { 12 | default: 13 | "bg-primary text-primary-foreground shadow hover:bg-primary/90", 14 | destructive: 15 | "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", 16 | outline: 17 | "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground", 18 | secondary: 19 | "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", 20 | ghost: "hover:bg-accent hover:text-accent-foreground", 21 | link: "text-primary underline-offset-4 hover:underline", 22 | }, 23 | size: { 24 | default: "h-9 px-4 py-2", 25 | sm: "h-8 rounded-md px-3 text-xs", 26 | lg: "h-10 rounded-md px-8", 27 | icon: "h-9 w-9", 28 | }, 29 | }, 30 | defaultVariants: { 31 | variant: "default", 32 | size: "default", 33 | }, 34 | } 35 | ) 36 | 37 | export interface ButtonProps 38 | extends React.ButtonHTMLAttributes, 39 | VariantProps { 40 | asChild?: boolean 41 | } 42 | 43 | const Button = React.forwardRef( 44 | ({ className, variant, size, asChild = false, ...props }, ref) => { 45 | const Comp = asChild ? Slot : "button" 46 | return ( 47 | 52 | ) 53 | } 54 | ) 55 | Button.displayName = "Button" 56 | 57 | export { Button, buttonVariants } 58 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Streamlined Job Application Email Tool 📧💼 2 | 3 | Simplify your job application process with the Streamlined Job Application Email Tool! This open-source web tool enables you to effortlessly send personalized emails to multiple companies. Bid farewell to manual edits and embrace efficiency. 🚀 4 | 5 | ## Features ✨ 6 | 7 | - **Dynamic Personalization:** Craft one email template and let the tool replace {{name}} with recipient names. 🎩✉️ 8 | - **Effortless Bulk Emails:** Reach out to multiple companies with tailored greetings using a recipient list. 💌📋 9 | - **Streamlined Workflow:** Save time by eliminating repetitive copy-pasting and editing. ⏰🔁 10 | - **Customizable Email Content:** Write your email content once and reuse it for various applications. ✍️📝 11 | - **SMTP Configuration:** Guide users through setting up their SMTP server for reliable email delivery. 🛠️📨 12 | - **User-Friendly Interface:** Intuitive design with collapsible sections and progress indicators. 📊🎨 13 | - **Feedback and Notifications:** Keep users informed about email sending progress and success. 📢🚀 14 | 15 | ## How to Use 📝 16 | 17 | 1. Input a recipient list with names and emails. 📬👥 18 | 2. Use {{name}} in your email body template. 🧙‍♂️🔮 19 | 3. Hit send and let the tool work its magic! 🚀✨ 20 | 21 | # Video : 22 | https://github.com/yassineatik/HackMails/assets/77692478/3c6557cc-d780-4c5f-a681-00ea3219feb8 23 | 24 | 25 | ## Contribution Guidelines 🤝 26 | 27 | We welcome contributions to make this tool even better! If you're interested in contributing: 28 | 29 | 1. Fork the repository. 🍴 30 | 2. Create a new branch with a descriptive name. 🌿 31 | 3. Make your changes and improvements. 🛠️ 32 | 4. Test your changes. ✔️ 33 | 5. Create a pull request to the `main` branch of this repository. 🚀 34 | 35 | ## Installation 🛠️ 36 | 37 | 1. Clone this repository: `git clone https://github.com/yassineatik/HackMails.git` 🧬 38 | 2. Install dependencies: `npm install` 📦 39 | 3. Create free account in [Cloudinary](https://cloudinary.com/) , and paste the credentials in .env file (see [.env.example](https://github.com/yassineatik/HackMails/blob/master/.env.example)) 40 | 4. Start the development server: `npm run dev` 🚀 41 | 42 | ## Feedback and Support 📣🤗 43 | 44 | Found a bug or have a suggestion? We'd love to hear from you. Please open an issue [here](https://github.com/yassineatik/HackMails/issues). 45 | 46 | ## License 📜 47 | 48 | This project is open-source and available under the [MIT License](LICENSE). 49 | 50 | --- 51 | 52 | [Website Link](https://hackmails.com) | [GitHub Repository](https://github.com/yassineatik/HackMails) 🌐 53 | -------------------------------------------------------------------------------- /components/homePage/RecipientSetup.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Collapse } from "@material-tailwind/react"; 3 | import { Icon } from '@iconify/react/dist/iconify.js'; 4 | import { Button } from '../ui/button'; 5 | 6 | function RecipientSetup({ open, onClick, recipients, setRecipients, handleSubmit, setOpenEmail, setOpenSmtp, setOpenEmailReceipts }: any) { 7 | return ( 8 |
9 |
10 |

Set up recipients

11 | 16 |
17 | 18 |
{ e.preventDefault() }} 19 | > 20 |
21 |
22 |

NOTE : Recipients format must be like this email:name

23 |

eg : contact@atikdev.me:Yassine

24 |