Striae Overview

Application URL

• https://www.striae.org

GitHub Archive

• https://github.com/StephenJLu/striae

Languages Used

• TypeScript: Main language for all logic and React components (.ts, .tsx files)

• JavaScript: Language used for Cloudflare Workers (secure backend data handling, .js files)

• CSS: For styling, including Tailwind CSS and CSS modules

• JSON: For configuration and static data

---

Frameworks & Libraries

Core Frameworks

• React: UI library for building interactive components and pages

• Remix: Full-stack React framework for routing, data loading, and server/client rendering

Supporting Libraries

• Firebase: Used for authentication (firebase.ts, firebase-errors.ts)

• Tailwind CSS: Utility-first CSS framework for rapid UI development (tailwind.css, tailwind.config.ts)

• Cloudflare Workers: Backend API endpoints for data, image, and user management (referenced in config and utils)

• TypeScript: Provides static typing and improved developer experience

Other Utilities

• Context API: For global state management (e.g., authentication context)

• Custom Hooks: For encapsulating logic (useAuth.ts)

• CSS Modules: For scoped component styles (e.g., *.module.css)

---

Backend Storage & Serving

• Image Storage & Serving:

  • Cloudflare Images is used to store and serve user-uploaded images.

  • Images are uploaded via secure API endpoints (Cloudflare Workers), and served using signed URLs for access control.

• Custom User Database:

  • Cloudflare KV (Key-Value store) is used as a custom user database.

  • User records (profile, cases, permissions) are stored and managed via Cloudflare Workers.

• Secure Notes & Data Storage:

  • Cloudflare R2 is used for storing and serving notes and case data (JSON files).

  • Data is accessed and managed via secure API endpoints (Cloudflare Workers), with authentication and CORS.

---

Project Structure

• entry.client.tsx / entry.server.tsx: Remix entry points for client and server rendering

• root.tsx: Main app layout, context providers, and error boundaries

• components/: Reusable UI components (buttons, sidebar, toolbar, color picker, etc.) and actions (case, image, and notes management)

• routes/: Page-level components and route handlers (login, password reset, home, privacy, etc.)

• config/: App configuration and Firebase setup

• contexts/: React context definitions (e.g., authentication)

• hooks/: Custom React hooks

• services/: Service logic for Firebase and session management

• utils/: Utility functions (auth, meta tags, style helpers)

• static/: Static files (HTML, images)

• styles/: Global and root styles

• workers/: Reference Cloudflare Workers (backend endpoints: image, data, auth, user, etc.)

---

How It Works

• Routing: Managed by Remix, with each route in the routes/ folder

• Authentication: Handled via Firebase, with context and hooks for user state

• UI: Built with React components, styled using Tailwind CSS and CSS modules

• Backend/API: Interacts with Cloudflare Workers for secure data, image, and user management

• Image Storage: Images are uploaded to Cloudflare Images and served via signed URLs

• User Data: User profiles and case lists are stored in Cloudflare KV

• Notes & Case Data: Notes and case data are stored in Cloudflare R2 as JSON files, accessed via secure endpoints

• State Management: Uses React Context for global state (e.g., user authentication)

---

Summary Table