{"id":27798016,"url":"https://github.com/nabhag8848/react-vite-template","last_synced_at":"2025-07-18T22:36:06.514Z","repository":{"id":286574720,"uuid":"961828008","full_name":"Nabhag8848/react-vite-template","owner":"Nabhag8848","description":"Modern React Template with Vite","archived":false,"fork":false,"pushed_at":"2025-04-14T08:42:17.000Z","size":159,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-30T22:54:58.623Z","etag":null,"topics":["motion","react","react-router","styled-components","theme","typescript","vite"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Nabhag8848.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2025-04-07T08:23:18.000Z","updated_at":"2025-04-17T08:37:19.000Z","dependencies_parsed_at":"2025-04-12T20:32:17.948Z","dependency_job_id":null,"html_url":"https://github.com/Nabhag8848/react-vite-template","commit_stats":null,"previous_names":["nabhag8848/latest-portfolio","nabhag8848/react-vite-template"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nabhag8848%2Freact-vite-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nabhag8848%2Freact-vite-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nabhag8848%2Freact-vite-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nabhag8848%2Freact-vite-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nabhag8848","download_url":"https://codeload.github.com/Nabhag8848/react-vite-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251795423,"owners_count":21645022,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["motion","react","react-router","styled-components","theme","typescript","vite"],"created_at":"2025-04-30T22:55:02.515Z","updated_at":"2025-04-30T22:55:03.077Z","avatar_url":"https://github.com/Nabhag8848.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Modern React Template with Vite\n\nA modern, minimal React template built with Vite, featuring TypeScript, React Router, Emotion, and system-aware theming. This template provides a solid foundation for building modern web applications with best practices and excellent developer experience.\n\n## Features\n\n- ⚡️ **Vite** - Lightning fast build tool with instant HMR\n- 🎨 **Emotion** - Powerful CSS-in-JS with theme support\n- 🌓 **Dark/Light Mode** - System-aware theming with smooth transitions\n- 🛣️ **React Router** - Declarative routing with the latest React Router\n- 📝 **TypeScript** - Type safety and better developer experience\n- 🎯 **ESLint** - Strict TypeScript and React specific linting rules\n- 📦 **Modern Package Management** - Using pnpm for efficient dependency management\n- 🏗️ **Default Layout** - Clean and maintainable layout structure\n- 🎭 **Motion Support** - Built-in animation capabilities\n- 🚀 **Production Ready** - Optimized build setup for production\n\n## Code Examples\n\n### Theme Setup and Usage\n\nThis project uses Emotion for theming with a light/dark mode system. Here's how it's implemented:\n\n#### 1. Theme Provider Setup\n\n```tsx\n// AppRouterProviders.tsx\nimport { ThemeProvider } from \"@emotion/react\";\nimport { THEME_DARK } from \"@ui/theme/dark\";\nimport { THEME_LIGHT } from \"@ui/theme/light\";\nimport { useSystemColorScheme } from \"@ui/theme/hooks/useSystemColorScheme\";\n\nexport const AppRouterProviders = () =\u003e {\n  // Automatically detect system color scheme\n  const preferredColorScheme = useSystemColorScheme();\n  const isDarkMode = preferredColorScheme === \"dark\";\n  const theme = isDarkMode ? THEME_DARK : THEME_LIGHT;\n\n  // Set HTML class for dark/light mode\n  document.documentElement.className = isDarkMode ? \"dark\" : \"light\";\n\n  return (\n    \u003cThemeProvider theme={theme}\u003e\n      \u003cStrictMode\u003e\n        \u003cPageTitle /\u003e\n        \u003cOutlet /\u003e\n      \u003c/StrictMode\u003e\n    \u003c/ThemeProvider\u003e\n  );\n};\n```\n\n#### 2. Global Styles Setup\n\n```tsx\n// DefaultLayout.tsx\nimport { Global, useTheme } from \"@emotion/react\";\nimport { globalStyles } from \"@ui/styles/global\";\n\nexport const DefaultLayout = () =\u003e {\n  const theme = useTheme();\n  const styles = globalStyles(theme);\n\n  return (\n    \u003c\u003e\n      \u003cGlobal styles={styles} /\u003e\n      \u003cOutlet /\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n#### 3. Using Theme in Components\n\n```tsx\n// Example component using theme\nimport { useTheme } from \"@emotion/react\";\nimport styled from \"styled-components\";\n\nconst StyledComponent = styled.div`\n  background-color: ${(props) =\u003e props.theme.background.primary};\n\n  //...OtherStyles\n`;\n\nconst MyComponent = () =\u003e {\n  const theme = useTheme();\n\n  return (\n    \u003cStyledComponent\u003e\n      \u003ch1 style={{ color: theme.text.secondary }}\u003eHello World\u003c/h1\u003e\n    \u003c/StyledComponent\u003e\n  );\n};\n```\n\n#### Key Features:\n\n- Automatic dark/light mode detection based on system preferences\n- Theme values accessible throughout the application\n- Global styles that respond to theme changes\n\n#### Theme Structure:\n\n```typescript\ninterface Theme {\n  background: {\n    primary: string;\n    secondary: string;\n    tertiary: string;\n  };\n  text: {\n    primary: string;\n    secondary: string;\n  };\n  spacing: {\n    sm: string;\n    md: string;\n    lg: string;\n  };\n  // ... other theme properties\n}\n```\n\n### Routing Setup\n\n```tsx\n// Basic route configuration\n\u003cRoute element={\u003cDefaultLayout /\u003e}\u003e\n  \u003cRoute path=\"/\" element={\u003cHome /\u003e} /\u003e\n  \u003cRoute path=\"/about\" element={\u003cAbout /\u003e} /\u003e\n\u003c/Route\u003e\n```\n\n## Quick Start\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone [your-repo-url]\n\n# Navigate to project directory\ncd [your-project-name]\n\n# Install dependencies\npnpm install\n```\n\n### Development\n\n```bash\n# Start development server\npnpm dev\n```\n\nThe development server will start at http://localhost:3001\n\n### Build\n\n```bash\n# Create production build\npnpm build\n```\n\n## Project Structure\n\n```\nsrc/\n├── app/          # Application-specific components and logic\n├── ui/           # Reusable UI components and theme\n│   ├── layout/   # Layout components\n│   ├── theme/    # Theme configuration\n│   └── styles/   # Global styles\n├── utils/        # Utility functions\n└── main.tsx      # Application entry point\n```\n\n## Theme Configuration\n\nThe template includes a system-aware theme that automatically switches between light and dark mode based on system preferences. Theme configuration can be found in:\n\n- `src/ui/theme/light.ts`\n- `src/ui/theme/dark.ts`\n\n## ESLint Configuration\n\nThe project includes a comprehensive ESLint setup with:\n\n- TypeScript-aware linting\n- React-specific rules\n- React Hooks linting\n- Strict type checking\n\n## License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnabhag8848%2Freact-vite-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnabhag8848%2Freact-vite-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnabhag8848%2Freact-vite-template/lists"}