# Welcome to my project
- Isizathu sokwe
# Isixhosa Inyanga Zonyaka (Ikhalenda)
A small React + TypeScript calendar application with Xhosa translations and event management. The project provides a calendar grid, event creation form, event list, Google Calendar integration, and Supabase-backed persistence. The UI uses a component library organized under src/ui and follows a Vite+React+TypeScript setup.
## Key features
- Monthly calendar grid view
- Create, edit and list events
- Google Calendar connect (OAuth integration)
- Supabase integration for storing events and user data
- Xhosa translations / localization utilities
- Reusable UI components under src/ui
## Tech stack
- Vite
- React + TypeScript
- Google calender api
- GOOGLE_CLIENT_ID - Google OAuth client ID for Calendar integration
- VITE_GOOGLE_API_KEY - Google API key if used by any calendar APIs
- Supabase (client present in src/integrations/supabase)
- ESLint + TypeScript config
- shadcn-style UI primitives pattern (components in src/ui)
## Getting started
Prerequisites
- Node.js 18+ (or compatible LTS)
- npm or yarn
Install dependencies
npm install
Run development server
npm run dev
Build
npm run build
Preview production build
npm run preview
## Environment variables
Create a .env or .env.local file at the project root with the values required by the integrations you use. Common variables expected by this project:
- VITE_SUPABASE_URL - Your Supabase project URL
- VITE_SUPABASE_ANON_KEY - Supabase anon public key
- VITE_GOOGLE_CLIENT_ID - (Optional) Google OAuth client ID for Calendar integration
- VITE_GOOGLE_API_KEY - (Optional) Google API key if used by any calendar APIs
Ensure these variables are available to Vite (prefix with VITE_).
## Project structure (src)
- components/ - React components used by the app
- CalendarGrid.tsx - main calendar grid view
- CalendarHeader.tsx - header and navigation for calendar
- EventForm.tsx - form UI for creating/editing events
- EventList.ts …