Skip to main content

RISTEK Ads

📖 Table of Contents​

1. Introduction​

The RISTEK Ads ecosystem consists of two main parts:

  1. Component Library (@ristek-kit/ads): A React component library designed to provide reusable UI components for RISTEK applications.
  2. Dashboard: A web application built to manage and monitor advertising campaigns for RISTEK, providing a modern, responsive interface for managing ads, tracking performance, and analyzing campaign data.

2. Core Technologies​

Component Library (@ristek-kit/ads)​

  • React: ^18.2.0 (peer dependency)
  • TypeScript: ^5.2.2
  • Vite: ^5.2.0 (Build tool)
  • TailwindCSS: ^3.4.3 (Styling)
  • Radix UI: Various components for accessible UI primitives
  • Embla Carousel: For carousel/slider components
  • Mixpanel: For analytics integration

Dashboard​

  • Frontend Framework: Remix.js with React
  • Styling: TailwindCSS with custom animations
  • Database: Supabase
  • Authentication: Supabase Auth
  • Type Safety: TypeScript
  • Package Manager: pnpm
  • Build Tool: Vite
  • Code Quality: ESLint, Prettier

3. Project Setup​

Component Library Setup​

# Install dependencies
npm install

# Development
npm run dev

# Build
npm run build

# Preview build
npm run preview

# Lint
npm run lint

Dashboard Setup​

# Clone the repository
git clone [repository-url]

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Start production server
pnpm start

4. 🔐 Environment Variables​

Component Library​

The project uses Vite's environment variable system. Environment variables should be defined in .env files.

Dashboard​

# Backend Environment Variables
SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key

# Frontend Environment Variables
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

5. 📁 Folder Structure​

Component Library Structure​

ristek-ads/
├── lib/               # Main component library source
│   ├── components/   # UI components
│   ├── config/      # Configuration files
│   ├── provider/    # React context providers
│   ├── types/      # TypeScript types
│   ├── utils/      # Utility functions
│   └── assets/     # Static assets
├── src/             # Development environment
├── public/          # Static assets
├── types/          # TypeScript type definitions
├── vite.config.ts  # Vite configuration
└── package.json    # Project configuration

Dashboard Structure​

app/
├── assets/         # Static assets
├── components/     # React components
├── routes/         # Application routes
├── lib/           # Utility functions and shared code
│   └── supabase.ts
├── db/
│   ├── migrations/
│   └── schema.ts
├── entry.client.tsx
├── entry.server.tsx
├── root.tsx
└── tailwind.css

6. 📊 Diagrams​

Authentication Flow​

Campaign Management​

7. 🔧 Development Notes​

  1. Code Style and Quality

    • Follow TypeScript best practices
    • Use ESLint and Prettier for code formatting
    • Follow component-based architecture
    • Regular code reviews and documentation updates

  2. Performance Optimization

    • Implement code splitting and lazy loading
    • Optimize assets and bundle sizes
    • Use proper caching strategies
    • Regular performance monitoring and optimization