Nextjs-User-Login Tailwind Templates

Nextjs User Login

This is a Next.js component designed for creating a user signup form. It includes fields for username, email, phone number, and password. The component handles user input validation, enabling the signup button when all required fields are filled. And the technologies are using React.js, Next.js , Axios, Tailwind

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Description

Project Title: User Authentication Pages

This GitHub repository contains two important components for user authentication in a web application – the Signup Page and the Login Page. These pages are developed using modern web technologies and provide robust user authentication functionalities, including input validation and dynamic button states.

Features:

Signup Page:

Users can sign up by providing their username, email, phone number, and password.

Input validation ensures that all fields are correctly filled.

The Signup button is dynamically enabled or disabled based on the input.

Successful signups are communicated to the user, and they are redirected to the login page.

Login Page:

Existing users can log in using their email and password.

Input validation is implemented to ensure the required fields are not empty.

The Login button's state is updated dynamically.

Successful logins trigger a success message and a redirection to the user's profile page.

Technologies Used:

Front-end: React, Next.js

Styling: Tailwind CSS

Back-end: Node.js, Express.js

Database: MongoDB

HTTP Requests: Axios

Notifications: React Hot Toast

Usage:

Clone the repository.

Navigate to the SignupPage or LoginPage directory.

Run npm install to install dependencies.

Start the development server using npm run dev.

Contributing:

Contributions are welcome! Please follow these steps:

Fork the repository.

Create a new branch.

Make your changes.

Test your changes.

Submit a pull request.

License:

This project is open-source and available under the MIT License.

Feel free to customize the description and README to your preferences. This provides an overview of your repository and instructions on how to use and contribute to it.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Top categories

Loading Svelte Themes