XStudentForm is a modern, responsive React application designed to capture student registration details with robust frontend validation. Built for efficiency and a premium user experience, it ensures data integrity through real-time feedback and custom error handling.
- Dynamic Form Handling: Real-time state management for multiple input fields.
- Robust Validation:
- Required Fields: Name, College, and Address must be filled.
- Case-Sensitive Username: Enforces lowercase-only naming conventions.
- Email Format Verification: Uses standard regex patterns to ensure valid email syntax.
- Secure Passwords: Enforces a minimum length of 8 characters.
- Custom Error UI: Replaced browser tooltips with clean, red text messages for better UX.
- Responsive Design: Fully optimized for desktop, tablet, and mobile orientations.
- Premium Aesthetics: Clean card-based layout with smooth transitions and modern typography.
- Frontend: React.js
- Build Tool: Vite
- Styling: Vanilla CSS (Modern CSS3)
- Deployment: Netlify
-
Clone the repository:
git clone https://github.com/Ayush-97techyboy/XStudentForm.git
-
Install dependencies:
npm install
-
Run the development server:
npm run dev
- Validation: Implemented using a custom JS validation engine that triggers on form submission and clears errors on input change.
- Accessibility: Semantic HTML5 elements used throughout; aria-labeling and keyboard focus states optimized for accessibility.
- SEO: Meta tags and heading hierarchy implemented for improved search visibility.
Made with 💙 in 
by Ayush