{"id":24803049,"url":"https://github.com/camilopinzon/login-form-validation","last_synced_at":"2026-04-28T12:37:28.416Z","repository":{"id":274752693,"uuid":"851401014","full_name":"CamiloPinzon/login-form-validation","owner":"CamiloPinzon","description":"Learn to manage form state, handle validation, and give proper feedback to users.","archived":false,"fork":false,"pushed_at":"2025-01-29T06:16:35.000Z","size":38,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-04T10:36:28.246Z","etag":null,"topics":["atomic-design","form","reactjs","typescript","validation"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CamiloPinzon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-03T03:04:57.000Z","updated_at":"2025-01-29T06:16:38.000Z","dependencies_parsed_at":"2025-01-29T07:22:13.684Z","dependency_job_id":"bb706333-5e6a-4e20-99b6-cabca243928f","html_url":"https://github.com/CamiloPinzon/login-form-validation","commit_stats":null,"previous_names":["camilopinzon/login-form-validation"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CamiloPinzon/login-form-validation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CamiloPinzon%2Flogin-form-validation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CamiloPinzon%2Flogin-form-validation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CamiloPinzon%2Flogin-form-validation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CamiloPinzon%2Flogin-form-validation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CamiloPinzon","download_url":"https://codeload.github.com/CamiloPinzon/login-form-validation/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CamiloPinzon%2Flogin-form-validation/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263250602,"owners_count":23437288,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["atomic-design","form","reactjs","typescript","validation"],"created_at":"2025-01-30T05:17:11.708Z","updated_at":"2026-04-28T12:37:23.397Z","avatar_url":"https://github.com/CamiloPinzon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Login Form Application\n\nThis project is a simple login form built using Vite, React, and TypeScript, following the Atomic Design methodology. The form includes basic validation to ensure that the email and password fields are filled in correctly before submission.\n\n## Table of Contents\n\n- [Project Structure](#project-structure)\n- [Installation](#installation)\n- [Running the Application](#running-the-application)\n- [Components](#components)\n  - [Atoms](#atoms)\n  - [Molecules](#molecules)\n  - [Organisms](#organisms)\n  - [Templates](#templates)\n  - [Pages](#pages)\n- [Form Validation](#form-validation)\n- [Best Practices](#best-practices)\n\n## Project Structure\n\nThe project follows the Atomic Design methodology, splitting components into atoms, molecules, organisms, templates, and pages for better reusability and maintainability.\n\n```\nsrc/\n├── assets/\n├── components/\n│   ├── atoms/\n│   │   ├── button.tsx\n│   │   ├── input.tsx\n│   │   └── label.tsx\n│   ├── molecules/\n│   │   └── formField.tsx\n│   ├── organisms/\n│   │   └── loginForm.tsx\n│   └── templates/\n│       └── loginTemplate.tsx\n├── interfaces/\n│   ├── button.ts\n│   ├── errors.ts\n│   ├── formField.ts\n│   ├── input.ts\n│   ├── label.ts\n├── App.tsx\n└── main.tsx\n```\n\n## Installation\n\nTo get started, clone the repository and install the necessary dependencies:\n\n```bash\ngit clone https://github.com/your-username/login-form-app.git\ncd login-form-app\nnpm install\n```\n\n## Running the Application\n\nTo run the application locally, use the following command:\n\n```bash\nnpm run dev\n```\n\nThis will start the Vite development server. Open your browser and navigate to `http://localhost:5173` to see the application.\n\n## Components\n\n### Atoms\n\n- **Button**: A simple button component that handles click events.\n- **Input**: A controlled input component for text, email, and password fields.\n- **Label**: A label component for form fields.\n\n### Molecules\n\n- **FormField**: A combination of `Label` and `Input` components, along with error handling.\n\n### Organisms\n\n- **LoginForm**: The main login form component that handles form submission and validation.\n\n### Templates\n\n- **LoginTemplate**: A template component that wraps the login form with a heading.\n\n## Form Validation\n\nThe login form includes basic validation:\n\n- **Email**: The email field must be filled in with a valid email format.\n- **Password**: The password field must not be empty.\n\nThe validation logic is implemented in the `LoginForm` component. If any validation fails, the form displays error messages and prevents submission.\n\n## Best Practices\n\nThis project follows several best practices:\n\n- **Atomic Design**: Components are organized by their level of complexity and reusability.\n- **TypeScript**: Strong typing is used to catch errors early and improve code maintainability.\n- **Separation of Concerns**: Validation logic is kept within the form component, and state management is handled using React's `useState` hook.\n- **Controlled Components**: The form fields are controlled components, meaning their state is managed by React, allowing for easier validation and manipulation.\n\n## License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcamilopinzon%2Flogin-form-validation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcamilopinzon%2Flogin-form-validation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcamilopinzon%2Flogin-form-validation/lists"}