https://github.com/sabha-mushtaq/userpage-react
A responsive login/sign-up form using React, Tailwind CSS, and Vite. Features dynamic toggling, additional sign-up fields, and a clean, mobile-friendly design.
https://github.com/sabha-mushtaq/userpage-react
conditional-rendering react usestate-hook
Last synced: 4 months ago
JSON representation
A responsive login/sign-up form using React, Tailwind CSS, and Vite. Features dynamic toggling, additional sign-up fields, and a clean, mobile-friendly design.
- Host: GitHub
- URL: https://github.com/sabha-mushtaq/userpage-react
- Owner: sabha-mushtaq
- Created: 2025-01-06T11:05:47.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-01-06T11:30:09.000Z (6 months ago)
- Last Synced: 2025-01-06T12:27:02.151Z (6 months ago)
- Topics: conditional-rendering, react, usestate-hook
- Language: JavaScript
- Homepage: https://userpage-react.onrender.com
- Size: 179 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
https://github.com/user-attachments/assets/b7a32911-9154-43a5-9169-e060dfd5a183
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
- Responsive Login & Sign-Up Form
This project is a responsive login and sign-up form built using React, Tailwind CSS, and Vite. The application features conditional rendering to toggle between login and sign-up forms, making it dynamic and user-friendly. The design emphasizes simplicity, responsiveness, and accessibility, ensuring optimal user experience across devices.
Features
## Responsive Design:
Fully adaptable to different screen sizes with consistent styling using Tailwind CSS utility classes.
## Login and Sign-Up Forms:
Users can toggle between the login and sign-up forms using a simple and intuitive interface.
## Dynamic Input Fields:
The sign-up form dynamically includes additional fields for "Full Name" and "Bio."
## Interactive UI:
"Sign Up" button styled as a blue rectangle with hover effects.
Clean and minimal layout with modern aesthetics.
## Conditional Rendering:
Implemented using React's useState hook to switch between login and sign-up views seamlessly.
## Technologies Used
React: For creating the interactive and reusable components.
Tailwind CSS: For efficient, utility-first styling.
Vite: For fast development and build optimization.
## Project Structure
src Folder: Contains all the source files for the project, including components and assets.
assets/inst.png: Logo used in the form.
components/Container.js: Main component for the login and sign-up form.
styles/maindiv.css: Tailwind CSS-based styling for the form.
Public Folder: Hosts static files.
## Setup Instructions
Clone the Repository
bash
Copy code
git clone https://github.com/sabha-mushtaq/userpage-react
cd
Install Dependencies
bash
Copy code
npm install
Run the Application
bash
Copy code
npm run dev
This will start the development server, and you can view the app in your browser at http://localhost:5174/