### Vite Configuration - Build Tool Setup (TS)
Source: https://context7.com/azooz-dev/al-haramain-store-frontend/llms.txt
Configures the Vite build tool, including integration with the official React plugin for Fast Refresh support. This setup ensures a fast development server and optimized production builds.
```typescript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// Configure Vite with React plugin
export default defineConfig({
plugins: [react()],
})
```
--------------------------------
### Development Scripts - NPM Commands (JSON & Bash)
Source: https://context7.com/azooz-dev/al-haramain-store-frontend/llms.txt
Defines essential NPM scripts for managing the development workflow, including starting the development server, building for production, linting code, and previewing the production build locally. These scripts leverage Vite and TypeScript compiler.
```json
{
"name": "al-haramain-store-frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
}
}
```
```bash
# Start development server with HMR
npm run dev
# Build for production with TypeScript check
npm run build
# Run ESLint to check code quality
npm run lint
# Preview production build locally
npm run preview
```
--------------------------------
### Define HTML Entry Point for React Application
Source: https://context7.com/azooz-dev/al-haramain-store-frontend/llms.txt
This HTML file serves as the application shell, providing the root mounting point for the React application. It includes essential meta tags for responsive design and character encoding, along with a favicon link. The document imports the main application entry point via an ES module script tag, enabling Vite's development server and build process.
```html
al-haramain-store-frontend
```
--------------------------------
### Component Styling - CSS Modules Pattern (CSS)
Source: https://context7.com/azooz-dev/al-haramain-store-frontend/llms.txt
Demonstrates component-specific styling using CSS, including animations and responsive design principles. This approach isolates styles to individual components, preventing naming conflicts and improving maintainability.
```css
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
```
--------------------------------
### React Application Bootstrap - Root Initialization (TSX)
Source: https://context7.com/azooz-dev/al-haramain-store-frontend/llms.txt
Initializes the React application by rendering the root component within StrictMode. It uses `createRoot` from `react-dom/client` to manage the application's lifecycle and enable additional development checks.
```tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
// Bootstrap the React application
createRoot(document.getElementById('root')!).render(
,
)
```
--------------------------------
### Global Styling - CSS Custom Properties (CSS)
Source: https://context7.com/azooz-dev/al-haramain-store-frontend/llms.txt
Sets up global styles using CSS custom properties for consistent theming across the application. It defines styles for both light and dark color schemes, ensuring a responsive and adaptable user interface.
```css
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
```
--------------------------------
### React App Component - Main Application Entry Point (TSX)
Source: https://context7.com/azooz-dev/al-haramain-store-frontend/llms.txt
The main App component in React, demonstrating the use of useState hook for state management and rendering basic UI elements with logos and a counter button. It serves as the primary container for the application's UI.
```tsx
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
function App() {
const [count, setCount] = useState(0)
return (
<>
Vite + React
Edit src/App.tsx and save to test HMR
Click on the Vite and React logos to learn more
)
}
export default App
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.