LoginHome is a beautiful, minimalist authentication portal designed with Apple Inc.'s aesthetic philosophy. It provides a comprehensive solution for user authentication, registration, and profile management with full internationalization support.
- 🎨 Minimalist Design - Clean, elegant UI inspired by Apple's design language
- 🌍 Internationalization - Built-in i18n support for English and Chinese
- 🎯 Modern Stack - React 19, TypeScript, Vite, Tailwind CSS
- 📱 Responsive - Seamless experience across all devices
- 🔒 Secure - Multiple authentication methods including WeChat login
- 🎭 Theme Support - Dark mode ready
- ♿ Accessible - Built with accessibility in mind using Radix UI
- 🚀 Fast - Powered by Vite for lightning-fast development and builds
- Node.js >= 18
- pnpm (recommended)
# Clone the repository
git clone https://github.com/OVINC/LoginHome.git
cd LoginHome
# Install dependencies
pnpm install
# Start development server
pnpm devVisit http://localhost:5173 to see your application.
# Build the project
pnpm build
# Preview production build
pnpm preview- Framework: React 19.2.0
- Build Tool: Vite 7.2.4
- Language: TypeScript 5.9.3
- Styling: Tailwind CSS 4.1.18
- UI Components: Radix UI, shadcn/ui
- Form Management: React Hook Form + Zod
- State Management: Zustand
- Routing: React Router DOM 7.11.0
- HTTP Client: Axios
- Icons: Lucide React
- Linting: ESLint with Alloy Config
LoginHome/
├── public/ # Static assets
│ ├── favicon.png # Application logo
│ └── config.js # Runtime configuration
├── src/
│ ├── api/ # API service layer
│ ├── components/ # React components
│ │ ├── ui/ # Reusable UI components (shadcn)
│ │ ├── layout/ # Layout components
│ │ └── *.tsx # Feature components
│ ├── contexts/ # React contexts
│ ├── i18n/ # Internationalization
│ │ └── locales/ # Language files
│ ├── pages/ # Page components
│ ├── store/ # Global state management
│ ├── styles/ # Global styles
│ ├── lib/ # Utility functions
│ ├── App.tsx # Root component
│ └── main.tsx # Entry point
├── package.json # Dependencies and scripts
├── vite.config.ts # Vite configuration
├── tsconfig.json # TypeScript configuration
├── tailwind.config.js # Tailwind CSS configuration
└── eslint.config.mjs # ESLint configuration
# Development
pnpm dev # Start dev server with hot reload
# Build
pnpm build # Build for production
# Lint
pnpm lint # Run ESLint
pnpm lint:fix # Fix ESLint errors automatically
# Preview
pnpm preview # Preview production build locallyLoginHome supports multiple languages out of the box. Language files are located in src/i18n/locales/:
en.json- English translationszh.json- Chinese translations
To add a new language, create a new JSON file in the locales directory and update the i18n configuration.
The application uses Tailwind CSS for styling. Customize the theme in tailwind.config.js:
export default {
theme: {
extend: {
colors: {
// Your custom colors
},
},
},
};Runtime configuration can be modified in public/config.js or through environment variables.
An optional external HTML fragment can be inserted immediately after the opening <head> tag during a production build. Pass its path through BUILD_HEAD_FRAGMENT_FILE:
BUILD_HEAD_FRAGMENT_FILE=tracking.fragment.html pnpm buildRelative paths are resolved from the repository root. The fragment is treated as trusted build input and can contain script tags such as:
<script defer src="https://example.com/script.js" data-website-id="website-id"></script>
<script defer src="https://example.com/recorder.js" data-website-id="website-id"></script>The fragment file should be supplied by the build environment and kept outside Git tracking; the recommended tracking.fragment.html filename is ignored by default. When the variable is unset, no fragment is injected. Changing the fragment requires rebuilding and redeploying the site.
This project is licensed under the MIT License - see the LICENSE file for details.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
If you have any questions or need help, please:
- Open an Issue
- Check existing Discussions
- React - The web framework used
- Vite - Build tool
- Tailwind CSS - CSS framework
- shadcn/ui - UI components
- Radix UI - Unstyled, accessible components