diff --git a/.env.example b/.env.example new file mode 100644 index 00000000..9a58b83c --- /dev/null +++ b/.env.example @@ -0,0 +1,21 @@ +# App +NEXT_PUBLIC_APP_URL=http://localhost:3000 +NODE_ENV=development + +# Authentication (NextAuth.js) +NEXTAUTH_URL=http://localhost:3000 +# https://generate-secret.vercel.app/32 +NEXTAUTH_SECRET= + +# https://console.cloud.google.com/apis/credentials +# Callback URL: http://localhost:3000/api/auth/callback/google +GOOGLE_CLIENT_ID= +GOOGLE_CLIENT_SECRET= + +# https://github.com/settings/applications +# Callback URL: http://localhost:3000/api/auth/callback/github +GITHUB_CLIENT_ID= +GITHUB_CLIENT_SECRET= + +# Database +DATABASE_URL="mysql://user:pass@localhost:3306/mydb?schema=public" \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index bffb357a..00000000 --- a/.eslintrc.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": "next/core-web-vitals" -} diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 00000000..dfe07704 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +# Auto detect text files and perform LF normalization +* text=auto diff --git a/.gitignore b/.gitignore index a93a8424..95f7c58e 100644 --- a/.gitignore +++ b/.gitignore @@ -25,8 +25,8 @@ yarn-debug.log* yarn-error.log* # local env files -.env*.local .env +.env*.local # vercel .vercel @@ -34,5 +34,13 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts -.idea -/data \ No newline at end of file + +# extra +/private_docs +.vercel + +# IDE +.idea/ + +# Docker Compose Volumes +/data/ \ No newline at end of file diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..7f842506 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,5 @@ +dist +node_modules +.next +package.json +pnpm-lock.yaml \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json index 7a73a41b..35412482 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,2 +1,4 @@ { + "WillLuke.nextjs.addTypesOnSave": true, + "WillLuke.nextjs.hasPrompted": true } \ No newline at end of file diff --git a/README.md b/README.md index 728b64ed..fcb38e2e 100644 --- a/README.md +++ b/README.md @@ -1,92 +1,38 @@ -# Build a SaaS AI Platform with Next.js 13, React, Tailwind, Prisma, Stripe | Full Tutorial 2023 +# Global Referendum on War and Disease -![Copy of Copy of Copy of Fullstack Twitter Clone](https://github.com/AntonioErdeljac/next13-ai-saas/assets/23248726/c47e604a-b50b-4eb0-b420-fda20908f522) +## Overview +This project aims to analyze public opinion on research spending. It seeks to understand the general sentiment towards funding research projects across various fields. +## Installation +To set up this project locally, follow these steps: +1. Clone the repository to your local machine. +2. Navigate to the project directory. +3. Install the required dependencies using `npm install`. +## Features -This is a repository for Build a SaaS AI Platform with Next.js 13, React, Tailwind, Prisma, Stripe | Full Tutorial 2023. +1. Desired Allocation Poll: presents the user with a question asking how much they think should be spent on war (Option A) relative to clinical research (Option B). It includes a single slider input to allocate the percentage between the two options, along with two bars above the slider that dynamically visualize the allocation as the user adjusts the slider. The user submits their desired allocation by clicking the "Submit" button, and their response is saved in the browser's local storage. -[VIDEO TUTORIAL](https://www.youtube.com/watch?v=ffJ38dBzrlY) +2. Actual Allocation Poll: asking the user how much they think is actually spent on war (Option A) relative to clinical research (Option B). It includes the same slider input and dynamic bars for visualizing the allocation. The user submits their perceived actual allocation by clicking the "Submit" button, and their response is saved in the browser's local storage. -Features: +3. User Authentication: After completing both polls, the user is prompted to log in or register to view the results. They can log in using their email and password or through OAuth with Google. Upon successful login or registration, a new user record is created in the database, and their poll responses are retrieved from local storage and saved in the database. -- Tailwind design -- Tailwind animations and effects -- Full responsiveness -- Clerk Authentication (Email, Google, 9+ Social Logins) -- Client form validation and handling using react-hook-form -- Server error handling using react-toast -- Image Generation Tool (Open AI) -- Video Generation Tool (Replicate AI) -- Conversation Generation Tool (Open AI) -- Music Generation Tool (Replicate AI) -- Page loading state -- Stripe monthly subscription -- Free tier with API limiting -- How to write POST, DELETE, and GET routes in route handlers (app/api) -- How to fetch data in server react components by directly accessing database (WITHOUT API! like Magic!) -- How to handle relations between Server and Child components! -- How to reuse layouts -- Folder structure in Next 13 App Router +4. Results Page: After logging in, the user is directed to the Results page, which displays their desired and perceived actual allocation percentages between "War" and "Clinical Research" using bar visualizations. The page also shows the average desired and perceived actual allocation percentages from all users using bar visualizations, allowing the user to compare their responses to the average person. The page includes a link to the petition page. -### Prerequisites +5. Petition Page: presents information about the petition to shift 1% of military spending to clinical research. It includes a form for users to sign the petition by providing their name, email, address, city, state, and zip code. Upon successful submission, the user is redirected to a thank you page. -**Node version 18.x.x** +6. Thank You Page: displays a message thanking the user for signing the petition and provides information about the next steps or updates related to the petition. -### Cloning the repository +7. Profile Page: displays the user's unique referral link, which they can share with others to invite them to participate in the polls. It also shows a list of users who have signed up using the referral link, indicating whether they have completed the polls and signed the petition. -```shell -git clone https://github.com/AntonioErdeljac/next13-ai-saas.git -``` +8. Social Sharing: allows users to easily share their participation in the polls and petition on social media platforms, with pre-populated posts and relevant hashtags. -### Install packages +9. Email Notifications: sends email notifications to users after they complete the polls, sign the petition, or refer someone to the app. Users can opt-out of email notifications if desired. -```shell -npm i -``` +10. Localization: allows the app to support multiple languages based on the user's browser settings or a language selector, ensuring that the app's content, including questions and instructions, can be easily translated. -### Setup .env file +11. Gamification: introduces gamification elements to encourage user participation and engagement, such as a points or badge system for completing polls, signing the petition, or referring others. It may also include leaderboards to showcase top referrers or most active participants. +12. Personalized Experience: tailors the app's content and recommendations based on the user's previous interactions and preferences, providing personalized insights or comparisons based on their poll responses and suggesting related petitions or initiatives that align with their interests. -```js -NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY= -CLERK_SECRET_KEY= - -NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in -NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up -NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard -NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard - -OPENAI_API_KEY= -REPLICATE_API_TOKEN= - -DATABASE_URL= - -STRIPE_API_KEY= -STRIPE_WEBHOOK_SECRET= - -NEXT_PUBLIC_APP_URL="http://localhost:3000" -``` - -### Setup Prisma - -Add MySQL Database (I used PlanetScale) - -```shell -npx prisma db push - -``` - -### Start the app - -```shell -npm run dev -``` - -## Available commands - -Running commands with npm `npm run [command]` - -| command | description | -| :-------------- | :--------------------------------------- | -| `dev` | Starts a development instance of the app | +13. Data Visualization: enhances the Results page with interactive data visualizations, such as dynamic charts or graphs, allowing users to explore and compare the poll results based on different criteria, such as demographics or location. It may also provide downloadable reports or infographics for users to share or use in their advocacy efforts. diff --git a/__tests__/activity/activity-item.test.tsx b/__tests__/activity/activity-item.test.tsx new file mode 100644 index 00000000..4e1bc467 --- /dev/null +++ b/__tests__/activity/activity-item.test.tsx @@ -0,0 +1,57 @@ +import { render, screen } from "@testing-library/react" + +import { ActivityItem } from "@/components/activity/activity-item" + +jest.mock("next/navigation", () => ({ + useRouter() { + return { + prefetch: () => null, + } + }, +})) + +describe("ActivityItem", () => { + const activity = { + id: "1", + name: "Test Activity", + description: "This is a test activity", + colorCode: "#FF0000", + createdAt: new Date("2023-01-01T00:00:00"), + } + + it("renders activity name and description", () => { + render() + + const nameElement = screen.getByText(activity.name) + const descriptionElement = screen.getByText(activity.description) + + expect(nameElement).toBeInTheDocument() + expect(descriptionElement).toBeInTheDocument() + }) + + it("renders activity color code", () => { + render() + + const colorCodeElement = screen.getByTestId("color-code") + + expect(colorCodeElement).toHaveStyle( + `background-color: ${activity.colorCode}` + ) + }) + + it("renders activity creation date", () => { + render() + + const createdAtElement = screen.getByText("Jan 1, 2023") + + expect(createdAtElement).toBeInTheDocument() + }) + + it("links to the activity details page", () => { + render() + + const linkElement = screen.getByRole("link") + + expect(linkElement).toHaveAttribute("href", "/dashboard/activities/1") + }) +}) diff --git a/__tests__/activity/activity-operations.test.tsx b/__tests__/activity/activity-operations.test.tsx new file mode 100644 index 00000000..ebb6a010 --- /dev/null +++ b/__tests__/activity/activity-operations.test.tsx @@ -0,0 +1,24 @@ +import { render, screen } from "@testing-library/react" + +import { ActivityOperations } from "@/components/activity/activity-operations" + +jest.mock("next/navigation", () => ({ + useRouter() { + return { + prefetch: () => null, + } + }, +})) + +// TODO: more test cases + +describe("ActivityOperations component", () => { + const mockActivity = { + id: "1", + } + + it("renders without crashing", () => { + render() + expect(screen.getByText("Open")).toBeInTheDocument() + }) +}) diff --git a/__tests__/activity/stats/stats-card.test.tsx b/__tests__/activity/stats/stats-card.test.tsx new file mode 100644 index 00000000..cd5cde76 --- /dev/null +++ b/__tests__/activity/stats/stats-card.test.tsx @@ -0,0 +1,56 @@ +import { render, RenderResult } from "@testing-library/react" + +import { StatsCards } from "@/components/activity/stats/stats-cards" + +describe("StatsCards", () => { + let data: { + streak: { + currentStreak: number + longestStreak: number + } + totalLogs: number + dailyAverage: number + } + let searchParams: { + from: string + to: string + } + let getByText: RenderResult["getByText"] + + // Mock data + beforeEach(() => { + data = { + streak: { + currentStreak: 5, + longestStreak: 10, + }, + totalLogs: 100, + dailyAverage: 7, + } + + searchParams = { + from: "2022-01-01", + to: "2022-12-31", + } + ;({ getByText } = render( + + )) + }) + + test("Render streaks properly", () => { + expect(getByText("Current Streak")).toBeInTheDocument() + expect(getByText("Longest Streak")).toBeInTheDocument() + expect(getByText("5")).toBeInTheDocument() + expect(getByText("10")).toBeInTheDocument() + }) + + test("Render total logs properly", () => { + expect(getByText("Total Logs")).toBeInTheDocument() + expect(getByText("100")).toBeInTheDocument() + }) + + test("Render daily average properly", () => { + expect(getByText("Daily Average")).toBeInTheDocument() + expect(getByText("7")).toBeInTheDocument() + }) +}) diff --git a/__tests__/dashboard/dashboard-cards.test.tsx b/__tests__/dashboard/dashboard-cards.test.tsx new file mode 100644 index 00000000..a7c3d45a --- /dev/null +++ b/__tests__/dashboard/dashboard-cards.test.tsx @@ -0,0 +1,56 @@ +import { render, RenderResult } from "@testing-library/react" + +import { DashboardCards } from "@/components/pages/dashboard/dashboard-cards" + +describe("DashboardCards", () => { + let data: { + streak: { + currentStreak: number + longestStreak: number + } + totalLogs: number + mostLoggedActivity: string + } + let searchParams: { + from: string + to: string + } + let getByText: RenderResult["getByText"] + + // Mock data + beforeEach(() => { + data = { + streak: { + currentStreak: 5, + longestStreak: 10, + }, + totalLogs: 100, + mostLoggedActivity: "Running", + } + + searchParams = { + from: "2022-01-01", + to: "2022-12-31", + } + ;({ getByText } = render( + + )) + }) + + test("Render streaks properly", () => { + expect(getByText("Current Streak")).toBeInTheDocument() + expect(getByText("Longest Streak")).toBeInTheDocument() + expect(getByText("5")).toBeInTheDocument() + expect(getByText("10")).toBeInTheDocument() + }) + + test("Render total logs properly", () => { + expect(getByText("Total Logs")).toBeInTheDocument() + expect(getByText("100")).toBeInTheDocument() + }) + + test("Render most logged activity properly", () => { + expect(getByText("Most Logged Activity")).toBeInTheDocument() + expect(getByText("Running")).toBeInTheDocument() + }) +}) diff --git a/__tests__/dashboard/dashboard-header.test.tsx b/__tests__/dashboard/dashboard-header.test.tsx new file mode 100644 index 00000000..f3b3c166 --- /dev/null +++ b/__tests__/dashboard/dashboard-header.test.tsx @@ -0,0 +1,44 @@ +import { render } from "@testing-library/react" + +import { DashboardHeader } from "@/components/pages/dashboard/dashboard-header" + +describe("DashboardHeader", () => { + let heading: string + let text: string + + // Mock data + beforeEach(() => { + heading = "Dashboard" + text = "Shows your activities" + }) + + test("renders heading and text correctly", () => { + const { getByText } = render( + + ) + + expect(getByText(heading)).toBeInTheDocument() + expect(getByText(text)).toBeInTheDocument() + }) + + test("Renders heading without text", () => { + const { getByText, queryByText } = render( + + ) + + expect(getByText(heading)).toBeInTheDocument() + expect(queryByText("Test Text")).toBeNull() + }) + + test("renders children correctly", () => { + const { getByText } = render( + +
Test children
+ + ) + + expect(getByText(heading)).toBeInTheDocument() + expect(getByText(text)).toBeInTheDocument() + expect(getByText("Test children")).toBeInTheDocument() + }) +}) diff --git a/__tests__/dashboard/dashboard-nav.test.tsx b/__tests__/dashboard/dashboard-nav.test.tsx new file mode 100644 index 00000000..6c28bf54 --- /dev/null +++ b/__tests__/dashboard/dashboard-nav.test.tsx @@ -0,0 +1,25 @@ +import { render, screen } from "@testing-library/react" +import userEvent from "@testing-library/user-event" + +import { dashboardLinks } from "@/config/links" +import { DashboardNav } from "@/components/pages/dashboard/dashboard-nav" + +describe("DashboardNav", () => { + test("renders DashboardNav component with items", () => { + render() + + expect(screen.getByText("Dashboard")).toBeInTheDocument() + expect(screen.getByText("Activities")).toBeInTheDocument() + expect(screen.getByText("Settings")).toBeInTheDocument() + + userEvent.click(screen.getByText("Dashboard")) + }) + + test("renders DashboardNav component with no items", () => { + render() + + expect(screen.queryByText("Dashboard")).toBeNull() + expect(screen.queryByText("Activities")).toBeNull() + expect(screen.queryByText("Settings")).toBeNull() + }) +}) diff --git a/app/(auth)/(routes)/sign-in/[[...sign-in]]/page.tsx b/app/(auth)/(routes)/sign-in/[[...sign-in]]/page.tsx deleted file mode 100644 index 0d639461..00000000 --- a/app/(auth)/(routes)/sign-in/[[...sign-in]]/page.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import {SignIn, SignInButton} from "@clerk/nextjs"; - -export default function Page() { - return ( -
-

Are you a damn robot?

- - - -
- ); - //return ; -} \ No newline at end of file diff --git a/app/(auth)/(routes)/sign-up/[[...sign-up]]/page.tsx b/app/(auth)/(routes)/sign-up/[[...sign-up]]/page.tsx deleted file mode 100644 index 3ac029cc..00000000 --- a/app/(auth)/(routes)/sign-up/[[...sign-up]]/page.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { SignUp } from "@clerk/nextjs"; - -export default function Page() { - return ; -}; diff --git a/app/(auth)/error.tsx b/app/(auth)/error.tsx deleted file mode 100644 index 032711e6..00000000 --- a/app/(auth)/error.tsx +++ /dev/null @@ -1,11 +0,0 @@ -"use client"; - -import { Empty } from "@/components/ui/empty"; - -const Error = () => { - return ( - - ); -} - -export default Error; diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx deleted file mode 100644 index 21f23ef1..00000000 --- a/app/(auth)/layout.tsx +++ /dev/null @@ -1,13 +0,0 @@ -const AuthLayout = ({ - children -}: { - children: React.ReactNode; -}) => { - return ( -
- {children} -
- ); -} - -export default AuthLayout; \ No newline at end of file diff --git a/app/(auth)/signin/page.tsx b/app/(auth)/signin/page.tsx new file mode 100644 index 00000000..2a5029f8 --- /dev/null +++ b/app/(auth)/signin/page.tsx @@ -0,0 +1,49 @@ +import { Metadata } from "next" +import Link from "next/link" + +import { cn } from "@/lib/utils" +import { buttonVariants } from "@/components/ui/button" +import { Icons } from "@/components/icons" +import { UserAuthForm } from "@/components/user/user-auth-form" + +export const metadata: Metadata = { + title: "Sign in", + description: "Sign in to your account", +} + +export default function Signin() { + return ( +
+ + <> + + Back + + +
+
+

Sign in

+

+ Sign in to your account +

+
+ +

+ Don't have an account?{" "} + + Sign up + +

+
+
+ ) +} diff --git a/app/(auth)/signup/page.tsx b/app/(auth)/signup/page.tsx new file mode 100644 index 00000000..e349bd3d --- /dev/null +++ b/app/(auth)/signup/page.tsx @@ -0,0 +1,51 @@ +import { Metadata } from "next" +import Link from "next/link" + +import { cn } from "@/lib/utils" +import { buttonVariants } from "@/components/ui/button" +import { Icons } from "@/components/icons" +import { UserAuthForm } from "@/components/user/user-auth-form" + +export const metadata: Metadata = { + title: "Sign up", + description: "Create an account", +} + +export default function Signup() { + return ( +
+ + <> + + Back + + +
+
+

+ Create an account +

+

+ Select a provider to create your account +

+
+ +

+ Already have an account?{" "} + + Sign in + +

+
+
+ ) +} diff --git a/app/(dashboard)/(routes)/dashboard/page.tsx b/app/(dashboard)/(routes)/dashboard/page.tsx deleted file mode 100644 index 8ba48864..00000000 --- a/app/(dashboard)/(routes)/dashboard/page.tsx +++ /dev/null @@ -1,41 +0,0 @@ -"use client"; - -import { ArrowRight } from "lucide-react"; -import { useRouter } from "next/navigation"; - -import { Card } from "@/components/ui/card"; -import { cn } from "@/lib/utils"; - -import { tools } from "@/constants"; - -export default function HomePage() { - const router = useRouter(); - - return ( -
-
-

- Results -

-

- Global Referendum on War and Disease -

-
-
- {tools.map((tool) => ( - router.push(tool.href)} key={tool.href} className="p-4 border-black/5 flex items-center justify-between hover:shadow-md transition cursor-pointer"> -
-
- -
-
- {tool.label} -
-
- - - ))} -
-
- ); -} diff --git a/app/(dashboard)/(routes)/settings/constants.ts b/app/(dashboard)/(routes)/settings/constants.ts deleted file mode 100644 index b47aa1f5..00000000 --- a/app/(dashboard)/(routes)/settings/constants.ts +++ /dev/null @@ -1,7 +0,0 @@ -import * as z from "zod"; - -export const formSchema = z.object({ - prompt: z.string().min(1, { - message: "Prompt is required." - }), -}); diff --git a/app/(dashboard)/(routes)/settings/page.tsx b/app/(dashboard)/(routes)/settings/page.tsx deleted file mode 100644 index e947242a..00000000 --- a/app/(dashboard)/(routes)/settings/page.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { Settings } from "lucide-react"; - -import { Heading } from "@/components/heading"; -import { DonorButton } from "@/components/donor-button"; -import { checkSubscription } from "@/lib/subscription"; - -const SettingsPage = async () => { - const isDonor = await checkSubscription(); - - return ( -
- -
-
- {isDonor ? "You are currently on a Pro plan." : "You are currently on a free plan."} -
- -
-
- ); -} - -export default SettingsPage; - diff --git a/app/(dashboard)/error.tsx b/app/(dashboard)/error.tsx deleted file mode 100644 index 032711e6..00000000 --- a/app/(dashboard)/error.tsx +++ /dev/null @@ -1,11 +0,0 @@ -"use client"; - -import { Empty } from "@/components/ui/empty"; - -const Error = () => { - return ( - - ); -} - -export default Error; diff --git a/app/(dashboard)/layout.tsx b/app/(dashboard)/layout.tsx deleted file mode 100644 index 2536f3d7..00000000 --- a/app/(dashboard)/layout.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import Navbar from "@/components/navbar"; -import { Sidebar } from "@/components/sidebar"; -import { checkSubscription } from "@/lib/subscription"; -import { getApiLimitCount } from "@/lib/api-limit"; -import ChartContainer from "@/components/ui/chart-container"; - -const DashboardLayout = async ({ - children, -}: { - children: React.ReactNode -}) => { - const apiLimitCount = await getApiLimitCount(); - const isDonor = await checkSubscription(); - //const warPercentageDesired = localStorage.getItem("warPercentageDesired"); - - - return ( -
-
- -
-
- - {children} -
-
- ); -} - -export default DashboardLayout; diff --git a/app/(frontpage)/layout.tsx b/app/(frontpage)/layout.tsx new file mode 100644 index 00000000..d6bd3efa --- /dev/null +++ b/app/(frontpage)/layout.tsx @@ -0,0 +1,27 @@ +import { getCurrentUser } from "@/lib/session" +import Footer from "@/components/layout/footer" +import Navbar from "@/components/layout/navbar" + +interface FrontPageLayoutProps { + children: React.ReactNode +} + +export default async function FrontPageLayout({ + children, +}: FrontPageLayoutProps) { + const user = await getCurrentUser() + + return ( + <> + + {children} +