Assignment: Build a Dynamic Website for Slides2Notes with Phone Number Authentication and/or Paywall Integration.

The goal of this assignment is to create a dynamic website for the Slides2Notes app that includes phone number authentication and a paywall for repeat users. To evaluate the applicants for the web development role, we will divide the assignment into multiple smaller tasks, focusing on different skill sets. This approach will help in assessing the applicants' talent and perseverance towards the project. This assignment can be tried out by people who haven’t applied to the PaperPal project as well! So feel free to take help from your peers, but don’t forget to give credit at appropriate places.

First, clone and fork our main branch from our repo on your local machine here. You can use the following command for the same:

git clone <https://github.com/Vishruth-N/Slides2Notes.git>

https://github.com/Vishruth-N/Slides2Notes.git

• In the cloned directory, install all the required dependancies using the following command on your terminal

pip install -r requirements.txt

• Next run the streamlit app locally using the following command

streamlit run app.py

• Get an idea of what exactly the app is doing. We need to remove the placeholder where we accept the API Keys from the user and replace it with an Authentication system followed by a Payment gateway for non-first time users of the app.

You have to choose Only One task from the list of tasks below and make sure to complete it in a diligent way. They are designed to hone your creative thinking, speed programming and project management skills and check your perseverance in carrying out tasks quickly and efficiently.

Task 1: Design and Develop the Frontend

• Create a visually appealing and responsive design for the Slides2Markdown website. The website will basically house a tool where you can upload your slides and get a .md Notes file with concise summary of your lecture content (This tool is built already)
• Implement the design using HTML, CSS, and JavaScript (using a modern framework like React, Vue, or Angular is preferred).
• Ensure the design is responsive and works well on different devices (desktop, tablet, and mobile).

Task 2: Implement Phone Number Authentication

• Integrate a phone number authentication system (e.g., using Firebase Authentication, Twilio, or any other suitable service) that allows first-time and repeat users to sign in or sign up.
• The authentication system should support one-time passwords (OTP) sent via SMS or Whatsapp to verify users.