Develop Login and Landing Pages for AutoGrader App

[parthasarathydNU]

Overview

This issue aims to develop the initial user interface components of the AutoGrader app, specifically focusing on the login page and the landing page after login. The objective is to ensure a smooth user entry point into the app, followed by an informative landing page that previews upcoming features.

Objectives

• Login Page: Create a secure and user-friendly login interface that allows users to access the app.
• Landing Page: Design a welcoming landing page that introduces the main features of the app, marking them as "Coming Soon" to build anticipation and inform users of what to expect.

Technical Stack

• Framework: Utilize Next.js for building the pages to ensure fast, server-side rendered applications.
• Styling: Implement styling with TailwindCSS for modern, responsive design.
• Authentication: Integrate secure authentication mechanisms for user login.

Features to Implement

1. Login Page:

   • User authentication fields (email and password).
   • Links to password recovery and sign-up page for new users.
   • Security features like CAPTCHA to prevent automated abuse.

2. Landing Page:

   • Overview of the app’s core features such as Assignment Creation, Rubric Generation, and Persona Management.
   • Each feature should be listed with a "Coming Soon" tag to set user expectations.
   • Design elements that are visually appealing and aligned with the app’s branding.

Tasks

• Setup Authentication Service: Configure the backend authentication service to manage user logins securely.
• Design UI: Create the layout and design for both login and landing pages using TailwindCSS.
• Implement Frontend Logic: Develop the frontend functionality for handling user authentication and displaying the landing page.
• Initial Testing: Ensure that the login process is secure and that the landing page displays correctly across different devices and browsers.

Contribution Guidelines

• Getting Involved: If you are interested in working on this issue, please assign it to yourself.
• Development Process: Clone the repository, checkout to a new branch named feature/login-landing-pages, and begin your work.
• Submitting Changes: Once development is complete, submit a pull request against the develop branch for review.

Questions and Feedback

• Engagement: For any queries or feedback regarding the implementation, please comment below and tag @project-maintainer to get the necessary guidance or clarification.

[parthasarathydNU]

For the first iteration It would be a good start if we just get the landing page up live. The project is deployed and live on https://autograder.dev.

A good first start would be to just have the first landing page consist of the various features of the app and then we can implement login as the next step.

[deepika-sundaram]

@parthasarathydNU i have worked on this feature and initial design will look like below

added you to the figma which i created just now

[parthasarathydNU]

@deepika-sundaram - can you paste the figma link here and make it publicly viewable but only editable by people who have access ?