feat: add final platform (#11)

* fix: remove duplicated read more button

* fix: move copyright text to the bottom

* fix: change otp redirect to /projects

* feat: add logout button

* feat: add shake to locked buttons

* fix: prevent duplicate project creation

* feat: add back button to create project page

* fix: update back button logic on onboarding

* feat: complete onboard on first project creation

* feat: add crow loader

* fix: change project types cards

* feat: add more project types

* fix: add xss and sql injection protection

* fix: center read more button on mobile

* fix: change 40 hours to 50 hours minimum

* feat: add 404 page

* add 404 page

* fix read more button z index

* add no projects case to projects page

* fix: change hackatime information text

* fix: change auth endpoint

* fix: prevent 404 page from handling api requests

* fix: change hour count

* fix: make onboard use referal code

* fix: change hour count

* feat: color cards based on project type

* fix: switch wildcard card to button

* feat: onboarding background

* feat: juicer cards :p

* fix: shake less

* fix: copy information from airtable to user table

* fix: add referral code system

* fix: add debuging to start script

* feat: copy referreral link to clipboard

* fix: add users_airtable table

* fix: prompt for birthday

* fix: update refferal code count

* fix: make bottombar pages not clickable

---------

Co-authored-by: Jane <[email protected]>
Co-authored-by: techpixel <[email protected]>

Author: 3 people

.github/workflows/build-staging.yaml

@@ -1,18 +1,9 @@
 name: Build and Push Docker Images
 
 on:
-  workflow_call:
-    inputs:
-      path:
-        description: Path to service directory
-        required: false
-        type: string
-  workflow_dispatch:
-    inputs:
-      path:
-        description: Path to service directory
-        required: false
-        type: string
+  push:
+    branches:
+      - staging
 
 jobs:
   prepare:
@@ -71,14 +62,15 @@ jobs:
         username: ${{ github.actor }}
         password: ${{ secrets.GITHUB_TOKEN }}
 
-    - name: Set tag prefix
-      id: tag-prefix
+    - name: Generate build ID
+      id: prep
       run: |
-        if [ "${{ github.ref_name }}" = "main" ]; then
-          echo "prefix=prod-" >> $GITHUB_OUTPUT
-        else
-          echo "prefix=staging-" >> $GITHUB_OUTPUT
-        fi
+        branch=${GITHUB_REF##*/}
+        sha=${GITHUB_SHA::8}
+        ts=$(date +%s)
+        build_id="${branch}-${sha}-${ts}"
+        echo "build_id=${build_id}" >> $GITHUB_OUTPUT
+        echo "timestamp=${ts}" >> $GITHUB_OUTPUT
 
     - name: Build and push image
       uses: docker/build-push-action@v5
@@ -87,7 +79,7 @@ jobs:
         file: ./${{ matrix.service }}/Dockerfile
         tags: |
           ghcr.io/${{ github.repository }}/staging-${{ matrix.service }}:latest
-          ghcr.io/${{ github.repository }}/staging-${{ matrix.service }}:${{ matrix.version }}
+          ghcr.io/${{ github.repository }}/staging-${{ matrix.service }}:${{ steps.prep.outputs.build_id }}
         push: true
         cache-from: type=gha
         cache-to: type=gha,mode=max

.github/workflows/release-staging.yaml

@@ -4,10 +4,14 @@ GATEWAY_PORT=3000
 # User Service Configuration  
 USER_SERVICE_PORT=3002
 USER_SERVICE_NODE_ENV=development
+NODE_ENV=development
 USER_SERVICE_AIRTABLE_API_KEY=your_airtable_api_key_here
 CORS_ORIGIN=http://localhost:5173,http://localhost:3000
 MAIL_SERVICE_URL=http://localhost:3003
 
+# Security Configuration
+COOKIE_DOMAIN=localhost
+
 # Database Configuration (PostgreSQL)
 DATABASE_URL=postgresql://username:password@localhost:5432/midnight_db
 MAIL_SERVICE_DATABASE_URL=postgresql://username:password@localhost:5432/midnight_db
@@ -56,6 +60,8 @@ DD_ENV=production
 DD_VERSION=1.0.0
 
 # Production Settings (uncomment for production)
+# NODE_ENV=production
 # USER_SERVICE_NODE_ENV=production
 # CORS_ORIGIN=https://your-frontend-domain.com,https://your-api-domain.com
 # PUBLIC_API_URL=https://your-api-domain.com
+# COOKIE_DOMAIN=.your-domain.com

env.example

@@ -1,11 +1,41 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
+    import { getReferralCode } from './auth';
   
-  const { onboarding = true } = $props();
+  const { onboarding = false } = $props();
 
-  let activeTab = 'create';
+  let activeTab = $state('create');
+  let shakingTab = $state('');
+
+  let referralPopover = $state(false);
+  
+  function handleLockedClick(tab: string) {
+    shakingTab = tab;
+    setTimeout(() => {
+      shakingTab = '';
+    }, 800);
+  }
+
+  async function showReferralPopover() {
+    const referralCode = await getReferralCode();
+
+    if (referralCode?.rafflePos) {
+      const referralLink = `https://midnight.1mp.dev/?code=${referralCode.rafflePos}`;
+      navigator.clipboard.writeText(referralLink);
+    }
+
+    referralPopover = true;
+    setTimeout(() => {
+      referralPopover = false;
+    }, 4000);
+  }
   
   function navigateTo(tab: string) {
+    if (onboarding && (tab === 'explore' || tab === 'shop')) {
+      handleLockedClick(tab);
+      return;
+    }
+    
     activeTab = tab;
     switch(tab) {
       case 'create':
@@ -33,33 +63,41 @@
       Create
     </button>
     <button 
-      class="nav-item {onboarding ? 'disabled' : 'enabled'}" 
+      class="nav-item {true ? 'disabled' : 'enabled'}" 
       class:active={activeTab === 'explore'}
-      onclick={() => navigateTo('explore')}
+      class:shake={shakingTab === 'explore'}
       role="tab"
       aria-selected={activeTab === 'explore'}
     >
       Explore
-      {#if onboarding}
+      <!-- {#if onboarding} -->
         <img class="lock" src="/icons/lock.svg" alt="Lock" />
-      {/if}
+      <!-- {/if} -->
     </button>
     <button 
-      class="nav-item {onboarding ? 'disabled' : 'enabled'}" 
+      class="nav-item {true ? 'disabled' : 'enabled'}" 
       class:active={activeTab === 'shop'}
-      onclick={() => navigateTo('shop')}
+      class:shake={shakingTab === 'shop'}
       role="tab"
       aria-selected={activeTab === 'shop'}
     >
       Shop
-      {#if onboarding}
+      <!-- {#if onboarding} -->
         <img class="lock" src="/icons/lock.svg" alt="Lock" />
-      {/if}
+      <!-- {/if} -->
     </button>
   </div>
   <div class="tray">
     {#if !onboarding}
-      <img src="/bell-icon.svg" alt="Notification" />
+      <!-- <img src="/icons/bell.svg" alt="Notification" /> -->
+      <button class="referral" onclick={showReferralPopover}>
+        {#if referralPopover}
+          <div class="referral-popover">
+            <p>Referral link copied to clipboard</p>
+          </div>
+        {/if}
+        <img src="/icons/link.svg" alt="Referral" />
+      </button>
     {/if}
   </div>
 </div>
@@ -73,7 +111,7 @@
     background: #2D273F;
     height: 137px;
     padding: 0 120px;
-    z-index: 100;
+    z-index: 200;
 
     display: flex;
     align-items: center;
@@ -109,7 +147,6 @@
 
   .disabled {
     color: #7C7C7C;
-    pointer-events: none;
   }
   
   .nav-item.active {
@@ -133,6 +170,74 @@
     height: 30px;
     rotate: -10deg;
   }
+
+  .tray {
+    display: flex;
+    gap: 32px;
+  }
+
+  .referral {
+    position: relative;
+  }
+
+  .referral img {
+    width: 48px;
+    height: 48px;
+  }
+
+  .referral:hover img {
+    opacity: 0.8;
+    cursor: pointer;
+  }
+
+  .referral-popover {
+    position: absolute;
+    bottom: 120%;
+    left: 50%;
+    translate: -50% 0;
+    z-index: 200;
+    padding: 1.5rem 2rem;
+    background-image: url('/shapes/shape-popover-2.svg');
+    background-size: contain;
+    background-repeat: no-repeat;
+    white-space: nowrap;
+
+    animation: fadeInOut 4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
+    transform-origin: center bottom;
+  }
+
+  @keyframes fadeInOut {
+    0% {
+      scale: 0;
+      opacity: 0;
+    }
+    15%, 80% {
+      scale: 1;
+      opacity: 1;
+    }
+    100% {
+      scale: 0;
+      opacity: 0;
+    }
+  }
+
+  .referral-popover p {
+    font-size: 16px;
+    color: black;
+    margin: 0;
+    margin-bottom: 24px;
+    translate: -10px 1px;
+  }
+
+  @keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    33% { transform: translateX(-5px); }
+    66% { transform: translateX(5px); }
+  }
+
+  .nav-item.shake {
+    animation: shake 400ms;
+  }
   
   @media (max-width: 768px) {
     .nav-item {

lark-ui/src/lib/BottomNavigation.svelte

@@ -55,14 +55,22 @@ export async function completeOnboarding() {
   });
 }
 
+export async function logout() {
+  return await fetch(`${apiUrl}/api/user/auth/logout`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include',
+  });
+}
+
 
 // projects
 
 export type Project = {
   projectId: string;
   userId: string;
   projectTitle: string;
-  projectType: 'personal_website' | 'platformer_game' | 'wildcard';
+  projectType: 'personal_website' | 'platformer_game' | 'website' | 'game' | 'terminal_cli' | 'desktop_app' | 'mobile_app' | 'wildcard';
   description: string;
   createdAt: Date;
   updatedAt: Date;
@@ -195,4 +203,20 @@ export async function verifyHackatimeOtp(otp: string) {
   });
 
   return response;
+}
+
+// referral code
+export async function getReferralCode() {
+  const response = await fetch(`${apiUrl}/api/user/auth/raffle-pos`, {
+    method: 'GET',
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include'
+  });
+
+  if (response.ok) {
+    const data = await response.json();
+    return data;
+  } else {
+    return null;
+  }
 }

lark-ui/src/lib/auth.ts

@@ -1,9 +1,11 @@
 <script lang="ts">
   let { children, color = '#081832', href = '#' } = $props();
+
+  let randRot = $state(Math.random() > 0.5 ? 1 : -1);
 </script>
 
 <a href={href}>
-  <div class="base-card">
+  <div class="base-card" style="--rand-rot: {randRot}deg">
     <div class="card-background" style="background-color: {color}"></div>
     <div class="card-border"></div>
     <div class="card-content">
@@ -18,12 +20,13 @@
     width: 207px;
     height: 308px;
 
-    transition: all 0.1s ease-in;
+    transition: all 250ms cubic-bezier(0.3, 0.7, 0.4, 1);
   }
 
   .base-card:hover {
-    translate: 0px -8px;
-    transition: all 0.1s ease-out;
+    scale: 1.035;
+    rotate: var(--rand-rot);
+    transition: all 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
     cursor: pointer;
   }