You are browsing as a guest. Sign up (or log in) to start making projects!

@zhal on StudyOS

1h 59m 57s logged

Devlog #2 – Switching to React & Adding Google Authentication

Today I upgraded StudyOS from a basic HTML/CSS/JavaScript project into a React (Vite) application, and then added Google Sign-In authentication. This was a major step toward turning StudyOS into a real student productivity platform instead of just a static UI.
StudyOS is designed as a Student Command Center, where students can eventually manage Gmail, Google Calendar, Drive, Classroom, and assignments all in one place.

Part 1 – Switching to React

I migrated the project into React using Vite to make it more scalable and closer to how real production apps are built.

What I changed

  • Converted project from HTML/CSS/JS → React (Vite)

  • Broke UI into reusable components:

  • Sidebar

  • Header

  • Pages (Dashboard, Gmail, Calendar, etc.)

  • Implemented single-page navigation (no page reloads)

Why I switched

  • React makes it much easier to:

  • Manage multiple pages (like Gmail + Calendar + Drive)

  • Handle user login state

Build dynamic dashboards

  • Scale the project into a real app

Part 2 – Google Authentication

After setting up React, I integrated Google Sign-In so users can log into StudyOS using their Google account.

What I implemented

  • Installed @react-oauth/google

  • Added JWT decoding to extract user info

  • Configured Google OAuth in React

  • Created login flow using Google Identity Services

  • Fixed OAuth issues including:

  • Displayed user profile after login:

  • Name

  • Profile picture

  • Restricted app access until user is signed in

What works now

  • Sidebar navigation between pages

  • Dashboard layout structure

  • Google Sign-In authentication system

  • User session state (logged in / logged out)

  • Profile display in header after login

Challenges
The biggest issue was Google OAuth configuration. I initially encountered:

Error 400: origin_mismatch

This happened because the correct localhost URLs were not added in the Google Cloud Console.
Fix
Added the following to Authorized JavaScript origins:

After fixing this, Google Sign-In worked successfully.

Next steps

  • Connect Google Calendar API (real events)

  • Connect Gmail API (inbox preview)

  • Connect Google Drive API (file access)

  • Build Assignment Workspace system

  • Add AI Daily Briefing (smart planning system)

  • Implement “Stay signed in” persistence

  • Improve UI with modern styling (glassmorphism + animations)

0
0

Comments 0

No comments yet. Be the first!