Portfolio

Spark Lane PA (Personal Assistant)

A modular full-stack productivity app built with React, TypeScript, Node.js, Express and MongoDB. Sparklane combines Google Calendar, prioritised tasks, time tracking and pay-period budgeting in one responsive application.

In Development

Project Details

Spark Lane PA is an evolving personal productivity app designed to make everyday organisation simpler. It brings frequently used planning tools into one responsive interface, with persistent data securely separated by user account.

Users can view upcoming Google Calendar events, create new events, manage prioritised to-do lists and record daily time logs with weekly summaries. The budgeting module supports configurable pay periods, recurring and one-off payments, income and expenses, paid-status tracking and mobile-friendly weekly navigation.

Each module can be enabled or disabled from Account Settings, allowing each user to choose which tools appear in their navigation. Users can also select between dark-green and warm-light themes and configure the day their monthly budget period begins.

The meal-planning module is currently at an early stage and includes personal reference material while its main planning features are developed. Sparklane remains in active development and is currently available to a small test audience.

The project is still growing, with more features and improvements planned.

The app is currently available to a small test audience. Get in touch if you’d like access or want to share feedback.

View Live SiteView on GitHub

Features

Key Features Implemented

  • Google account authentication with separately authorised Calendar access

  • Upcoming Google Calendar event viewing and event creation

  • Prioritised to-do lists with creation, editing, completion and deletion

  • Daily time logging with daily totals and weekly summaries

  • Configurable payday-based monthly budget periods

  • One-off and recurring income and expense tracking

  • Payment editing, deletion and paid/unpaid status tracking

  • Balance and outstanding-expense summaries

  • Desktop payment calendar and mobile weekly budget navigation

  • Optional modules that can be independently enabled or hidden

  • Persistent dark-green and warm-light themes

  • Account, module, appearance and budget settings

  • Server and Google Calendar connection monitoring

  • Calendar reauthentication guidance when access requires attention

  • Responsive desktop and mobile layouts

  • Early-stage meal-planning area with personal PCOS reference notes

  • Secure server-side sessions and persistent user data

  • Encrypted stored Google tokens, trusted-origin checks and rate limiting

Technical Details

Frontend (React TypeScript)

Framework: React 19 with TypeScript Styling: Bootstrap 5, React Bootstrap, and custom CSS State Management: React Context for authentication, with component-level React hooks for feature state HTTP Client: Axios with credential-aware API requests Authentication: Google OpenID Connect with server-managed sessions Google Integration: Google Calendar API for viewing and creating events Preferences: Persistent module, theme and budget settings Accessibility: Semantic HTML, keyboard-accessible controls, focus states and responsive navigation

Backend (Node.js Express)

Runtime: Node.js with Express.js Database: MongoDB with Mongoose models API: Feature-based REST endpoints for authentication, calendars, to-dos, time logs and budgeting Authentication: Google OpenID Connect authorisation-code flow with PKCE, state and nonce validation Sessions: Express-session with custom MongoDB-backed session storage and rolling expiry Security: Helmet security headers, restricted CORS origins, trusted-origin validation, HTTP-only cookies, request-size limits and API rate limiting

Architecture Pattern

RESTful API: Express routes and database models organised by application feature Component-based UI: Reusable React components with dedicated feature pages Separation of Concerns: Authentication, middleware, routes, models, helpers, contexts and styles kept in separate layers Persistent Data: Tasks, time logs, budget records, account preferences and sessions stored in MongoDB User Data Isolation: Authenticated API operations scoped to the current user Modular Interface: Optional application modules controlled through persistent account preferences Responsive Design: Separate desktop and mobile interactions where each layout requires a different workflow