Personal Assistant React App

In Development

Project Details

I have a lot of big plans for this one, so I expect it will change a lot over time. The initial tech stack I've added into my features section of this entry, but is currently pretty basic. If you'd like access to this to trial, or to give feedback, it's currently locked to a test audience - so let me know! I'm happy to share!

View Live Site View on GitHub

Features

Frontend (React TypeScript)

  • Framework: React 19.2.4 with TypeScript

  • Styling: Bootstrap 5.3.8 + React Bootstrap Icons

  • State Management: React Context API (AuthContext)

  • HTTP Client: Axios for API calls

  • Authentication: Google OAuth with @react-oauth/google

Backend (Node.js Express)

  • Runtime: Node.js with Express.js

  • Database: MongoDB with Mongoose ODM

  • Authentication: Passport.js with Google OAuth 2.0

  • Session Management: Express-session

  • Security: Helmet, CORS, Morgan logging

Key Features Implemented

  • Google Calendar Integration: OAuth + Calendar API access

  • User Authentication: Server-side Google OAuth flow

  • Responsive Design: Mobile-first CSS with custom Bootstrap theme

  • Real-time Data: Calendar event fetching with session management

  • Modules: Calendar, To-do List, Time Logging, Monthly Budget

    • In Progress: Meal Planner

Architecture Pattern

  • RESTful API: Express routes separated by feature (auth, calendar)

  • Component-based UI: Reusable React components

  • Separation of Concerns: Route files, component files, CSS files