একটি সুন্দর, কাস্টমাইজযোগ্য এবং দ্রুতগতির ব্যক্তিগত হোমপেজ যা আপনার সবচেয়ে প্রিয় ওয়েবসাইটগুলোর দ্রুত অ্যাক্সেস প্রদান করে।

💡 Inspiration: This project was inspired by basic home UI templates like Home-UI-for-Browser, but evolved into a production-ready, feature-rich application with advanced customization, state management, and professional UI/UX design.

🎯 Project Name: MCLX Home UI for Browser - A comprehensive browser home page solution

• থিম সিস্টেম: লাইট, ডার্ক এবং সিস্টেম থিম
• ক্লক কাস্টমাইজেশন: রঙ, গ্লো ইফেক্ট, ১২/২৪ ঘন্টা ফরম্যাট, সেকেন্ড দেখান/লুকান
• ক্লক পজিশন: টপ-লেফট, টপ-সেন্টার, টপ-রাইট পজিশন
• কার্ড সাইজিং: শর্টকাট কার্ডের আকার এবং বর্ডার রেডিয়াস নিয়ন্ত্রণ
• ব্যাকগ্রাউন্ড ইমেজ: আপনার পছন্দের ইমেজ/ভিডিও আপলোড করুন (৫০MB পর্যন্ত)
• ভাষা সিলেকশন: বাংলা এবং ইংরেজি ভাষা সমর্থন

• স্মার্ট শর্টকাট: আপনার সবচেয়ে ব্যবহৃত সাইটগুলোর দ্রুত অ্যাক্সেস
• কীবোর্ড শর্টকাট: কাস্টম কীবোর্ড শর্টকাট (Ctrl+Shift+A, Alt+G ইত্যাদি)
• অটো অর্ডারিং: সবচেয়ে বেশি দেখা সাইটগুলো প্রথমে দেখান
• ড্র্যাগ অ্যান্ড ড্রপ: সহজে শর্টকাট সাজান
• ভিজিট ট্র্যাকিং: প্রতিটি সাইটের ভিজিট সংখ্যা ট্র্যাক করুন
• নতুন উইন্ডো: শর্টকাট খুলুন নতুন উইন্ডোতে বা একই ট্যাবে

• রিয়েল-টাইম সেভ: স্বয়ংক্রিয়ভাবে নোট সেভ হয়
• প্রজেক্ট ম্যানেজমেন্ট: প্রজেক্ট তৈরি, সম্পাদনা এবং মুছে ফেলা
• টুডু লিস্ট: প্রতিটি প্রজেক্টের জন্য টুডু আইটেম যোগ করুন
• প্রগ্রেস ট্র্যাকিং: প্রজেক্ট কার্ডে টুডু সম্পূর্ণতার প্রগ্রেস বার
• টুডু ফিচার: অগ্রাধিকার, ক্যাটাগরি, বর্ণনা, তারিখ এবং পুনঃসাজানো
• ক্লিয়ার বাটন: সহজে নোট মুছে ফেলুন
• পারসিস্টেন্ট: পেজ রিফ্রেশের পরেও সব কিছু থাকে

• ওয়েলকাম ডায়ালগ: প্রথমবার ব্যবহারকারীদের জন্য গাইড
• প্রোফাইল সিলেকশন: ডেভেলপার, গেমার বা সাধারণ ব্যবহারকারী
• স্কেলেটন লোডিং: দ্রুত লোডিং অভিজ্ঞতা
• রেসপন্সিভ ডিজাইন: সব ডিভাইসে পারফেক্ট কাজ করে
• রিসেট ফিচার: সব ডেটা রিসেট করার অপশন
• ইন্ডেক্সডিবি স্টোরেজ: বড় ফাইল (৫০MB পর্যন্ত) স্টোর করার জন্য

• Frontend: Next.js 15.5.5, React 19, TypeScript 5
• Styling: Tailwind CSS 4, shadcn/ui
• State Management: Zustand with persistence
• Drag & Drop: React DND (HTML5 Backend)
• Storage: localStorage + IndexedDB for large files
• Icons: Lucide React
• Fonts: Google Fonts (Share Tech Mono, Orbitron)
• Build Tool: Turbopack
• Package Manager: Bun
• CI/CD: GitHub Actions

• Node.js 18+
• Bun (প্রস্তাবিত) অথবা npm/yarn

1. রিপোজিটরি ক্লোন করুন

git clone https://github.com/mozaddedalfeshani/mclx-home-ui-for-browser.git
cd mclx-home-ui-for-browser

2. Bun ইনস্টল করুন (প্রস্তাবিত)

curl -fsSL https://bun.sh/install | bash

3. ডিপেন্ডেন্সি ইনস্টল করুন

bun install
# অথবা
npm install
# অথবা
yarn install

4. ডেভেলপমেন্ট সার্ভার চালু করুন

bun run dev
# অথবা
npm run dev
# অথবা
yarn dev

5. ব্রাউজারে খুলুন

http://localhost:3000

bun run build
bun run start
# অথবা
npm run build
npm start

1. প্রোফাইল নির্বাচন করুন: ডেভেলপার, গেমার বা সাধারণ
2. প্রি-ডিফাইন্ড শর্টকাট: আপনার প্রোফাইলের জন্য প্রস্তুত শর্টকাট পাবেন
3. কাস্টমাইজ করুন: সেটিংস থেকে সব কিছু পছন্দমতো সাজান

⚙️ নিচের ডান কোণে গিয়ার আইকনে ক্লিক করুন

• থিম: লাইট/ডার্ক/সিস্টেম
• ভাষা: বাংলা/ইংরেজি (সমগ্র ওয়েবসাইট)
• অটো অর্ডার ট্যাব: সবচেয়ে বেশি দেখা সাইট প্রথমে
• ক্লক দেখান: ডিজিটাল ক্লক চালু/বন্ধ
• ক্লক পজিশন: টপ-লেফট, টপ-সেন্টার, টপ-রাইট
• রাইট সাইড: নোটপ্যাড প্যানেল চালু/বন্ধ
• রিসাইজ শর্টকাট: কার্ডের আকার এবং রেডিয়াস
• ব্যাকগ্রাউন্ড ইমেজ: ইমেজ/ভিডিও আপলোড/রিমুভ (৫০MB পর্যন্ত)
• ক্লক কালার: ক্লকের রঙ, গ্লো, ফরম্যাট এবং সেকেন্ড
• রিসেট সবকিছু: সব ডেটা রিসেট করুন

• যোগ করুন: ➕ বাটনে ক্লিক করে নতুন শর্টকাট
• সাজান: ড্র্যাগ অ্যান্ড ড্রপ দিয়ে সাজান
• মুছে ফেলুন: ❌ বাটনে ক্লিক করে মুছে ফেলুন
• কীবোর্ড শর্টকাট: ৩-ডট মেনু থেকে কাস্টম শর্টকাট সেট করুন
• নতুন উইন্ডো: শর্টকাট খুলুন নতুন উইন্ডোতে বা একই ট্যাবে
• ভিজিট ট্র্যাক: প্রতিবার ক্লিক করলে ভিজিট সংখ্যা বাড়ে

• প্রজেক্ট তৈরি: রাইট সাইডে "প্রজেক্ট" ট্যাবে ➕ বাটনে ক্লিক করুন
• টুডু যোগ করুন: প্রতিটি প্রজেক্টে টুডু আইটেম যোগ করুন
• প্রগ্রেস ট্র্যাক: প্রজেক্ট কার্ডে সম্পূর্ণতার প্রগ্রেস বার দেখুন
• টুডু সম্পাদনা: টুডু আইটেম সম্পাদনা, মুছে ফেলা এবং পুনঃসাজানো
• প্রজেক্ট সম্পাদনা: প্রজেক্টের নাম, বর্ণনা এবং রঙ পরিবর্তন করুন

mclx-home-ui-for-browser/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── layout.tsx         # Root layout
│   │   ├── page.tsx           # Home page
│   │   ├── PageClient.tsx     # Client component
│   │   ├── favicon.ico        # Favicon
│   │   └── icon.png           # App icon
│   ├── components/            # React components
│   │   ├── Home/              # Home page components
│   │   │   ├── ClockZone/     # Digital clock
│   │   │   └── TabsZone/      # Shortcuts management
│   │   │       ├── TabsListDisplay.tsx
│   │   │       ├── EditTabDialog.tsx
│   │   │       └── ShortcutDialog.tsx
│   │   ├── Projects/          # Project management
│   │   │   ├── index.tsx      # Main projects component
│   │   │   ├── ProjectCard.tsx
│   │   │   ├── TodoList.tsx
│   │   │   ├── AddProjectDialog.tsx
│   │   │   ├── EditProjectDialog.tsx
│   │   │   └── AddTodoInput.tsx
│   │   ├── SettingsMenu/      # Settings and dialogs
│   │   │   ├── index.tsx
│   │   │   ├── BackgroundImageDialog.tsx
│   │   │   ├── ClockPositionDialog.tsx
│   │   │   └── ResetDialog.tsx
│   │   ├── Notepad/           # Right sidebar notepad
│   │   └── WelcomeDialog/     # First-time user dialog
│   ├── store/                 # Zustand stores
│   │   ├── settingsStore.ts   # App settings
│   │   ├── tabsStore.ts       # Shortcuts management
│   │   ├── notepadStore.ts    # Notepad content
│   │   └── projectStore.ts    # Project management
│   ├── lib/                   # Utilities
│   │   ├── tabPresets.ts      # Predefined shortcuts
│   │   └── mediaStorage.ts    # IndexedDB storage
│   ├── hooks/                 # Custom hooks
│   │   ├── useKeyboardShortcuts.ts
│   │   └── useMediaUrl.ts
│   ├── constants/             # Constants
│   │   └── languages.ts       # Translation system
│   └── components/ui/         # shadcn/ui components
├── .github/workflows/         # GitHub Actions
│   └── build-check.yml        # Build and deploy workflow
└── public/                    # Static assets

• কাস্টম শর্টকাট: প্রতিটি ট্যাবের জন্য অনন্য কীবোর্ড শর্টকাট
• গ্লোবাল লিসেনার: যেকোনো জায়গা থেকে শর্টকাট ব্যবহার করুন
• ইউনিকনেস ভ্যালিডেশন: একই শর্টকাট দুবার ব্যবহার করা যাবে না
• নতুন উইন্ডো অপশন: শর্টকাট নতুন উইন্ডোতে বা একই ট্যাবে খুলুন

• বাংলা এবং ইংরেজি: সম্পূর্ণ ওয়েবসাইটের জন্য ভাষা টগল
• রিয়েল-টাইম পরিবর্তন: ভাষা পরিবর্তন করলে সাথে সাথে সব জায়গায় প্রয়োগ
• কনস্ট্যান্ট সিস্টেম: সহজে নতুন ভাষা যোগ করার জন্য

• প্রজেক্ট তৈরি: রঙ, নাম এবং বর্ণনা সহ প্রজেক্ট তৈরি
• টুডু সিস্টেম: অগ্রাধিকার, ক্যাটাগরি, তারিখ এবং বর্ণনা সহ টুডু
• প্রগ্রেস ট্র্যাকিং: প্রতিটি প্রজেক্টের সম্পূর্ণতা দেখুন
• ড্র্যাগ অ্যান্ড ড্রপ: টুডু আইটেম পুনঃসাজান

• ইন্ডেক্সডিবি: ৫০MB পর্যন্ত বড় ফাইল স্টোর
• লোকালস্টোরেজ: ছোট ডেটার জন্য দ্রুত অ্যাক্সেস
• অটো ফ্যালব্যাক: ইন্ডেক্সডিবি ব্যর্থ হলে লোকালস্টোরেজ ব্যবহার

• ক্লক পজিশনিং: ৩টি ভিন্ন পজিশনে ক্লক রাখুন
• মিডিয়া ব্যাকগ্রাউন্ড: ইমেজ এবং ভিডিও ব্যাকগ্রাউন্ড
• রিসেট ফিচার: সব ডেটা একসাথে রিসেট করুন

// src/store/settingsStore.ts
const useSettingsStore = create<SettingsState>()(
  persist(
    (set) => ({
      theme: "system", // "light" | "dark" | "system"
      language: "bn", // "en" | "bn"
      clockPosition: "top-left", // "top-left" | "top-center" | "top-right"
      // ... other settings
    })
  )
);

// src/lib/tabPresets.ts
export const customTabs = [
  { title: "আপনার সাইট", url: "https://example.com" },
  // ... more tabs
];

// src/constants/languages.ts
export const translations = {
  en: { /* English translations */ },
  bn: { /* Bengali translations */ },
  // Add new language here
  es: { /* Spanish translations */ }
};

আমরা ��পনার অবদানকে স্বাগত জানাই! অনুগ্রহ করে:

1. এই রিপোকে ফর্ক করুন
2. একটি নতুন ব্রাঞ্চ তৈরি করুন (git checkout -b feature/amazing-feature)
3. আপনার পরিবর্তন কমিট করুন (git commit -m 'Add amazing feature')
4. ব্রাঞ্চে পুশ করুন (git push origin feature/amazing-feature)
5. একটি Pull Request খুলুন

এই প্রজেক্ট MIT লাইসেন্সের অধীনে লাইসেন্সপ্রাপ্ত। বিস্তারিত জানতে LICENSE ফাইল দেখুন।

• Next.js - React framework
• Tailwind CSS - CSS framework
• shadcn/ui - UI components
• Zustand - State management
• Lucide - Icons

• GitHub: @mozaddedalfeshani
• Email: developer.mozadded@gmail.com
• Website: imurad.pages.dev

⭐ এই প্রজেক্টটি যদি আপনার ভালো লাগে, তাহলে একটি স্টার দিন! ⭐

Made with ❤️ in Bangladesh