Create Login/Signup Page

[BhattAnsh]

Description

We need a responsive and user-friendly Login/Signup page for our project. This will serve as the interface for users to register and log in to access personalized features.

Requirements
• Login Form:
• Fields: Email, Password
• Submit button to authenticate users via the backend API.
• Signup Form:
• Fields: Name, Email, Password, Confirm Password
• Submit button to register new users via the backend API.
• Validation:
• Frontend form validation for all fields.
• Display error messages for invalid inputs (e.g., “Email is required”).
• UI/UX:
• Modern and clean design.
• Responsive for mobile and desktop devices.
• Integration:
• Connect the form to API endpoints (to be provided by the backend team).

Tech Stack
• Framework: React/Next.js
• Styling: TailwindCSS, ShadCn, Aceternity or MagicUI.

Contribution Guidelines
1. Fork the repository
2. Implement the feature and test it thoroughly.
3. Submit a pull request with a description of your work.

Resources
• API endpoints: will be provided when the backend is created
• Design reference:

[srujanGowda08]

Can i work this issue under SWOC?

[srujanGowda08]

Issue with Cloning the Repository

Hi @BhattAnsh ,

I encountered an issue while cloning the project repository. It seems there’s a problem with the file path frontend/env.example . Specifically, there appears to be a trailing space at the end of the file name, which is causing the following error:

error: invalid path 'frontend/env.example '
fatal: unable to checkout working tree
warning: Clone succeeded, but checkout failed.
Trailing spaces in file names are not supported on certain operating systems like Windows, which makes it impossible to clone the repository successfully.

Could you please rename the file to remove the trailing space? For example, it could be renamed to frontend/env.example.

[srujanGowda08]

i will work on create login/signup page
Please assign me in under SWOC

[Wahid7852]

@srujanGowda08 You can only be assigned to one issue at a time
Please let me know your approach for working on this issue. Once done, you'll be assigned here
also, if assigned you can fix the trailing space issue for the project to run on windows

[lokesh-22]

Can i work on login and signup page

[Wahid7852]

@lokesh-22 whats your approach

[lokesh-22]

Here’s my approach to building the Login and Signup page for our project.

First, I’ll use React or Next.js as the framework to develop the page. For styling, I plan to use TailwindCSS for flexibility and modern design, possibly incorporating prebuilt components from ShadCn or MagicUI for a clean and professional look. The goal is to create a UI that is both intuitive and visually appealing while ensuring responsiveness across all device sizes—mobile, tablet, and desktop.

For the Login Form, I’ll include fields for Email and Password, along with a submit button that will authenticate users through the backend API. Similarly, for the Signup Form, I’ll have fields for Name, Email, Password, and Confirm Password. The password fields will include validation to ensure they match. I’ll implement client-side validation using libraries like react-hook-form or basic React state management to provide instant feedback for users. For example, fields like email will show errors if the input is invalid, and all fields will be marked as required.

When it comes to API integration, I’ll connect the forms to the backend endpoints—one for login and one for registration. For error handling, I’ll ensure that users get clear messages in case of issues, such as incorrect credentials during login or duplicate emails during signup. Additionally, I’ll ensure the frontend communicates securely with the backend using HTTPS and token-based authentication like JWT.

From a workflow perspective, I’ll fork the repository, create a new branch, and implement the feature. Once it’s ready, I’ll test it thoroughly for form validation, responsiveness, and API connectivity. After testing, I’ll submit a pull request with a detailed description of the work and screenshots of the completed forms to make the review process smoother.

This approach ensures that the Login/Signup page is user-friendly, visually modern, secure, and seamlessly integrates with the backend APIs.

[Wahid7852]

1. Avoid using GPT for writing approach
2. The approach seems fine

i will assign u, sure

[lokesh-22]

@Wahid7852 yeah! I will ensure not using gpt next time .

[lokesh-22]

@Wahid7852 There is an issue while cloning into repo.

error: invalid path 'frontend/env.example '
fatal: unable to checkout working tree
warning: Clone succeeded, but checkout failed

can you please fix this.

[techy4shri]

@lokesh-22 done , you can update your fork and try cloning again.

[techy4shri]

@lokesh-22 update your progress on discord and here. Since this is a beginner level task, you got 1 more day. Ask your doubts, if any or any question you have on the server and we will be happy to help you!

[lokesh-22]

@lokesh-22 update your progress on discord and here. Since this is a beginner level task, you got 1 more day. Ask your doubts, if any or any question you have on the server and we will be happy to help you!

Sorry for late.I will complete it tomorrow

[techy4shri]

it's been two days now @lokesh-22
What do you say? @BhattAnsh @Wahid7852 , should we remove assignment?

[srujanGowda08]

can i do this ?
i can design this page easily!!

[srujanGowda08]

i will use reactjs for designing ui

[techy4shri]

@srujanGowda08 go ahead. @lokesh-22 I am unassigned you due to no response.

[srujanGowda08]

Thank you 😊

[srujanGowda08]

I have chosen ReactJS with Tailwind CSS for designing these pages. Is this okay?
bcz , I was good at this!!

[techy4shri]

Yes sure, go ahead. Do explain your approach in detail on discord.

[techy4shri]

@NOOB-3301 @srujanGowda08 keep any conversation unrelated to this project to discord, that would be the apropriate place to discuss this. Do not reply to this comment.

[techy4shri]

@srujanGowda08 I am expecting update regarding this issue by tomorrow.

[NOOB-3301]

@NOOB-3301 @srujanGowda08 keep any conversation unrelated to this project to discord.

i am really really sorry for the inconvenience i caused.

[Wahid7852]

will be unassigning @srujanGowda08 if no update in <24 hours.

[srujanGowda08]

I have unsigned for this issue, sorry due to my academic exam I can't contribute,
Please assign my points for first login signup endpoints