একটি সুন্দর, কাস্টমাইজযোগ্য এবং দ্রুতগতির ব্যক্তিগত হোমপেজ যা আপনার সবচেয়ে প্রিয় ওয়েবসাইটগুলোর দ্রুত অ্যাক্সেস প্রদান করে।
💡 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 পর্যন্ত) স্টোর করার জন্য
| Feature | Basic Home UI | MCLX Home UI for Browser |
|---|---|---|
| Setup | Default Next.js | ✅ Custom architecture |
| Customization | None | ✅ Complete theme & UI control |
| State Management | None | ✅ Zustand with persistence |
| Clock | None | ✅ Customizable digital clock with positioning |
| Shortcuts | None | ✅ Smart management with keyboard shortcuts |
| Settings | None | ✅ Comprehensive settings panel |
| Notepad | None | ✅ Auto-saving notepad + Project management |
| Projects & Todos | None | ✅ Full project management with progress tracking |
| Keyboard Shortcuts | None | ✅ Custom global keyboard shortcuts |
| Language Support | None | ✅ Bengali & English localization |
| File Storage | None | ✅ IndexedDB for large files (50MB) |
| Background Media | None | ✅ Image/Video background support |
| Reset Function | None | ✅ Complete data reset option |
| Welcome Flow | None | ✅ Profile-based onboarding |
| Loading States | None | ✅ Skeleton screens |
| TypeScript | Basic | ✅ Full type safety |
| CI/CD | None | ✅ GitHub Actions with artifacts |
| Documentation | Basic | ✅ Comprehensive Bengali README |
- 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
- রিপোজিটরি ক্লোন করুন
git clone https://github.com/mozaddedalfeshani/mclx-home-ui-for-browser.git
cd mclx-home-ui-for-browser- Bun ইনস্টল করুন (প্রস্তাবিত)
curl -fsSL https://bun.sh/install | bash- ডিপেন্ডেন্সি ইনস্টল করুন
bun install
# অথবা
npm install
# অথবা
yarn install- ডেভেলপমেন্ট সার্ভার চালু করুন
bun run dev
# অথবা
npm run dev
# অথবা
yarn dev- ব্রাউজারে খুলুন
http://localhost:3000
bun run build
bun run start
# অথবা
npm run build
npm start- প্রোফাইল নির্বাচন করুন: ডেভেলপার, গেমার বা সাধারণ
- প্রি-ডিফাইন্ড শর্টকাট: আপনার প্রোফাইলের জন্য প্রস্তুত শর্টকাট পাবেন
- কাস্টমাইজ করুন: সেটিংস থেকে সব কিছু পছন্দমতো সাজান
⚙️ নিচের ডান কোণে গিয়ার আইকনে ক্লিক করুন
- থিম: লাইট/ডার্ক/সিস্টেম
- ভাষা: বাংলা/ইংরেজি (সমগ্র ওয়েবসাইট)
- অটো অর্ডার ট্যাব: সবচেয়ে বেশি দেখা সাইট প্রথমে
- ক্লক দেখান: ডিজিটাল ক্লক চালু/বন্ধ
- ক্লক পজিশন: টপ-লেফট, টপ-সেন্টার, টপ-রাইট
- রাইট সাইড: নোটপ্যাড প্যানেল চালু/বন্ধ
- রিসাইজ শর্টকাট: কার্ডের আকার এবং রেডিয়াস
- ব্যাকগ্রাউন্ড ইমেজ: ইমেজ/ভিডিও আপলোড/রিমুভ (৫০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 */ }
};আমরা আপনার অবদানকে স্বাগত জানাই! অনুগ্রহ করে:
- এই রিপোকে ফর্ক করুন
- একটি নতুন ব্রাঞ্চ তৈরি করুন (
git checkout -b feature/amazing-feature) - আপনার পরিবর্তন কমিট করুন (
git commit -m 'Add amazing feature') - ব্রাঞ্চে পুশ করুন (
git push origin feature/amazing-feature) - একটি 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