مهدکودک آرشین — وبسایت و سامانهی ثبتنام
طراحی و توسعهی کامل وبسایت یک مهدکودک و پیشدبستانی در کرج؛ از رابط کاربری گرم و کودکانه تا یک سامانهی مدیریت محتوای اختصاصی و فرم ثبتنام آنلاین. تکنفره و سرتاسری.
معرفی
مهدکودک آرشین یک وبسایت کامل و عملیاتی برای یک مهدکودک و پیشدبستانی در جهانشهر کرج است. سایت کاملاً فارسی، راستچین (RTL) و با محوریتِ جذب و ثبتنام نوآموز طراحی شده است. این پروژه را بهصورت تکنفره و از صفر تا صد انجام دادم — از طراحی رابط کاربری و سیستم طراحی، تا توسعهی فولاستک و راهاندازی روی Vercel.
چالش
مهدکودک حضور آنلاین ساختارمندی نداشت. اطلاعات برنامهها، اخبار و تصاویر جایی برای انتشار نداشتند و خانوادهها برای ثبتنام باید بهصورت حضوری یا تلفنی اقدام میکردند. نیاز به وبسایتی بود که هم برای والدین قابلاعتماد و دلنشین باشد، هم به مدیر مجموعه اجازه دهد بدون دانش فنی، محتوای سایت را خودش مدیریت کند.
راهکار
یک وبسایت فولاستک بههمراه پنل مدیریت اختصاصی طراحی و پیادهسازی کردم:
- سامانهی مدیریت محتوای کامل (CMS): مدیر مجموعه از طریق پنل ادمین، اخبار، برنامههای آموزشی، گالری تصاویر، معرفی کادر و درخواستهای ثبتنام را مدیریت میکند — بدون نیاز به توسعهدهنده.
- فرم ثبتنام آنلاین: اعتبارسنجی با Zod، فیلد honeypot برای مقابله با اسپم، محدودسازی نرخ درخواست (rate limit)، و ثبت همزمان در دیتابیس و ارسال ایمیل اطلاعرسانی با الگوی
Promise.allSettled(ثبت در دیتابیس قطعی، خطای ایمیل غیربحرانی). - احراز هویت دستساز: نشستهای JWT با
jose(HS256) و کوکی httpOnly برای محافظت از کل بخش ادمین — بدون وابستگی به کتابخانههای سنگین احراز هویت. - پایهی سئوی محلی: دادهی ساختاریافتهی JSON-LD از نوع
LocalBusiness/Preschool، نقشهی سایت،robots.txt، فایلllms.txtبرای خزندههای هوش مصنوعی، هدرهای امنیتی و تصویر اشتراکگذاری اجتماعی (OG). - طراحی گرم و کودکانه: هدر شناور شیشهای (glassmorphism)، سیستم رنگی شاد با کنتراست استانداردِ AA، راستچینِ کامل و نمایش اعداد فارسی در سراسر سایت.
نتیجه
یک وبسایت مستقل و قابلاعتماد که خانوادهها از طریق آن با مجموعه آشنا میشوند و مستقیماً درخواست ثبتنام میفرستند، و مدیر مجموعه بدون نیاز به هیچ توسعهدهندهای محتوای آن را بهروز نگه میدارد. کل پروژه روی Vercel مستقر است و در نشانی arshinkids.com در دسترس قرار دارد.
تکنولوژیها
Next.js 16 (App Router, Turbopack) · React 19 · TypeScript · Tailwind CSS v4 · Vazirmatn (self-hosted) · Neon Postgres + Prisma 7 · JWT (jose) · Resend · Vercel Blob · Upstash · Vercel
بهدنبال پروژهای مشابه هستید؟ خدمات توسعهی وب من را ببینید یا در تماس باشید.