IntroSpect (Email Generator) is a modern, production-ready React application designed to eliminate writer's block for professionals. By leveraging the OpenRouter API and LLMs (such as Gemini 2.0 Flash), it intelligently transforms raw thoughts or bullet points into polished, context-aware emails.
This project demonstrates strong foundational front-end engineering principles, focusing on responsive design, state management, and seamless API integrations.
- Framework: React 18 built with Vite for blazing fast HMR (Hot Module Replacement) and optimized production builds.
- State Management: Effectively manages complex UI state (theme toggling, multi-step generation contexts, loading states) using React Hooks.
- Styling: Styled utilizing Tailwind CSS. Built with clean utility classes ensuring zero dead code in the production CSS bundle.
- Theming: Implements full Dark/Light Mode support with CSS variables, allowing users to seamlessly toggle their preferred visual aesthetic.
- Responsiveness: fluidly adapts to mobile, tablet, and desktop screens. Mobile-first design principles ensure the application remains perfectly usable on small screens.
- LLM Integration: Securely communicates with the OpenRouter.ai API to generate contextual responses.
- Dynamic Prompting: The frontend handles sophisticated string interpolation to dynamically adjust the AI prompt based on user-selected criteria (e.g., Tone: Professional, Casual, Persuasive) and the specific context of an email they might be replying to.
- Graceful Failure: Robust
try/catchand user feedback blocks ensure that API timeouts or rate limits result in clean toast notifications rather than app crashes.
- Node.js (v16+)
- npm or yarn
- Clone the repository and install dependencies:
git clone https://github.com/YOUR_USERNAME/Email-Generator.git
cd Email-Generator
npm install-
Set up environment variables:
- Create a
.envfile in the root. - Add your OpenRouter API key:
VITE_OPENROUTER_API_KEY=your_api_key_here
- Create a
-
Start the development server:
npm run devNavigate to http://localhost:5173.
This project is configured for extremely simple deployment pipelines:
- Vercel: Natively supported. Connect the GitHub repository and specify
npm run buildas the build command. - GitHub Actions / Pages: A fully automated
deploy.ymlworkflow (if configured) allows seamless deployment to GitHub Pages via Actions.
Built by Daniyal Rashid, a focused software engineer with a passion for creating performant, user-centric web applications.