[RELEASE] - THIS VERSION SHOULD ADD SUBSCRIPTIONS, AND A LOT OF BUG F…

…IXED 💚 (#15)

* chore: add comprehensive coding guidelines and best practices for TypeScript, React, and Next.js development

* feat(favicon): update favicon to new favicon from jupiter finance logo

* feat(dependencies): add nextjs-toploader and styled-components to package.json

* feat: add skeleton and spinner components for loading states in the dashboard

* feat: update branding in login page and enhance subscriptions layout with section wrapper

.cursorrules

@@ -0,0 +1,120 @@
+You are an expert developer proficient in TypeScript, React and Next.js, Expo (React Native), Tamagui, ShadCN, MagicUi Components, Supabase, SSR, Server Actions, Prisma, Zod, Turbo (Monorepo Management), i18next (react-i18next, i18next, expo-localization), Zustand, TanStack React Query, Solito, Stripe (with subscription model).
+
+Code Style and Structure
+
+- Write concise, technical TypeScript code with accurate examples.
+- Use functional and declarative programming patterns; avoid classes.
+- Prefer iteration and modularization over code duplication.
+- Use descriptive variable names with auxiliary verbs (e.g., `isLoading`, `hasError`).
+- Structure files with exported components, subcomponents, helpers, static content, and types.
+- Favor named exports for components and functions.
+- Use lowercase with dashes for directory names (e.g., `components/auth-wizard`).
+
+TypeScript and Zod Usage
+
+- Use TypeScript for all code; prefer interfaces over types for object shapes.
+- Utilize Zod for schema validation and type inference.
+- Avoid enums; use literal types or maps instead.
+- Implement functional components with TypeScript interfaces for props.
+
+Syntax and Formatting
+
+- Use the `function` keyword for pure functions.
+- Write declarative JSX with clear and readable structure.
+- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
+
+UI and Styling
+
+- Use Tamagui for cross-platform UI components and styling.
+- Implement responsive design with a mobile-first approach.
+- Ensure styling consistency between web and native applications.
+- Utilize Tamagui's theming capabilities for consistent design across platforms.
+
+State Management and Data Fetching
+
+- Use Zustand for state management.
+- Use TanStack React Query for data fetching, caching, and synchronization.
+- Minimize the use of `useEffect` and `setState`; favor derived state and memoization when possible.
+
+Internationalization
+
+- Use i18next and react-i18next for web applications.
+- Use expo-localization for React Native apps.
+- Ensure all user-facing text is internationalized and supports localization.
+
+Error Handling and Validation
+
+- Prioritize error handling and edge cases.
+- Handle errors and edge cases at the beginning of functions.
+- Use early returns for error conditions to avoid deep nesting.
+- Utilize guard clauses to handle preconditions and invalid states early.
+- Implement proper error logging and user-friendly error messages.
+- Use custom error types or factories for consistent error handling.
+
+Performance Optimization
+
+- Optimize for both web and mobile performance.
+- Use dynamic imports for code splitting in Next.js.
+- Implement lazy loading for non-critical components.
+- Optimize images use appropriate formats, include size data, and implement lazy loading.
+
+Monorepo Management
+
+- Follow best practices using Turbo for monorepo setups.
+- Ensure packages are properly isolated and dependencies are correctly managed.
+- Use shared configurations and scripts where appropriate.
+- Utilize the workspace structure as defined in the root `package.json`.
+
+Backend and Database
+
+- Use Supabase for backend services, including authentication and database interactions.
+- Follow Supabase guidelines for security and performance.
+- Use Zod schemas to validate data exchanged with the backend.
+
+Cross-Platform Development
+
+- Use Solito for navigation in both web and mobile applications.
+- Implement platform-specific code when necessary, using `.native.tsx` files for React Native-specific components.
+- Handle images using `SolitoImage` for better cross-platform compatibility.
+
+Stripe Integration and Subscription Model
+
+- Implement Stripe for payment processing and subscription management.
+- Use Stripe's Customer Portal for subscription management.
+- Implement webhook handlers for Stripe events (e.g., subscription created, updated, or cancelled).
+- Ensure proper error handling and security measures for Stripe integration.
+- Sync subscription status with user data in Supabase.
+
+Testing and Quality Assurance
+
+- Write unit and integration tests for critical components.
+- Use testing libraries compatible with React and React Native.
+- Ensure code coverage and quality metrics meet the project's requirements.
+
+Project Structure and Environment
+
+- Follow the established project structure with separate packages for `app`, `ui`, and `api`.
+- Use the `apps` directory for Next.js and Expo applications.
+- Utilize the `packages` directory for shared code and components.
+- Use `dotenv` for environment variable management.
+- Follow patterns for environment-specific configurations in `eas.json` and `next.config.js`.
+- Utilize custom generators in `turbo/generators` for creating components, screens, and tRPC routers using `yarn turbo gen`.
+
+Key Conventions
+
+- Use descriptive and meaningful commit messages.
+- Ensure code is clean, well-documented, and follows the project's coding standards.
+- Implement error handling and logging consistently across the application.
+
+Follow Official Documentation
+
+- Adhere to the official documentation for each technology used.
+- For Next.js, focus on data fetching methods and routing conventions.
+- Stay updated with the latest best practices and updates, especially for Expo, Tamagui, and Supabase.
+
+Output Expectations
+
+- Code Examples Provide code snippets that align with the guidelines above.
+- Explanations Include brief explanations to clarify complex implementations when necessary.
+- Clarity and Correctness Ensure all code is clear, correct, and ready for use in a production environment.
+- Best Practices Demonstrate adherence to best practices in performance, security, and maintainability.

app/(authenticated)/dashboard/_components/SkeletonFallback.tsx

@@ -0,0 +1,31 @@
+import { Skeleton } from "@/app/_components/ui/skeleton";
+
+const DashboardSkeleton = () => {
+  return (
+    <div className="flex h-[calc(100vh-72px)] flex-col gap-6 p-6">
+      <div className="grid h-full gap-6 lg:grid-cols-[2fr,1fr]">
+        <div className="pr-0 lg:pr-6">
+          <div className="space-y-6 overflow-hidden">
+            <div className="flex flex-col gap-4 sm:flex-row sm:justify-between sm:gap-0">
+              <h1 className="text-2xl font-bold">Dashboard</h1>
+              <Skeleton className="h-12 w-full" />
+            </div>
+
+            <Skeleton className="h-12 w-full" />
+
+            <div className="grid grid-cols-1 gap-6 overflow-hidden md:grid-cols-2 lg:grid-cols-3">
+              <Skeleton className="h-12 w-full" />
+              <Skeleton className="h-12 w-full" />
+            </div>
+          </div>
+        </div>
+
+        <div className="lg:h-full">
+          <Skeleton className="h-full w-full" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardSkeleton;

app/(authenticated)/layout.tsx

@@ -4,6 +4,7 @@ import Header from "../_components/Header";
 import { auth } from "@clerk/nextjs/server";
 import { redirect } from "next/navigation";
 import { ClientProviders } from "../_lib/providers";
+import DashboardSkeleton from "./dashboard/_components/SkeletonFallback";
 
 export default async function AuthenticatedLayout({
   children,
@@ -17,7 +18,7 @@ export default async function AuthenticatedLayout({
   }
 
   return (
-    <Suspense>
+    <Suspense fallback={<DashboardSkeleton />}>
       <ClientProviders>
         <Header isEnabled />
         <div className="flex flex-col overflow-hidden">{children}</div>

app/_components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/app/_lib/utils";
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

app/_components/ui/spinner.tsx

@@ -0,0 +1,14 @@
+import { Loader2Icon } from "lucide-react";
+
+const Spinner = () => {
+  return (
+    <section>
+      <Loader2Icon
+        className="animate-spin text-primary repeat-infinite"
+        size={32}
+      />
+    </section>
+  );
+};
+
+export default Spinner;

app/layout.tsx

@@ -20,6 +20,12 @@ export const metadata: Metadata = {
     name: "Wesley Souza",
     url: "https://dev-wesleysouza.vercel.app/",
   },
+  icons: {
+    icon: ["/favicon.ico?v=4"],
+    apple: ["/apple-touch-icon.png?v=4"],
+    shortcut: ["/apple-touch-icon.png"],
+  },
+  manifest: "/site.webmanifest",
 };
 
 export default function RootLayout({

app/loading.tsx

@@ -0,0 +1,9 @@
+import Spinner from "./_components/ui/spinner";
+
+export default function Loading() {
+  return (
+    <section className="flex h-full flex-col items-center justify-center">
+      <Spinner />
+    </section>
+  );
+}

app/login/page.tsx

@@ -19,15 +19,15 @@ const Login = async () => {
         <div className="mx-auto max-w-[550px] items-start">
           <Image
             src={"/logo.svg"}
-            alt="finance ai"
+            alt="jupiter finance"
             width={173}
             height={39}
             className=""
           />
           <h1 className="mt-8 text-4xl font-bold">Bem-vindo</h1>
           <p className="mt-2 text-base text-muted-foreground">
-            A Finance AI é uma plataforma de gestão financeira que utiliza IA
-            para monitorar suas movimentações, e oferecer insights
+            A Jupiter Finance é uma plataforma de gestão financeira que utiliza
+            IA para monitorar suas movimentações, e oferecer insights
             personalizados, facilitando o controle do seu orçamento.
           </p>
           <SignInButton>

app/subscriptions/page.tsx

@@ -14,7 +14,7 @@ import { ScrollArea } from "../_components/ui/scroll-area";
 
 const Subscriptions = () => {
   return (
-    <>
+    <section className="h-[100vh] overflow-hidden">
       <Header />
       <ScrollArea>
         <section className="h-screen space-y-6 overflow-hidden p-6 lg:pb-0">
@@ -93,7 +93,7 @@ const Subscriptions = () => {
           </div>
         </section>
       </ScrollArea>
-    </>
+    </section>
   );
 };
 

package.json

@@ -40,6 +40,7 @@
     "next": "14.2.16",
     "next-nprogress-bar": "^2.3.15",
     "nextjs-progressbar": "^0.0.16",
+    "nextjs-toploader": "^3.7.15",
     "postcss": "^8.4.47",
     "posthog-js": "^1.188.0",
     "prisma": "^5.22.0",
@@ -50,6 +51,7 @@
     "react-number-format": "^5.4.2",
     "recharts": "^2.13.3",
     "stripe": "^17.4.0",
+    "styled-components": "^6.1.13",
     "tailwind-merge": "^2.5.4",
     "tailwindcss": "^3.4.14",
     "tailwindcss-animate": "^1.0.7",