{"id":23673681,"url":"https://github.com/alikeldev/reactvitetemplate","last_synced_at":"2026-02-25T16:34:05.262Z","repository":{"id":316833134,"uuid":"1065031495","full_name":"AliKelDev/ReactViteTemplate","owner":"AliKelDev","description":"No longer updated, check out https://github.com/AliKelDev/ReactVite-Template-V2 !","archived":false,"fork":false,"pushed_at":"2025-09-27T00:22:58.000Z","size":0,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-27T02:35:48.018Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/AliKelDev.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-27T00:20:59.000Z","updated_at":"2025-09-27T00:23:01.000Z","dependencies_parsed_at":"2025-09-27T02:35:49.026Z","dependency_job_id":"d25cd4a1-4e5b-478c-8a85-5e9c8401dd0c","html_url":"https://github.com/AliKelDev/ReactViteTemplate","commit_stats":null,"previous_names":["alikeldev/reactvitetemplate"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/AliKelDev/ReactViteTemplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AliKelDev%2FReactViteTemplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AliKelDev%2FReactViteTemplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AliKelDev%2FReactViteTemplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AliKelDev%2FReactViteTemplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AliKelDev","download_url":"https://codeload.github.com/AliKelDev/ReactViteTemplate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AliKelDev%2FReactViteTemplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29830262,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-25T15:41:19.027Z","status":"ssl_error","status_checked_at":"2026-02-25T15:40:47.150Z","response_time":61,"last_error":"SSL_read: 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":["beginner","beginner-friendly","nextjs","nodejs","react","reactjsx","template","template-project","web","website"],"created_at":"2024-12-29T12:53:47.291Z","updated_at":"2026-02-25T16:34:05.239Z","avatar_url":"https://github.com/AliKelDev.png","language":null,"readme":"# 🚀 React + Vite Template Project\n\nA modern, production-ready React template featuring a stunning indigo gradient design system. Perfect for portfolios, agency websites, and project showcases.\n\n[![Live Demo](https://img.shields.io/badge/demo-live-blue.svg)](https://react-vite-alikeldev.netlify.app/)\n[![GitHub Stars](https://img.shields.io/github/stars/AliKelDev/ReactViteTemplate?style=social)](https://github.com/AliKelDev/ReactViteTemplate)\n[![Twitter Follow](https://img.shields.io/twitter/follow/AliLeisR?style=social)](https://x.com/AliLeisR)\n\n[View Demo](https://react-vite-alikeldev.netlify.app/) • [Documentation](#-table-of-contents) • [Professional Services](https://webpixelle3.netlify.app/)\n\n\n## 📋 Table of Contents\n- [✨ Features](#-features)\n- [🚀 Quick Start](#-quick-start)\n- [🛠️ Tech Stack](#️-tech-stack)\n- [📦 Core Components](#-core-components)\n- [🎨 Design System](#-design-system)\n- [📱 Responsive Design](#-responsive-design)\n- [🔧 Customization](#-customization)\n- [🤝 Contributing](#-contributing)\n- [❓ FAQ](#-faq)\n- [📫 Support \u0026 Contact](#-support--contact)\n\n## ✨ Features\n\n### Design \u0026 UX\n- 🎨 Beautiful purple-pink gradient design system\n- 🌟 Modern glassmorphism effects\n- 📱 Fully responsive design for all devices\n- ⚡ Optimized performance with 90+ Lighthouse score\n\n### Components \u0026 Functionality\n- 🖼️ Project showcase component with live previews\n- 🔥 Interactive preview embedder with fallback handling\n- 🛠️ Pre-configured tech stack cards\n- 🔒 Secure iframe handling for external content\n\n### Developer Experience\n- 📦 Zero configuration needed\n- 🎯 ESLint + Prettier setup\n- 📝 Comprehensive documentation\n- ⚡ Fast refresh in development\n\n## 🚀 Quick Start\n\n1. **Clone the repository**\n```bash\ngit clone https://github.com/AliKelDev/ReactViteTemplate.git\ncd ReactViteTemplate\n```\n\n2. **Install dependencies**\n```bash\nnpm install\n# or\npnpm install\n# or\nyarn install\n```\n\n3. **Start development server**\n```bash\nnpm run dev\n```\n\n4. **Open browser**\nNavigate to `http://localhost:5173`\n\n5. **Build for production**\n```bash\nnpm run build\n```\n\n## 🛠️ Tech Stack\n\n| Technology | Purpose |\n|------------|---------|\n| React 18 | UI Framework |\n| Vite | Build Tool |\n| Tailwind CSS | Styling |\n| Lucide Icons | Icons |\n| ESLint | Code Quality |\n| Prettier | Code Formatting |\n\n## 📦 Core Components\n\n### PreviewEmbed\nSecurely embed external content with loading states and error handling:\n```jsx\n\u003cPreviewEmbed \n  url=\"https://your-url.com\" \n  title=\"Project Preview\"\n  fallback={\u003cLoadingSpinner /\u003e}\n/\u003e\n```\n\n### TechCard\nShowcase technologies with animated cards:\n```jsx\n\u003cTechCard\n  title=\"React + Vite\"\n  description=\"Modern build tooling\"\n  icon={ReactIcon}\n  animate={true}\n/\u003e\n```\n\n### InstallGuide\nTerminal-style installation instructions:\n```jsx\n\u003cInstallGuide\n  steps={['npm install', 'npm run dev']}\n  language=\"bash\"\n  copyable={true}\n/\u003e\n```\n\n## 🎨 Design System\n\n### Glassmorphism Effects\n```css\n/* Base glass effect */\n.glass-card {\n  @apply backdrop-blur-lg bg-white/10 border border-white/20 rounded-xl shadow-lg;\n}\n\n/* Interactive glass effect */\n.glass-card-interactive {\n  @apply glass-card hover:bg-white/20 transition-all duration-300;\n}\n```\n\n### Gradient System\n```css\n/* Primary gradient */\n.gradient-primary {\n  @apply bg-gradient-to-r from-purple-600 to-pink-500;\n}\n\n/* Secondary gradient */\n.gradient-secondary {\n  @apply bg-gradient-to-r from-blue-500 to-purple-600;\n}\n```\n\n## 📱 Responsive Design\n\nOur template uses a mobile-first approach with intuitive breakpoints:\n\n| Breakpoint | Size | Usage |\n|------------|------|--------|\n| `sm:` | 640px | Mobile devices |\n| `md:` | 768px | Tablets |\n| `lg:` | 1024px | Laptops |\n| `xl:` | 1280px | Desktops |\n| `2xl:` | 1536px | Large screens |\n\n## 🔧 Customization\n\n### 1. Theme Configuration\nModify `tailwind.config.js`:\n```javascript\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        primary: {\n          50: '#f5f3ff',\n          // Add your color palette\n          900: '#4c1d95',\n        }\n      },\n      fontFamily: {\n        sans: ['Inter', 'sans-serif'],\n        // Add custom fonts\n      }\n    }\n  }\n}\n```\n\n### 2. Component Creation\nCreate new components in `src/components/`:\n```jsx\nexport const CustomCard = ({ title, children }) =\u003e {\n  return (\n    \u003cdiv className=\"glass-card p-6\"\u003e\n      \u003ch2 className=\"text-xl font-bold mb-4\"\u003e{title}\u003c/h2\u003e\n      {children}\n    \u003c/div\u003e\n  );\n};\n```\n\n### 3. Navigation Setup\nUpdate `src/config/navigation.js`:\n```javascript\nexport const navigation = {\n  main: [\n    { name: 'Home', href: '/' },\n    { name: 'Projects', href: '/projects' },\n    // Add your routes\n  ],\n  social: [\n    { name: 'GitHub', href: 'https://github.com/AliKelDev' },\n    // Add social links\n  ]\n};\n```\n\n## ❓ FAQ\n\n### Can I use this template for commercial projects?\nYes! \n\n### How do I deploy this template?\nWe recommend using Netlify or Vercel. Both platforms offer easy deployment from Git:\n1. Connect your repository\n2. Set build command to `npm run build`\n3. Set publish directory to `dist`\n\n### How do I add custom fonts?\n1. Add fonts to `public/fonts/`\n2. Update `tailwind.config.js` with font family\n3. Add `@font-face` rules in `src/styles/fonts.css`\n\n\n## 📫 Support \u0026 Contact\n\n- 🌟 Star this repo if you find it helpful!\n- 🐞 Report bugs via [GitHub Issues](https://github.com/AliKelDev/ReactViteTemplate/issues)\n- 🤝 Follow me on [Twitter](https://x.com/AliLeisR) for updates\n- 💼 Check out my [professional services](https://webpixelle3.netlify.app/)\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\n\u003cp align=\"center\"\u003eMade with ❤️ by \u003ca href=\"https://x.com/AliLeisR\"\u003eAlice Leiser\u003c/a\u003e\u003c/p\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falikeldev%2Freactvitetemplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falikeldev%2Freactvitetemplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falikeldev%2Freactvitetemplate/lists"}