Development of Admin main page and Student page

[shivang-16]

Task: Complete the assigned work before the deadline.

Details:

• Deadline: March 7, 2025
• Setup Instructions: Follow the steps outlined in the README.md file.
• Figam: - https://www.figma.com/design/hmR1l7d7hS49GSbHsz6bgi/Leadlly-Assignment?node-id=1-531&p=f&t=7AqJQjjomcIYiCCo-0
• Contact: - For any query mail here: shivang.yadav@leadlly.in
• Reference Repo - You can take help and reference for code structure and design from this repo - leadlly.student.web
• Note - The design must be pixel-perfect and fully responsive across all screen sizes for consideration.

Project Structure Overview

The project follows a structured approach with two main route groups:

• (auth): Authentication related pages
• (root): Main application pages including dashboard and all pages

Requirements

1. Dashboard Page Implementation

• URL: /
• Design Reference: Figma Dashboard Link
• Flow - On clicking View students button on dashboard page it should go to /batches route

2. Batches Page

• URL: /batches
• Design Reference: Figma Batch Students Link
• Flow - On clicking View students button on dashboard page it should go to /[batchId]/students route

3. Batch Students Page

• URL: /[batchId]/students
• Design Reference: Figma Student Detail Link

Technical Requirements

Component Structure

• Create reusable components in appropriate folders
• Follow the component structure from [leadlly.student.web](https://github.com/Leadlly/leadlly.student.web)
• Implement proper TypeScript types
• Use shadcn UI components

Code Organization

• Maintain clean folder structure:

  src/
    app/
      (root)/
        (dashboard)/page.tsx  #this is the / route
        batches/
         [batchId]/
           students/
             [studentId]/
  

• Implement proper error handling
• Add loading states
• Implement proper data fetching patterns

Best Practices

1. Use TypeScript strictly
2. Implement proper error boundaries
3. Add loading states for async operations
4. Follow Next.js 14 best practices
5. Implement proper SEO optimization
6. Write clean, documented code
7. Use proper naming conventions
8. Implement proper state management

Bonus Tasks

Implement Backend APIs

• Repository: leadlly.admin.api
• Create endpoints for:
  • List Batches
  • List Students of bacthes
• Implement proper apis in the above repo

References

• shadcn UI Documentation
• Next.js Documentation
• leadlly.student.web repository for code structure
• Figma - https://www.figma.com/design/hmR1l7d7hS49GSbHsz6bgi/Leadlly-Assignment?node-id=1-531&p=f&t=7AqJQjjomcIYiCCo-0

Acceptance Criteria

1. All pages implemented according to design
2. Responsive design
3. Type-safe implementation
4. Clean code structure
5. Proper error handling

Additional Notes

• Follow the existing codebase patterns
• Maintain consistent code style
• Write meaningful commit messages

Submission Guidelines:

• Create a Pull Request (PR) with your implementation.
• Attach a video or images showcasing the design you have built, including its responsiveness across all screen sizes (Mandatory).
• Include your Name, Email, and LinkedIn in the PR description.
• If you have completed the Bonus Task, mention "(Bonus Included)" in the PR title and Put the link of API Pr created in leadlly.admin.api.