codehagen / dingify

Dingify is helping you unlock the power of seamless real-time monitoring

Dingify

Start at full speed with Dingify !

Introduction · Installation · Tech Stack + Features · Author · Credits

Introduction

Welcome to Dingify, where we're we are going to make your alerts easy for you

Directory Structure

Dingify is a monorepo managed by Turborepo. The monorepo is split between apps and packages directories.

.
├── apps                         # Its app workspace which contains
│    ├── www                     # Nextjs app which is deployed in Vercel
│    ├── api                     # Hono app that is our REST-api for our SDK
│    └── ...
├── packages                     # are the shared packages that are used by the apps 
│    ├── db                      # Prisma DB connector
│    └── ui                      # Shared UI components (Shadcn)
├── tooling                      # are the shared configuration that are used by the apps and packages
│    ├── eslint                  # Shared eslint presets
│    ├── prettier                # Shared prettier configuration
│    ├── tailwind                # Shared tailwind configuration
│    └── typescript              # Shared tsconfig you can extend from
├── LICENSE
└── README.md

Installation

Clone & create this repo locally with the following command:

git clone https://github.com/Codehagen/Dingify

1. Install dependencies using pnpm:

pnpm install

2. Copy .env.example to .env.local and update the variables.

cp .env.example .env.local

4. Input everything you need for the env.

   1. Create Neon Database Account
   2. Create Stripe Account
   3. Create Google Console Account
   4. Create Resend Account

5. Start the development server from either yarn or turbo:

# To start the server
pnpm dev

# To push the DB schema
pnpm --filter=db db:push

REST-API Installation (optinal)

If you want to use the REST-api you need to update the hono under apps/api

[vars]
#MY_VAR = "my-variable"
#DATABASE_URL = "Use same link as your db URL"

If you want to deploy it on Cloudflare you need to go run

pnpm run deploy

Tech Stack + Features

Frameworks

• Next.js – React framework for building performant apps with the best developer experience
• Auth.js – Handle user authentication with ease with providers like Google, Twitter, GitHub, etc.
• Prisma – Typescript-first ORM for Node.js
• React Email – Versatile email framework for efficient and flexible email development

Platforms

• Vercel – Easily preview & deploy changes with git
• PlanetScale – A cutting-edge database platform for seamless, scalable data management
• Resend – A powerful email framework for streamlined email development

Contributing

We love our contributors! Here's how you can contribute:

• Open an issue if you believe you've encountered a bug.
• Make a pull request to add new features/make quality-of-life improvements/fix bugs.

Repo Activity

dingify's Issues

Feature:

Type of feature

💡 Feature

Current behavior

The UserChartActivity component currently displays static data for events and users over time.

Suggested solution

Update the UserChartActivity component to dynamically display information about the events a user has made. The parent component already has the actions integrated. The updated component should:

• Fetch User Data: Utilize the existing data fetching mechanisms in the parent component to retrieve user-specific event data.
• Update Data Format: Ensure the data format aligns with what the LineChart component expects.
• Modify the Tooltip: Adjust the tooltip to display user-specific event information.

chore: Make new prisma schema fit Hono

Feature: Test

Type of feature

💡 Feature

Current behavior

Need first milestone

Suggested solution

No response

Additional context

No response

Bug: Hydration Error on Dashboard Page

Describe the bug

When you refresh the site you can see that we have a hydration error. This is probably the EventDetailsTable component.

Picture under is the error.

Steps to reproduce

1. Go to /dashboard
2. Refresh the page
3. See error on left corner

Expected Behavior

The page should refresh without any errors.

Feature: Copy API key Component

Type of feature

💡 Feature

Current behavior

Right now nothing happens when you press the "copy" component

Suggested solution

Make it so its possible to copy the API-key by just pressing the button-

Also if possible make the input fields so its hides the API key
ApiKey

---

Additional context

No response

Feature: User Cards

Type of feature

💡 Feature

Current behavior

When a user navigates to /dashboard/users, all users are displayed. Clicking on a user redirects to /dashboard/users/UserID.

Suggested solution

Feature Enhancements:

1. User List View:

• Path: /dashboard/users
• - Display: All users in a list or table view.
• - Functionality: Clicking on a user redirects to /dashboard/users/UserID.

2. User Detail View:
   • Path: /dashboard/users/UserID
   • Display:
     • Two cards:

• - First Seen
• - Last Seen
• - Journey: All the events that the user has interacted with.
• - Most Used Feature: Highlight the most frequently used feature by the user.

3. Analytics View:
   • Path: /dashboard/users/analytics
   • Display:

• - Power Users: Users with the highest activity.
• - Active Users: Regular users with consistent activity.
• - Losing Users: Users who have been idle for a while, suggesting a need for follow-up.

Feature: Update prisma schema to fit RestAPI

Feature: Update Landingpage

Type of feature

💡 Feature

Current behavior

Need to refresh the landingpage

Suggested solution

No response

Additional context

No response

Feature: Dashboard Dynamic Data - See DB data

Feature: Initial Dashboard MVP

Fix: Change charts tooltip color for dark theme

Currently the tooltip for charts are having the same foreground and background color as light theme. Text is not properly visible

Feature: Generate new API-key for user

Feature: Implement CI/CD Workflow Action

Type of feature

🔄 CI/CD

Current behavior

We need to set up a Continuous Integration (CI) workflow action for our project. Currently, there is no automated process for linting, formatting, and type checking our code.

Suggested solution

Implement a GitHub Actions workflow for Continuous Integration (CI) to automate linting, formatting, and type checking of our codebase. The workflow should be triggered on pull requests and pushes to the main branch, as well as merge groups.

Example under:

CI Workflow YAML

name: CI

on:
  pull_request:
    branches: ["main"]
  push:
    branches: ["main"]
  merge_group:

permissions:
  contents: read

concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup
        uses: ./tooling/github/setup

      - name: Copy env
        shell: bash
        run: cp .env.example .env.local

      - name: Lint
        run: pnpm lint && pnpm lint:ws

  format:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup
        uses: ./tooling/github/setup

      - name: Format
        run: pnpm format

  typecheck:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup
        uses: ./tooling/github/setup

      - name: Typecheck
        run: pnpm typecheck

Feature: Setup SDK

Feature: Create event

Feature: Toast -> Sonner

Type of feature

🧑‍💻 Refactor

Current behavior

The current implementation uses useToast for toast notifications in the application.

import { useToast } from "@dingify/ui/components/use-toast";

export function AddChannelButton() {
  const { toast } = useToast();

  const handleSubmit = async (event) => {
    event.preventDefault();
    setIsLoading(true);

    try {
      const result = await createChannel(channelName);
      toast({
        title: "Channel Created",
        description: \`Channel "\${channelName}" created successfully.\`,
      });

Suggested solution

Migrate all toast notifications from useToast to sonner as per the documentation here. Example bellow is just for illustration, but could work.

Steps:

1. Add the Toaster component: Update your app/layout.tsx file:

   import { Toaster } from "@/components/ui/sonner";
   
   export default function RootLayout({ children }) {
     return (
       <html lang="en">
         <head />
         <body>
           <main>{children}</main>
           <Toaster />
         </body>
       </html>
     );
   }

2. Update toast notifications: Replace the existing useToast implementation with sonner.

Updated code:

import { toast } from "sonner";

export function AddChannelButton() {
 
    try {
      const result = await createChannel(channelName);

      toast.success(\`Channel "\${channelName}" created successfully.\`);

Additional context

Replace all instances of useToast with sonner in the codebase to ensure consistent toast notifications.

Feature: Make REST API for Hono

Feature: Settings page

Type of feature

💡 Feature

Current behavior

Right now we have a limited settings page. We need to update it so that we have this:

• Profile
• API
• Billing
• Notification
• Plugins
• Display

Suggested solution

Utilize components from shadcn/ui to enhance the settings page. We can copy and integrate major parts of the code from the provided examples to streamline the implementation.

For now, we can input values for Profile, Notification, and Display. The API section will display the token hashed, similar to the createAPI component we previously made.

Feature: Update UserGridActivity to Display Last 3 Months

Type of feature

💡 Feature

Current behavior

The UserGridActivity component currently displays static data for user activity throughout the year.

Suggested solution

Update the UserGridActivity component to dynamically display the last 3 months of user activity, ending on the current date (e.g., today is June 11, so display data from March 11 to June 11). The updated component should:

• Fetch Data for Last 3 Months: Ensure that the data fetching mechanism retrieves user activity data for the last 3 months.
• Adjust Data Display: Format the data to fit the ActivityCalendar component's requirements.
• Update the Calendar: Ensure the calendar visualization starts from 3 months ago and ends on the current date.

Additional context

"use client";

import ActivityCalendar from "react-activity-calendar";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@dingify/ui/components/card";

// Example data: array of objects with date and count
const calendarData = [
  { date: "2023-01-01", count: 2, level: 1 },
  { date: "2023-01-02", count: 5, level: 2 },
  { date: "2023-01-03", count: 1, level: 0 },
  { date: "2023-02-16", count: 1, level: 1 },
  { date: "2023-03-31", count: 3, level: 1 },
];

export function UserGridActivity() {
  return (
    <Card className="overflow-hidden">
      <CardHeader>
        <CardTitle>Activity Calendar</CardTitle>
        <CardDescription>
          A visualization of user activity throughout the year.
        </CardDescription>
      </CardHeader>
      <CardContent className="pb-4">
        <div style={{ height: "auto", width: "100%" }}>
          <ActivityCalendar
            data={calendarData}
            blockSize={15}
            blockMargin={5}
            fontSize={14}
            hideTotalCount={false}
            showWeekdayLabels
            hideMonthLabels={false}
            theme={{
              light: ["#ebedf0", "#c6e48b", "#7bc96f", "#82ca9d", "#239a3b"],
              dark: ["#282828", "#5c4e4e", "#946b6b", "#b74d4d", "#82ca9d"],
            }}
            labels={{
              months: [
                "Jan",
                "Feb",
                "Mar",
                "Apr",
                "May",
                "Jun",
                "Jul",
                "Aug",
                "Sep",
                "Oct",
                "Nov",
                "Dec",
              ],
              weekdays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
              totalCount: "{{count}} activities in {{year}}",
              legend: {
                less: "Less",
                more: "More",
              },
            }}
            colorScheme="light" // Use "dark" for dark mode
            eventHandlers={{
              onClick: (event) => (activity) => {
                alert(JSON.stringify(activity));
              },
            }}
          />
        </div>
      </CardContent>
    </Card>
  );
}

Feature: Setup Hono Monorepo

Bugs: Minor edits before MVP

Feature: Add Postman Collection Public for API testing

Feature: Dashboard Layout

Is your personal email up to date?

Hi,

I tried to contact you at [email protected] some time ago but haven't gotten a response, Is this email up to date or did my email perhaps land in a spam folder?

Feature: Onboarding

Feature: New Functions to send Notification - Email

Onborda integrate onborda

Integrate onboarding

chore: Remove Propwrite templates and property templates

Bug: User can create a same events multiple times

Describe the bug

Even after creating a event, still the form is up and I can able to create a new event with the same details, which can result in duplicate events.

Steps to reproduce

1. Go to /dashboard
2. Create a channel
3. Click on 'Create Test Event'
4. Create a event

Browsers

No response

Additional context (Is this in dev or production?)

No response

Feature: Setup Monorepo

Feature: Analytics Page

Feature: Setup Left Nav

Feature: Onboarding

Type of feature

💡 Feature

Current behavior

UX onboarding and confetti

Suggested solution

No response

Additional context

No response

Error: calcTextDimensions() requires browser APIs

          ![Screenshot 2024-06-11@2x](https://github.com/Codehagen/Dingify/assets/24507211/004f7f11-6ac0-4e2b-8c92-eba24a50d250)

Got a error when i do the following:

1. Go into users tab.
2. Press Ctrl + R / Cmd + R
3. Get this error
   

This is the error in console- We can look at this later and maybe make a new issue for it. Going to merge the PR now.

 ⨯ ../src/utils/calendar.ts (195:11) @ calcTextDimensions
 ⨯ Error: calcTextDimensions() requires browser APIs
    at Array.reduce (<anonymous>)
digest: "3723231744"
  193 | function calcTextDimensions(text: string, fontSize: number) {
  194 |   if (typeof document === 'undefined' || typeof window === 'undefined') {
> 195 |     throw new Error('calcTextDimensions() requires browser APIs');
      |           ^
  196 |   }
  197 |
  198 |   if (fontSize < 1) {

Originally posted by @Codehagen in #64 (comment)

Bug: Get started opens login modal for signed-in users

Describe the bug

On landing page when I clicked on get started it opened the sign-in modal but i was already signed in

Steps to reproduce

After signing in click on get started on landing page

Browsers

No response

Additional context (Is this in dev or production?)

No response

Feature: Log Metrics and Display Usage on Settings Page

Type of feature

💡 Feature

Current behavior

We dont have a component to display the usage of metrics. We have this in the prisma schema for now.

Suggested solution

Need to make a component / site to display the current usage.
Something like this:

Additional context

Prisma Schema:

model Metrics {
  id            String  @id @default(cuid())
  projectId     String  @unique
  logsUsed      Int     @default(0)
  logsLimit     Int     @default(1000)
  channelsUsed  Int     @default(1)
  channelsLimit Int     @default(3)
  seatsUsed     Int     @default(1)
  projectsUsed  Int     @default(1)
  project       Project @relation(fields: [projectId], references: [id])

  @@map(name: "metrics")
}

Feature: Add new user

Feautres: Channel page

Feature: Onboarding / Stepper for new users

💡 Feature: Improve Onboarding Process

Current Behavior

Currently, we have some conditional rendering for when a new user doesn't have an API key. However, this needs improvement. Resend (www.resend.com) has a good method for handling this, as shown in the attached pictures.

Suggested Solution

Create a new page called /onboarding where we can display the steppers. We can use a horizontal stepper, such as the one found here: ShadCN Stepper. The user can return to /onboarding if they want to go through the process again, so no state management in the database is needed for this.

Initial state for Resend:

Pressed Add API - This made the card green and then enabled the Send email button.

These boxes are also conditionally rendered based on if the person has pressed Send email and got a positive callback.

We should have:

• Step 1: Add an API Key
  We can't create an event before this button is pressed, so we need to conditionally render it.
• Step 2: Create a Channel
  Provide an input field and action to the database so a person can create a meaningful channel, e.g., sign up.
• Step 3: Create an Event
  Input their API key and the new channel in the call so this will be displayed.
• Step 4: Display Additional Actions
  Have some cards under to display more actions.

We need to reuse the make API key function, and we can use the same style as the create-event button that is currently on the homepage.