Fix Allow users to sign in using google and save their progress with stage model

[ghost]

Original issue: #6

What is the feature

This feature allows users to sign in using Google and save their progress on the essays they have read. The sign-in functionality will be implemented using NextAuth, and user progress will be tracked using Redis.

Why we need the feature

This feature enhances user experience by providing a convenient sign-in option and the ability to track reading progress. It encourages user engagement and retention by allowing users to easily return to where they left off.

How to implement and why

1. Add Google Sign-In Button:

   • Modify the components/Navbar/index.tsx to include a Google sign-in button.
   • Use NextAuth to handle the Google authentication process.

2. Configure NextAuth:

   • Update pages/api/auth/[...nextauth].ts to include Google as a provider.
   • Ensure that the necessary environment variables for Google OAuth are set up.

3. Track User Progress:

   • Create a new API route in pages/api/progress.ts to handle marking essays as read or unread.
   • Use Redis to store user progress. Each user will have a set identified by their email, and the set will contain URLs of the essays they have read.

4. Update UI for Progress Tracking:

   • Modify the essay pages to include a button or checkbox for marking the essay as read.
   • Ensure that the state of the button/checkbox reflects whether the essay has been read by the user.

5. Handle State Management:

   • Use React state or a global state management solution to manage the read/unread status of essays on the client side.
   • Fetch the user's progress from Redis when they sign in and update the UI accordingly.

File Changes:

• components/Navbar/index.tsx: Add Google sign-in button.
• pages/api/auth/[...nextauth].ts: Configure Google provider for NextAuth.
• pages/api/progress.ts: New API route for handling progress tracking.
• components/Layouts/BasicLayout.tsx and components/Layouts/PageLayout.tsx: Update to include progress tracking UI elements.
• lib/essays.rss: Ensure compatibility with progress tracking.

These changes will provide a seamless experience for users to sign in with Google and track their reading progress, enhancing overall user engagement.

Test these changes locally

git checkout -b stage/issue-#6-f7dff1cd-81a7-418e-b59f-d0080ae410d9
git pull origin stage/issue-#6-f7dff1cd-81a7-418e-b59f-d0080ae410d9

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
paulgrahamessays	🛑 Canceled (Inspect)			May 18, 2024 8:58pm