{"id":31424825,"url":"https://github.com/sidh364/export_frontend_1","last_synced_at":"2026-04-08T16:02:11.920Z","repository":{"id":317182844,"uuid":"1066317726","full_name":"sidh364/Export_Frontend_1","owner":"sidh364","description":"A modern, responsive React TypeScript application featuring a sophisticated code export interface with HTML/CSS and Next.js project options.","archived":false,"fork":false,"pushed_at":"2026-01-26T12:06:06.000Z","size":48,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-27T01:44:25.602Z","etag":null,"topics":["css","git","reactjs","vercel","vite"],"latest_commit_sha":null,"homepage":"https://export-frontend-1.vercel.app/","language":"Jupyter Notebook","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sidh364.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-29T10:22:13.000Z","updated_at":"2026-01-26T12:06:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"6dff90b0-c37c-44cb-888b-479b75dc1cee","html_url":"https://github.com/sidh364/Export_Frontend_1","commit_stats":null,"previous_names":["sidh364/export_frontend_1"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sidh364/Export_Frontend_1","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sidh364%2FExport_Frontend_1","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sidh364%2FExport_Frontend_1/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sidh364%2FExport_Frontend_1/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sidh364%2FExport_Frontend_1/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sidh364","download_url":"https://codeload.github.com/sidh364/Export_Frontend_1/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sidh364%2FExport_Frontend_1/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31562697,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","git","reactjs","vercel","vite"],"created_at":"2025-09-30T04:04:12.340Z","updated_at":"2026-04-08T16:02:11.910Z","avatar_url":"https://github.com/sidh364.png","language":"Jupyter Notebook","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Code Export Frontend\n\nA modern, responsive React TypeScript application featuring a sophisticated code export interface with HTML/CSS and Next.js project options.\n\n## 🚀 Features\n\n### Core Functionality\n- *Dual Export Options*: Support for both HTML \u0026 CSS and Next.js project exports\n- *Interactive Checkboxes*: Customizable export settings for each project type\n- *Loading States*: Professional loading spinner with disabled interactions during download\n- *Tab Locking*: Prevents tab switching during active downloads\n\n### User Interface\n- *Modern Design*: Dark theme with professional styling and smooth gradients\n- *Custom Icons*: React and HTML5 icons for visual project identification\n- *Animated Transitions*: Smooth tab switching with CSS animations\n- *Responsive Layout*: Mobile-first design supporting all screen sizes\n\n### Technical Highlights\n- *TypeScript*: Full type safety and modern React patterns\n- *Custom Hooks*: State management for checkboxes and loading states\n- *CSS Variables*: Consistent theming with CSS custom properties\n- *Accessibility*: Keyboard navigation and focus management\n- *Performance*: Optimized rendering and minimal re-renders\n\n## 📱 Responsive Breakpoints\n\n- *Desktop*: 768px and above\n- *Tablet*: 768px - 481px\n- *Mobile*: 480px - 321px\n- *Small Mobile*: 320px and below\n\n## 🛠 Technologies Used\n\n- *React 18* with TypeScript\n- *Vite* for build tooling and development server\n- *CSS3* with modern features (Grid, Flexbox, Custom Properties)\n- *Google Fonts* (Kumbh Sans, Nunito Sans)\n- *ESLint* for code quality\n\n## 📦 Installation\n\n1. *Clone the repository*\n   bash\n   git clone \u003crepository-url\u003e\n   cd my-app\n   \n\n2. *Install dependencies*\n   bash\n   npm install\n   \n\n3. *Start development server*\n   bash\n   npm run dev\n   \n\n4. *Build for production*\n   bash\n   npm run build\n   \n\n## 🎯 Project Structure\n\n\nsrc/\n├── components/\n│   ├── export.tsx          # Main export page component\n│   └── popup.tsx           # Export options modal\n├── styles/\n│   ├── export.css          # Main page styling\n│   ├── popup.css           # Modal styling\n│   └── index.css           # Global styles\n├── main.tsx                # App entry point\n└── App.tsx                 # Root component\n\n\n## 🎨 Design Features\n\n### Export Options Modal\n- *Tab Selector*: Animated tab switching between HTML \u0026 CSS and Next.js\n- *Export Statements*: Project type indicators with custom icons\n- *Checkbox Controls*: \n  - HTML \u0026 CSS: Include assets, Include custom code\n  - Next.js: Use app directory, Include assets locally, Include custom code\n- *Download Button*: Responsive with loading states and animations\n\n### Styling System\n- *CSS Variables*: Consistent color palette with neutral tones\n- *Typography*: Professional font hierarchy with Kumbh Sans and Nunito Sans\n- *Animations*: Smooth transitions and micro-interactions\n- *Shadows*: Layered shadow system for depth\n\n## ⚡ Performance Features\n\n- *Lazy Loading*: Components loaded on demand\n- *CSS Optimization*: Minimal bundle size with efficient selectors\n- *State Management*: Optimized React state updates\n- *Font Loading*: Optimized Google Fonts loading strategy\n\n## 🔧 Customization\n\n### Theme Colors\nEdit CSS variables in popup.css:\ncss\n:root {\n  --Neutral-Neutral750: #292929;\n  --Neutral-Neutral800: #1F1F1F;\n  --Neutral-Neutral50: #F6F6F6;\n  --Primary-Primary500: #665DC0;\n}\n\n\n### Export Options\nModify checkbox options in popup.tsx:\ntypescript\nconst [checkedItems, setCheckedItems] = useState({\n  includeAssets: false,\n  includeCustomCode: false,\n  useAppDirectory: false\n});\n\n\n## 📱 Mobile Optimizations\n\n- *Touch Targets*: Minimum 44px for mobile accessibility\n- *Responsive Typography*: Scales appropriately across devices\n- *Gesture Support*: Touch-friendly interactions\n- *Viewport Optimization*: Proper mobile viewport handling\n\n## 🚀 Deployment\n\n### Build Commands\nbash\n# Development\nnpm run dev\n\n# Production build\nnpm run build\n\n# Preview production build\nnpm run preview\n\n# Lint code\nnpm run lint\n\n\n### Environment Setup\n- *Node.js*: 18+ recommended\n- *Package Manager*: npm or yarn\n- *Browser Support*: Modern browsers (ES2020+)\n\n## 🎯 Future Enhancements\n\n- [ ] Actual file download implementation\n- [ ] Progress tracking for downloads\n- [ ] Export history and settings persistence\n- [ ] Additional export formats (Vue, Angular, etc.)\n- [ ] Drag \u0026 drop file uploads\n- [ ] Real-time preview generation\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch (git checkout -b feature/amazing-feature)\n3. Commit changes (git commit -m 'Add amazing feature')\n4. Push to branch (git push origin feature/amazing-feature)\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n## 👨‍💻 Developer\n\nCreated with ❤ for modern web development practices and user experience excellence.\n\n---\n\n## 📞 Support\n\nFor questions or support, please open an issue on the GitHub repository.\n\n*Built with modern web technologies and attention to detail* 🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsidh364%2Fexport_frontend_1","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsidh364%2Fexport_frontend_1","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsidh364%2Fexport_frontend_1/lists"}