bilalmk__todo_correct

mirror of https://github.com/bilalmk/todo_correct.git synced 2026-09-19 06:05:23 +08:00

Files

T

History

Bilal Muhammad Khan 18a3ee83c1 feat(frontend): implement complete design system with shadcn/ui components

Implement comprehensive frontend design system for Phase II web application:

- Add shadcn/ui component library (button, input, card, dialog, form, etc.)
- Refactor auth pages (login/register) with new design system
- Update dashboard with modern UI components
- Implement TypeScript schemas for tasks, tags, filters, and users
- Add authentication and dashboard-specific components
- Create comprehensive documentation (accessibility, performance, validation)
- Configure Tailwind with custom theme and animations
- Add context providers for state management

This establishes the complete UI foundation required for the hackathon Phase II deliverable.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

2026-01-01 12:43:06 +05:00

LICENSE

feat(frontend): implement complete design system with shadcn/ui components

2026-01-01 12:43:06 +05:00

package.json

feat(frontend): implement complete design system with shadcn/ui components

2026-01-01 12:43:06 +05:00

README.md

feat(frontend): implement complete design system with shadcn/ui components

2026-01-01 12:43:06 +05:00

README.md

Get started | API | Form Builder | FAQs | Examples

Features

Built with performance, UX and DX in mind
Embraces native HTML form validation
Out of the box integration with UI libraries
Small size and no dependencies
Support Yup, Zod, AJV, Superstruct, Joi and others

Install

npm install react-hook-form

Quickstart

import { useForm } from 'react-hook-form';

function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register('firstName')} />
      <input {...register('lastName', { required: true })} />
      {errors.lastName && <p>Last name is required.</p>}
      <input {...register('age', { pattern: /\d+/ })} />
      {errors.age && <p>Please enter number for age.</p>}
      <input type="submit" />
    </form>
  );
}