- We need to add user authentication. For this we can use Supabase.
- I will create supabase account and provide the required credentials.
- You can make a sample env file with placeholder, or add placeholders to existing env file.
- Support login using user name (which is email) and password.
- Build a frontend using React.
- Home Page
- Displays a login page.
- Includes links to a signup page.
- Signup
- Clicking the signup page should open the signup page.
- Dashboard (Post Login)
- Displays the API key of the user (partially hidden, with button to copy it to clipboard).
- Displays the current plan of the user.
- Supported plans:
- Free
- Starter
- Growth
- Pro
- Plans are limited by:
- Number of API calls allowed per month. Lets call this API credit. For now 1 API call = 1 API credit
- Number of concurrent calls which can be made.
- Both details should be metered in the server and stored in user data.
- Plan name
- Consumed credits for the month
- Plan expiry date
- Credits should reset at the end of the billing plan to free plan data if plan fee is not paid.
Lets handle all plan related things in future in detail when we add support for payment gateway.
For now, lets make sure that we give provisions for everything, so that it can be implemented later.
- The API key should be used by the user and it is used by the scrape route for user authentication.
- User usage data should be metered in the scrape route.
- Number of concurrent requests should also be tracked.
- If monthly credits have expired or max number of concurrent requests are running, further API calls should fail with appropriate message.
- Maintain a session till the user explicitly logs out via the frontend option.
- Can we call Supabase directly from the frontend React client, without hitting the webserver if it is more simple and does not have any problems? In the future, let me know if you have different thoughts on this.
- Where is the API key generated?
- What all databases should be created at Supabase for this?