https://github.com/ayush-97techyboy/xstudentform
A responsive React Student Form by persisting its data into local storage using React & Vite
https://github.com/ayush-97techyboy/xstudentform
form-validation html5-css3-javascript npm react-hooks reactjs required-fields responsive-web-design vanilla-css vitejs
Last synced: 6 days ago
JSON representation
A responsive React Student Form by persisting its data into local storage using React & Vite
- Host: GitHub
- URL: https://github.com/ayush-97techyboy/xstudentform
- Owner: Ayush-97techyboy
- Created: 2026-04-04T17:25:14.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-04-18T21:23:42.000Z (about 2 months ago)
- Last Synced: 2026-04-18T22:23:56.744Z (about 2 months ago)
- Topics: form-validation, html5-css3-javascript, npm, react-hooks, reactjs, required-fields, responsive-web-design, vanilla-css, vitejs
- Language: JavaScript
- Homepage: https://x-studentform-validation.netlify.app/
- Size: 130 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# XStudentForm - Student Registration Application
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.
## 🚀 Live Demo
[View Live Project](https://x-studentform-validation.netlify.app/)
## ✨ Features
- **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.
## 🛠️ Tech Stack
- **Frontend**: React.js
- **Build Tool**: Vite
- **Styling**: Vanilla CSS (Modern CSS3)
- **Deployment**: Netlify
## 📦 Getting Started
1. **Clone the repository**:
```bash
git clone https://github.com/Ayush-97techyboy/XStudentForm.git
```
2. **Install dependencies**:
```bash
npm install
```
3. **Run the development server**:
```bash
npm run dev
```
## 📝 Implementation Details
- **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