Team Black : Better Together

[yogeshtakeo]

Title: Implementing Login and Registration Functionality with React, Vite, HTML, Tailwind CSS, and TypeScript

Task Leader : Sandesh Shrestha

Objective: The objective of this task is to implement the frontend part of the login and registration functionality using React, Vite, HTML, Tailwind CSS, and TypeScript. The students will work collaboratively to create a seamless user experience and leverage the benefits of these modern technologies.

Task Description

1. Set up Project:

   • Create a new React project using Vite.
   • Configure TypeScript support in the project.
   • Install and set up Tailwind CSS for styling.

2. UI/UX Design Implementation:

   • Translate the UI/UX design for the login and registration pages into React components.
   • Use JSX and HTML to structure the login and registration forms.
   • Apply Tailwind CSS classes to style the components and achieve the desired visual appearance.

3. Form Validation:

   • Implement form validation logic using TypeScript.
   • Validate user inputs for required fields, email formats, password strength, etc.
   • Display appropriate error messages for invalid submissions.

4. Client-Side Functionality:

   • Handle form submissions and user interactions using React event handling.
   • Implement client-side validation before submitting the form.
   • Add necessary logic for navigating between the login and registration pages.

5. Error Handling:

   • Implement error handling for invalid form submissions.
   • Display user-friendly and informative error messages.
   • Update the UI to provide feedback and guide the user in resolving errors.
   • Using Toasts will be better.

6. Testing and Debugging:

   • Perform thorough testing to ensure the login and registration forms work as expected.
   • Test various scenarios, including valid submissions, invalid submissions, and error handling.
   • Use debugging tools to identify and fix any issues or bugs encountered.

7. Accessibility Optimization:

   • Ensure the login and registration forms adhere to accessibility guidelines.
   • Implement appropriate ARIA attributes, form labels, and other accessibility features.

Collaboration from the team.

Team leader should encourage collaboration and regular communication between team members. Use version control (e.g., Git) to manage codebase changes. Divide the implementation tasks among team members based on their expertise and provide opportunities for code reviews and feedback.

[Jharanatmg]

Jharana Github url- https://github.com/yogeshtakeo/team-black.git

[ashmaupret100]

Name: Ashma Upreti GitHub Link: https://github.com/yogeshtakeo/team-black.git

[babisha]

NAME: Babisha Manandhar GITHUB URL: https://github.com/yogeshtakeo/team-black.git

[sandessth]

Name: Sandesh Shrestha Git: https://github.com/yogeshtakeo/team-black/tree/Sandesh