ShadCn

⌘K
  2. Home
  4. ShadCn
  6. Phase 1
  8. Step 4: Project Folder Structure তৈরি

Step 4: Project Folder Structure তৈরি

কেন organized structure দরকার?

  • বড় project এ file খুঁজে পাওয়া সহজ
  • Team এ কাজ করলে সবাই বুঝতে পারে
  • Scalable – পরে feature add করা সহজ

Step 1: Folders তৈরি করো

src/ folder এর ভিতরে এই folders তৈরি করো:

mkdir -p src/components/ui
mkdir -p src/components/layout
mkdir -p src/components/students
mkdir -p src/components/dashboard
mkdir -p src/pages
mkdir -p src/hooks
mkdir -p src/types
mkdir -p src/data

অথবা manually তৈরি করো।

📁 Final Structure এমন হবে:

src/
├── components/
│   ├── ui/           # shadcn components থাকবে
│   ├── layout/       # Sidebar, Header, Footer
│   ├── students/     # Student related components
│   └── dashboard/    # Dashboard widgets
├── pages/            # Full page components
├── hooks/            # Custom React hooks
├── types/            # TypeScript types/interfaces
├── data/             # Mock data (পরে API হবে)
├── lib/
│   └── utils.ts      # shadcn এটা তৈরি করেছে
├── App.tsx
├── main.tsx
└── index.css

Step 2: Basic types file তৈরি করো

src/types/student.ts file তৈরি করো:

export interface Student {
  id: string
  name: string
  email: string
  phone: string
  class: string
  section: string
  rollNumber: string
  dateOfBirth: string
  address: string
  guardianName: string
  guardianPhone: string
  status: 'active' | 'inactive'
  createdAt: string
}

Step 3: Mock data তৈরি করো

src/data/students.ts file তৈরি করো:

import type { Student } from '@/types/student'

export const students: Student[] = [
  {
    id: '1',
    name: 'রহিম উদ্দিন',
    email: 'rahim@example.com',
    phone: '01712345678',
    class: '10',
    section: 'A',
    rollNumber: '101',
    dateOfBirth: '2008-05-15',
    address: 'ঢাকা, বাংলাদেশ',
    guardianName: 'করিম উদ্দিন',
    guardianPhone: '01812345678',
    status: 'active',
    createdAt: '2024-01-15'
  },
  {
    id: '2',
    name: 'ফাতেমা খাতুন',
    email: 'fatema@example.com',
    phone: '01612345678',
    class: '10',
    section: 'A',
    rollNumber: '102',
    dateOfBirth: '2008-08-20',
    address: 'চট্টগ্রাম, বাংলাদেশ',
    guardianName: 'আব্দুল হক',
    guardianPhone: '01912345678',
    status: 'active',
    createdAt: '2024-01-16'
  }
]

Step 4: App.tsx update করো test করতে

import { students } from '@/data/students'

function App() {
  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <h1 className="text-3xl font-bold text-gray-800 mb-6">
        Student Management System
      </h1>
      <p className="text-gray-600">
        Total Students: {students.length}
      </p>
    </div>
  )
}

export default App

Server চালাও এবং দেখো “Total Students: 2” দেখাচ্ছে কিনা।

How can we help?