🔐 React Login Page — Vite + React 19

This project is a modern Login Page UI built with React 19 and Vite 7, developed as a job assignment. It features a clean UI, modular component structure, ESLint integration, and optimized development environment with Hot Module Replacement (HMR).

---

🖥️ Preview

---

📁 Project Structure

login-page/
├── Slides-photos/                 # Screenshots for demo/documentation
│   └── \*.png                      # UI preview images
├── public/                        # Public assets
│   └── vite.svg                   # Favicon
├── src/                           # Main application source
│   ├── main.jsx                   # Entry point
│   └── App.jsx                    # Main App component (Login form lives here)
├── .gitignore
├── index.html                     # Root HTML
├── README.md
├── eslint.config.js              # ESLint rules and setup
├── vite.config.js                # Vite dev server configuration
├── package.json
├── package-lock.json

---

⚙️ Tech Stack

Tool / Library	Description
React 19	Core library for building UI
Vite 7	Fast dev server and build tool
ESLint	Code linting (with React Hooks and React Refresh plugins)
@vitejs/plugin-react	Enables React Fast Refresh and JSX support
Globals	Shared global variables for linting browser environments
JSX	Modern syntax for building components
ECMAScript Modules	Modular code with import/export

---

🚀 Features

• ✅ Clean Login Form UI
• ✅ React 19 JSX transform
• ✅ Hot Module Replacement (HMR)
• ✅ Modern ESLint rules for better code quality
• ✅ Responsive and modular structure
• ✅ Folder for screenshots (Slides-photos) for demo presentation

---

🛠️ Getting Started

Prerequisites

• Node.js (v18+ recommended)
• npm or yarn

Install & Run

# Clone this repository
git clone https://github.com/Nikhilks2002/User-Authentication.git
cd login-page

# Install dependencies
npm install

# Start development server
npm run dev

Now visit: http://localhost:5173

⚠️ Note: This layout is currently designed and optimized for desktop/laptop screens only. It is not mobile responsive.

---

🧪 Scripts

Script	Description
npm run dev	Start Vite dev server
npm run build	Build production version in /dist
npm run preview	Preview production build locally
npm run lint	Run ESLint checks

---

✅ ESLint Setup

The project includes a custom ESLint setup via eslint.config.js, extending:

• @eslint/js (recommended rules)
• eslint-plugin-react-hooks
• eslint-plugin-react-refresh (for Vite HMR)
• Ignores dist/ folder
• Custom no-unused-vars rule to ignore capitalized constants

Run lint check:

npm run lint

---

📦 Build for Production

npm run build

🌐 Live Demo

You can view the deployed login page on Netlify here:

🔗 https://68a87484bff9d40a4984bde3--user-autihication-page-react.netlify.app

npm run preview

---

🙋‍♂️ Author Nikhil Kumar Singh

🔗 GitHub 📧 Email ID

📄 License

This project is licensed under the ISC License.

---