PROJECT OVERVIEW:
The application, tentatively named 'Hesapsız Windows: Yerel Hesap Yöneticisi' (Microsoft Account-Free: Local Account Manager), aims to address a significant pain point for Windows 11 users: the increasingly mandatory requirement of a Microsoft Account (MSA) for setup and core functionalities. Many users prefer or require the use of local accounts for privacy reasons, simpler management, or a preference for offline-first systems. This tool will provide a streamlined way to bypass or manage MSA requirements during Windows installation and offer robust tools for managing local accounts post-installation, ensuring users retain full control over their operating system and data without being forced into the Microsoft ecosystem. The core value proposition is user autonomy, enhanced privacy, and a return to the traditional, more flexible account management experience that many Windows users value.
TECH STACK:
- Frontend Framework: React (using Vite for fast development)
- Styling: Tailwind CSS for utility-first CSS and rapid UI development
- State Management: Zustand for efficient and scalable state management
- Routing: React Router DOM for client-side routing
- UI Components: Radix UI or similar for accessible and unstyled UI primitives (optional, can be styled with Tailwind)
- Icons: Heroicons or Lucide React
- Local Storage: Browser's Local Storage API for persistent settings and user preferences.
- Potential future integration: Electron for a desktop application version.
CORE FEATURES:
1. **Local Account Setup Assistant:**
* **User Flow:** Upon launching the app, the user selects their Windows version (primarily Windows 11). The assistant guides them through the standard Windows setup process, providing specific instructions and workarounds at the crucial 'Microsoft Account Login' screen. This might involve disconnecting from the internet at a specific point, using specific commands (like `OOBE\BYPASSNRO`), or alternative entry points. The UI will present clear, step-by-step instructions with visual aids (screenshots/GIFs). For advanced users, there might be an automated script execution option (with clear warnings).
* **Details:** The assistant will detect the current stage of installation and provide context-aware guidance. It will offer pre-filled commands or links to relevant Microsoft documentation for verification.
2. **Local Account Manager:**
* **User Flow:** After Windows setup, this section provides a dashboard for managing local user accounts. Users can view existing local accounts, create new ones (standard or administrator privileges), modify existing accounts (rename, change password, change account type), and delete accounts. The interface will mimic a simplified, user-friendly version of the built-in Windows User Accounts control panel.
* **Details:** This feature will leverage Windows API calls (if built as a desktop app via Electron) or provide detailed manual instructions for command-line operations if it remains a web-based tool providing guidance.
3. **Privacy & Security Dashboard:**
* **User Flow:** This section highlights the benefits of using local accounts regarding privacy. It will offer quick links or settings suggestions for enhancing local account security, such as setting strong passwords, enabling password protection for screen locks, and disabling optional telemetry or data collection services within Windows that are often more intrusive when linked to an MSA.
* **Details:** Provides actionable tips and direct links to relevant Windows settings pages. Explains the implications of various settings.
4. **MSA Bypass/Switching Tool (Advanced):**
* **User Flow:** For users who have already installed Windows 11 with an MSA, this tool provides a guided process to switch to a local account. This involves creating a local account first, then transferring user data (documents, settings – possibly via script or manual copy guidance), and finally unlinking the MSA from the user profile.
* **Details:** This is a more complex feature and might be part of the premium offering. It requires careful handling of user data and system configurations.
UI/UX DESIGN:
- **Layout:** Single Page Application (SPA) with a clear, intuitive navigation. A sidebar or top navigation bar for switching between features (Setup Assistant, Account Manager, Privacy Dashboard). The main content area will display the relevant tools and information for the selected feature.
- **Color Palette:** Clean, modern, and trustworthy. Primary colors could be a calming blue or green, with neutral grays and whites for backgrounds and text. Accent colors (e.g., a vibrant orange or yellow) for call-to-action buttons and important alerts. Avoid overly aggressive or 'Microsoft-like' aesthetics. Use `hsl()` for easier color manipulation.
- **Typography:** A clean, readable sans-serif font like Inter, Lato, or Open Sans for body text and headings. Ensure good contrast ratios for accessibility.
- **Responsive Design:** Mobile-first approach. The layout should adapt gracefully to different screen sizes (desktops, tablets, mobile phones). Use Tailwind's responsive prefixes (e.g., `md:`, `lg:`) extensively. Ensure touch targets are adequately sized on mobile devices.
- **Visuals:** Use clear icons, potentially subtle animations for transitions, and informative loading states.
COMPONENT BREAKDOWN:
- `App.jsx`: Main application component, sets up routing and global layout.
- `Header.jsx`: Top navigation bar or application title.
- `Sidebar.jsx`: Navigation menu for different features.
- `SetupAssistantPage.jsx`: Contains the logic and UI for the setup guide.
- `StepIndicator.jsx`: Shows progress through the setup steps.
- `InstructionCard.jsx`: Displays individual instructions, images, or command snippets.
- `ActionButton.jsx`: Interactive buttons for executing commands or navigating.
- `AccountManagerPage.jsx`: Dashboard for managing local accounts.
- `AccountList.jsx`: Renders a list of local accounts.
- `AccountListItem.jsx`: Individual item in the account list, with options to edit/delete.
- `CreateAccountForm.jsx`: Modal or form for creating new accounts.
- `EditAccountForm.jsx`: Modal or form for editing existing accounts.
- `PrivacyDashboardPage.jsx`: Displays privacy-related information and tips.
- `TipCard.jsx`: Card displaying a privacy tip or setting suggestion.
- `LinkButton.jsx`: Button that links to a specific Windows setting.
- `SettingsPage.jsx`: Application-level settings (e.g., theme, language).
- `Footer.jsx`: Standard footer with copyright and links.
- `Modal.jsx`: Generic modal component for forms or confirmations.
- `LoadingSpinner.jsx`: Component to display during asynchronous operations.
- `AlertMessage.jsx`: Component for displaying user feedback (success, error, warning).
DATA MODEL:
- **State Structure (Zustand):**
```javascript
// store.js
import { create } from 'zustand';
const useStore = create((set) => ({
// Setup Assistant State
currentSetupStep: 1,
setupInstructions: [], // Array of instruction objects
isInternetRequired: true, // Boolean flag
bypassCommand: null, // e.g., 'OOBE\BYPASSNRO'
// Account Manager State
localAccounts: [], // Array of account objects { id, username, type: 'admin'|'standard', status: 'active'|'locked' }
isLoadingAccounts: false,
selectedAccountId: null,
// Settings State
isDarkMode: false,
language: 'en',
// Actions...
nextSetupStep: () => set((state) => ({ currentSetupStep: state.currentSetupStep + 1 })),
setSetupInstructions: (instructions) => set({ setupInstructions: instructions }),
setBypassCommand: (command) => set({ bypassCommand: command }),
setLocalAccounts: (accounts) => set({ localAccounts: accounts }),
setLoadingAccounts: (isLoading) => set({ isLoadingAccounts: isLoading }),
// ... other actions for creating, deleting, updating accounts, toggling dark mode, etc.
}));
export default useStore;
```
- **Mock Data Formats:**
* `Instruction Object` for Setup Assistant:
```json
{
"step": 2,
"title": "Disconnect from the Internet",
"description": "Temporarily disconnect your Wi-Fi or unplug your Ethernet cable to force Windows to offer the local account option.",
"imageUrl": "/images/setup/disconnect.png",
"command": null,
"isActionRequired": true
}
```
* `Account Object` for Account Manager:
```json
{
"id": "user123",
"username": "TechGuru",
"type": "admin", // 'admin' or 'standard'
"status": "active", // 'active', 'locked', 'password_required'
"lastLogin": "2023-10-27T10:30:00Z"
}
```
* `PrivacyTip Object`:
```json
{
"id": "tip001",
"title": "Enable Lock Screen Password",
"description": "Always require a password when waking your computer from sleep.",
"settingLink": "ms-settings:lockscreen"
}
```
ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Subtle fade or slide transitions between different pages/features using `Framer Motion` or React Router's built-in transition capabilities.
- **Button Hovers:** Slight scale-up or background color change on button hover states for visual feedback.
- **Loading States:** Use skeleton loaders or spinners (`LoadingSpinner.jsx` component) when fetching account data or performing critical operations. Ensure a smooth transition from loading to content display.
- **Form Interactions:** Visual feedback on input focus, validation errors (e.g., red border, error message below input), and success messages upon form submission.
- **Micro-interactions:** For example, a subtle animation when an account is successfully added or deleted. A tooltip on hover for icon buttons.
EDGE CASES & ERROR HANDLING:
- **Empty States:** The Account Manager should display a friendly message and a prompt to create an account if no local accounts are found (besides the default administrator). The Privacy Dashboard should gracefully handle cases where certain settings are not applicable.
- **Error Management:** Implement try-catch blocks for all API calls or critical operations. Display user-friendly error messages using the `AlertMessage.jsx` component. Log detailed errors for developers (e.g., using a service like Sentry).
- **Validation:** Client-side validation for all forms (username, password strength, etc.). Provide clear feedback on validation failures.
- **Accessibility (a11y):** Use semantic HTML elements. Ensure proper ARIA attributes where necessary. Keyboard navigability for all interactive elements. Sufficient color contrast. Test with screen readers.
- **Browser Compatibility:** Ensure compatibility with modern browsers (Chrome, Firefox, Safari, Edge). Utilize tools like `Can I use` to check feature support.
- **Unsupported Windows Versions:** Clearly state which Windows versions are supported. Provide guidance or gracefully degrade functionality for unsupported versions.
SAMPLE DATA (Mock Data Examples):
1. **Setup Assistant - Initial Steps:**
```json
[
{"step": 1, "title": "Start Windows Setup", "description": "Boot from your Windows installation media and begin the setup process.", "imageUrl": "/images/setup/boot.png", "command": null, "isActionRequired": false},
{"step": 2, "title": "Reach the Network Connection Screen", "description": "Proceed through the initial setup screens until you reach the 'Let's connect you to a network' screen.", "imageUrl": "/images/setup/network_screen.png", "command": null, "isActionRequired": false}
]
```
2. **Bypass Command:** `OOBE\BYPASSNRO`
3. **Local Accounts List:**
```json
[
{"id": "admin", "username": "Administrator", "type": "admin", "status": "active", "lastLogin": null},
{"id": "user456", "username": "JaneDoe", "type": "standard", "status": "active", "lastLogin": "2023-10-26T18:45:00Z"},
{"id": "user789", "username": "TempUser", "type": "standard", "status": "locked", "lastLogin": null}
]
```
4. **Privacy Tip Example:**
```json
{
"id": "tip002",
"title": "Review Privacy Settings",
"description": "Check Windows privacy settings regularly, especially regarding advertising ID, diagnostics, and location services.",
"settingLink": "ms-settings:privacy-general"
}
```
5. **Account Creation Form Fields:** `username`, `password`, `confirmPassword`, `accountType` ('standard' or 'admin').
6. **Account Edit Form Fields:** `password`, `accountType`.
7. **Success Message:** "Local account 'NewUser' created successfully."
8. **Error Message:** "Failed to create account. Username already exists."
9. **Input Field Component Props:** `label`, `type` (text, password), `value`, `onChange`, `error`, `placeholder`, `isRequired`.
10. **Modal Component Props:** `isOpen`, `onClose`, `title`, `children`.
DEPLOYMENT NOTES:
- **Build:** Use Vite's build command (`npm run build` or `yarn build`).
- **Environment Variables:** Use `.env` files for environment-specific configurations (e.g., API endpoints if moving to a backend later, feature flags). Prefix variables with `VITE_` for Vite applications.
- **Performance Optimizations:** Code splitting (handled by Vite), lazy loading components, image optimization, memoization (`React.memo`, `useMemo`, `useCallback`) for performance-critical components. Minimize bundle size.
- **Hosting:** Deployable on static hosting platforms like Vercel, Netlify, or GitHub Pages. For an Electron version, packaging and distribution would need to be handled separately.
- **HTTPS:** Always serve the application over HTTPS in production environments.