35 |
,
53 | {
54 | width: 1200,
55 | height: 630,
56 | },
57 | );
58 | }
59 |
60 | return new ImageResponse(
61 |
36 |
52 |
37 | {/* biome-ignore lint/a11y/useAltText: */}
38 | 
46 |
48 |
49 | Compare your favorite providers
50 |
51 |
46 | Deploys.top
47 |
74 |
,
101 | {
102 | width: 1200,
103 | height: 630,
104 | },
105 | );
106 | }
107 |
--------------------------------------------------------------------------------
/src/app/auth/actions/index.ts:
--------------------------------------------------------------------------------
1 | "use server";
2 | import { getSession, lucia } from "@/auth";
3 | import { cookies } from "next/headers";
4 | import { redirect } from "next/navigation";
5 |
6 | export const logout = async (redirectTo = "/") => {
7 | const { session } = await getSession();
8 | if (!session) {
9 | return {
10 | error: "Unauthorized",
11 | };
12 | }
13 |
14 | await lucia.invalidateSession(session.id);
15 |
16 | const sessionCookie = lucia.createBlankSessionCookie();
17 | (await cookies()).set(
18 | sessionCookie.name,
19 | sessionCookie.value,
20 | sessionCookie.attributes
21 | );
22 | return redirect(redirectTo);
23 | };
24 |
--------------------------------------------------------------------------------
/src/app/auth/github/callback/route.ts:
--------------------------------------------------------------------------------
1 | import { github, lucia } from "@/auth";
2 | import { cookies } from "next/headers";
3 | import { OAuth2RequestError } from "arctic";
4 | import { generateId } from "lucia";
5 | import { db } from "@/db";
6 | import type { NextRequest } from "next/server";
7 |
8 | export async function GET(request: NextRequest): Promise
75 |
100 |
76 | {/* biome-ignore lint/a11y/useAltText: */}
77 |
85 | ›
86 | {/* biome-ignore lint/a11y/useAltText: */}
87 | 
95 |
96 |
97 | Compare your favorite providers
98 |
99 |
85 | ›
86 | {/* biome-ignore lint/a11y/useAltText:
96 | {/*
101 | {children}
99 |
4 |
6 | );
7 | }
8 |
--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { GithubIcon } from "@/components/icons/github";
2 | import { ProvidersCarousel } from "@/components/providers-carousel";
3 | import { Button } from "@/components/ui/button";
4 | import { queries } from "@/lib/groq-queries";
5 | import { client } from "@/sanity/lib/client";
6 | import type { Provider } from "@/types/provider";
7 | import {
8 | ArrowUpRight,
9 | ChevronRight,
10 | LucideLayoutPanelLeft,
11 | } from "lucide-react";
12 | import Link from "next/link";
13 |
14 | export const revalidate = 5;
15 |
16 | export default async function Home() {
17 | const providers = await client.fetch404 | Page Not Found
5 |
20 |
89 | );
90 | }
91 |
--------------------------------------------------------------------------------
/src/app/providers/[provider]/actions/index.ts:
--------------------------------------------------------------------------------
1 | "use server";
2 |
3 | import { db } from "@/db";
4 |
5 | export async function vote(
6 | provider_id: string,
7 | user_id: string,
8 | vote_type: "upvote" | "downvote",
9 | currentVote: "upvote" | "downvote" | undefined
10 | ) {
11 | try {
12 | if (currentVote !== undefined) {
13 | if (currentVote === vote_type) {
14 | await db
15 | .deleteFrom("vote")
16 | .where("provider_id", "=", provider_id)
17 | .where("user_id", "=", user_id)
18 | .execute();
19 | return JSON.stringify(true);
20 | }
21 | await db
22 | .updateTable("vote")
23 | .set({
24 | vote_type,
25 | })
26 | .where("provider_id", "=", provider_id)
27 | .where("user_id", "=", user_id)
28 | .execute();
29 | return JSON.stringify(true);
30 | }
31 | await db
32 | .insertInto("vote")
33 | .values({
34 | provider_id,
35 | user_id,
36 | vote_type,
37 | })
38 |
39 | .execute();
40 |
41 | return JSON.stringify(true);
42 | } catch (error) {
43 | return JSON.stringify(error);
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/app/providers/[provider]/page.tsx:
--------------------------------------------------------------------------------
1 | import { getSession } from "@/auth";
2 | import { ProviderHeader } from "@/components/provider-header";
3 | import { ProviderServiceDialog } from "@/components/provider-service-dialog";
4 | import { Badge } from "@/components/ui/badge";
5 | import { Button } from "@/components/ui/button";
6 | import {
7 | Card,
8 | CardDescription,
9 | CardFooter,
10 | CardHeader,
11 | CardTitle,
12 | } from "@/components/ui/card";
13 | import {
14 | Popover,
15 | PopoverContent,
16 | PopoverTrigger,
17 | } from "@/components/ui/popover";
18 | import { db } from "@/db";
19 | import { queries } from "@/lib/groq-queries";
20 | import { cn } from "@/lib/utils";
21 | import { client } from "@/sanity/lib/client";
22 | import type { Provider } from "@/types/provider";
23 | import { LucideChevronLeft, LucideInfo } from "lucide-react";
24 | import type { Metadata } from "next";
25 | import Link from "next/link";
26 | import { notFound } from "next/navigation";
27 |
28 | export const revalidate = 3600; // Revalidate every hour
29 |
30 | export async function generateStaticParams() {
31 | // Fetch all providers
32 | const providers = await client.fetch
21 | {/*
22 |
23 | NEW › Compare providers
24 |
25 |
31 | */}
32 |
33 | 34 | Search & compare free and paid providers 35 |
36 |
37 | Find the best option for your needs quickly and easily!
38 |
We have +{providers.length} providers added on
39 | the list.
40 |
42 |
88 |
43 |
44 |
52 |
53 |
59 | {" "}
68 |
69 |
70 |
86 |
128 |
138 |
143 |
160 |
164 |
244 | {/*
248 | */}
268 |
269 | );
270 | }
271 |
--------------------------------------------------------------------------------
/src/app/providers/layout.tsx:
--------------------------------------------------------------------------------
1 | export default function ProvidersLayout({
2 | children,
3 | }: {
4 | children: React.ReactNode;
5 | }) {
6 | return Categories
144 |
145 | {provider.categories.map((category) => {
146 | if (!category) return null;
147 | return (
148 |
152 |
153 | {category.name}
154 |
155 |
156 | );
157 | })}
158 |
159 |
165 |
167 |
168 |
171 |
172 | Click on each service card to see more info.
173 |
174 |
175 |
176 | Services Offered
166 |
177 | {provider.services_offered.map((service) => (
178 |
183 |
189 | {service.pricing.plans.find((pl) =>
190 | pl.name.toLowerCase().includes("free"),
191 | ) && (
192 |
197 |
198 | {service.name}
199 |
200 |
201 | {service.description ??
202 | "No description provided for this service."}
203 |
204 |
205 |
206 | {service.supported_types && (
207 | <>
208 |
239 |
240 |
241 | ))}
242 |
243 |
193 | Free Tier
194 |
195 | )}
196 |
209 | {service.supported_types.slice(0, 5).map((type) => (
210 |
211 | {type}
212 |
213 | ))}
214 | {service.supported_types.length > 5 && (
215 |
216 | +{service.supported_types.length - 5} more
217 |
218 | )}
219 |
220 |
221 | {service.supported_types.slice(0, 3).map((type) => (
222 |
223 | {type}
224 |
225 | ))}
226 |
227 | {service.supported_types?.length > 3 && (
228 |
232 | +{service.supported_types?.length - 3} more
233 |
234 | )}
235 |
236 |
237 | )}
238 |
249 |
251 | Tutorials / Documentation
250 |
252 |
267 |
253 | 
258 |
266 |
258 |
259 |
265 | Lorem ipsum dolor
260 | 261 | Lorem ipsum dolor sit amet consectetur adipisicing elit. bla bla 262 | elefante javascri. 263 | 264 |
27 |
28 | Providers
29 |
30 | Take a look at the list of providers we've gathered info on.
31 |
32 |
33 |
49 |
50 |
51 |
55 | );
56 | }
57 |
--------------------------------------------------------------------------------
/src/app/studio/[[...index]]/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import config from "@/../sanity.config";
4 | /**
5 | * This route is responsible for the built-in authoring environment using Sanity Studio.
6 | * All routes under your studio path is handled by this file using Next.js' catch-all routes:
7 | * https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes
8 | *
9 | * You can learn more about the next-sanity package here:
10 | * https://github.com/sanity-io/next-sanity
11 | */
12 | import { NextStudio } from "next-sanity/studio";
13 |
14 | export default function StudioPage() {
15 | return (
16 |
52 |
54 |
17 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/src/auth.ts:
--------------------------------------------------------------------------------
1 | import { Lucia, type User, type Session } from "lucia";
2 | import { LibSQLAdapter } from "@lucia-auth/adapter-sqlite";
3 | import { GitHub } from "arctic";
4 | import { client } from "./db";
5 | import { cookies } from "next/headers";
6 | import { cache } from "react";
7 |
8 | const adapter = new LibSQLAdapter(client, {
9 | user: "user",
10 | session: "session",
11 | });
12 |
13 | export const github = new GitHub(
14 | // biome-ignore lint/style/noNonNullAssertion:
15 | process.env.GITHUB_CLIENT_ID!,
16 | // biome-ignore lint/style/noNonNullAssertion:
17 | process.env.GITHUB_CLIENT_SECRET!
18 | );
19 |
20 | export const lucia = new Lucia(adapter, {
21 | sessionCookie: {
22 | expires: false,
23 | attributes: {
24 | secure: process.env.NODE_ENV === "production",
25 | },
26 | },
27 | getUserAttributes: (attributes) => {
28 | return {
29 | // attributes has the type of DatabaseUserAttributes
30 | githubId: attributes.github_id,
31 | username: attributes.username,
32 | avatar_url: attributes.avatar_url,
33 | };
34 | },
35 | });
36 |
37 | export const getSession = cache(
38 | async (): Promise<
39 | { user: User; session: Session } | { user: null; session: null }
40 | > => {
41 | const sessionId = (await cookies()).get(lucia.sessionCookieName)?.value ?? null;
42 | if (!sessionId) {
43 | return {
44 | user: null,
45 | session: null,
46 | };
47 | }
48 |
49 | const result = await lucia.validateSession(sessionId);
50 | // next.js throws when you attempt to set cookie when rendering page
51 | try {
52 | if (result.session?.fresh) {
53 | const sessionCookie = lucia.createSessionCookie(result.session.id);
54 | (await cookies()).set(
55 | sessionCookie.name,
56 | sessionCookie.value,
57 | sessionCookie.attributes
58 | );
59 | }
60 | if (!result.session) {
61 | const sessionCookie = lucia.createBlankSessionCookie();
62 | (await cookies()).set(
63 | sessionCookie.name,
64 | sessionCookie.value,
65 | sessionCookie.attributes
66 | );
67 | }
68 | } catch {}
69 | return result;
70 | }
71 | );
72 |
73 | declare module "lucia" {
74 | interface Register {
75 | Lucia: typeof lucia;
76 | }
77 | }
78 |
79 | declare module "lucia" {
80 | interface Register {
81 | Lucia: typeof lucia;
82 | DatabaseUserAttributes: DatabaseUserAttributes;
83 | }
84 | }
85 |
86 | interface DatabaseUserAttributes {
87 | github_id: number;
88 | username: string;
89 | avatar_url: string;
90 | }
91 |
--------------------------------------------------------------------------------
/src/components/header.tsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NoHaxito/deploys-top/6092c6bde67aa1100cf3b07b338b1f50d2f56835/src/components/header.tsx
--------------------------------------------------------------------------------
/src/components/icons/github.tsx:
--------------------------------------------------------------------------------
1 | import type { SVGProps } from "react";
2 |
3 | export const GithubIcon = (props: SVGProps
20 |
68 | );
69 | }
70 |
71 | export const ListItem = React.forwardRef<
72 | React.ElementRef<"a">,
73 | React.ComponentPropsWithoutRef<"a"> & {
74 | providerIcon?: string; // because its a image (url)
75 | }
76 | >(({ className, title, children, providerIcon, href, ...props }, ref) => {
77 | const pathname = usePathname();
78 | return (
79 |
21 | {mostVoted && (
22 |
26 |
40 |
43 |
44 | )}
45 |
46 |
47 | {mostVoted?.name}
27 | 28 | {mostVoted?.description} 29 | 30 | 39 |-
48 | {first6FreeProviders.map((provider) => (
49 |
59 |
63 | See all free providers ({providers.length})
64 |
65 |
66 |
92 | {providerIcon && (
93 | 
101 | )}
102 |
103 |
112 |
113 |
104 |
111 |
105 | {title}
106 |
107 | 108 | {children} 109 |
110 |
46 |
60 | );
61 |
62 | export function Navbar(props: HTMLAttributes
65 | 
73 |
166 |
167 | 74 | {provider.name} 75 |
76 |77 | {provider.description} 78 |
79 |
80 |
90 |
116 |
91 |
102 |
114 |
115 |
117 |
165 |
118 |
140 |
164 |
54 |
66 |
67 | {service.name}
68 |
69 |
70 | View information about the{" "}
71 |
72 | {service.name}
73 | {" "}
74 | service offered by{" "}
75 |
76 | {provider.name}
77 |
78 | .
79 |
80 |
81 |
82 |
83 |
55 | {service.supported_types?.map((type) => (
56 |
61 | {type}
62 |
63 | ))}
64 |
65 |
84 | {open && (
85 |
92 | {service.pricing.plans.map((plan) => (
93 |
98 |
99 |
105 |
106 |
155 |
156 | ))}
157 |
158 | )}
159 |
160 |
161 |
100 |
101 | {plan.name}
102 |
103 |
104 |
107 | {plan.plan_features.map((feature) => (
108 |
112 |
116 |
117 |
121 |
122 |
123 | {feature.values.map(
124 | ({ key, value }, index: number) => (
125 |
149 |
150 |
151 |
152 | ))}
153 |
154 | 118 | {feature.name} 119 |
120 |
132 |
146 | ),
147 | )}
148 | 133 | {key.replaceAll("_", " ")} 134 |
135 | 136 | {value.toLowerCase() === "true" ? ( 137 |142 | {value} 143 |
144 | )} 145 |
53 |
55 | );
56 |
57 | const FilterButton = ({ isFiltering }: { isFiltering: boolean }) => (
58 |
70 | );
71 |
72 | const FreeTierFilter = ({
73 | freeProviders,
74 | providers,
75 | handleFreeProvidersChange,
76 | }: Pick<
77 | FilterPopoverProps,
78 | "freeProviders" | "providers" | "handleFreeProvidersChange"
79 | >) => (
80 |
163 |
165 |
169 | Clear filters
170 |
171 |
172 |
173 | )}
174 |
79 |
85 | )}
86 |
87 | ) : (
88 | <>No providers found {/* Add a UI State for this. */}
89 | )}
90 |
91 | );
92 | }
93 |
--------------------------------------------------------------------------------
/src/components/providers/provider-bottom-bar.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import type { Provider } from "@/types/provider";
3 | import { Button } from "../ui/button";
4 | import { LucideChevronLeft, LucideDollarSign, LucideGlobe } from "lucide-react";
5 | import Link from "next/link";
6 |
7 | export function ProviderBottomBar({
8 | show,
9 | provider,
10 | }: { show: boolean; provider: Provider }) {
11 | return (
12 | No results
81 | 82 | Try with another search parameter or filter. 83 | 84 |
18 |
59 | );
60 | }
61 |
--------------------------------------------------------------------------------
/src/components/providers/provider-card.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Button } from "@/components/ui/button";
4 | import {
5 | Popover,
6 | PopoverContent,
7 | PopoverTrigger,
8 | } from "@/components/ui/popover";
9 | import { cn, isAwsProvider } from "@/lib/utils";
10 | import type { Provider } from "@/types/provider";
11 | import { LucideStars } from "lucide-react";
12 | import Link from "next/link";
13 | import type React from "react";
14 | import { useRef, useState } from "react";
15 |
16 | export function ProviderCard({ provider }: { provider: Provider }) {
17 | const linkRef = useRef
19 |
58 |
20 |
29 |
34 |
36 | {provider.name}
35 |
37 |
46 |
56 |
57 |
59 |
63 |
70 |
77 |
86 |
95 |
96 |
106 |
107 |
108 | Good Free Tier
109 |
110 |
111 | )}
112 |
113 | );
114 | }
115 |
--------------------------------------------------------------------------------
/src/components/providers/toolbar.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import type { Category } from "@/types/category";
4 | import type { Provider } from "@/types/provider";
5 | import { LucideFilterX, LucideLoader2, LucideSearch } from "lucide-react";
6 | import { useTransition } from "react";
7 | import { Button } from "../ui/button";
8 | import { Input } from "../ui/input";
9 | import { FilterPopover } from "./filter-popover";
10 | import {
11 | parseAsArrayOf,
12 | parseAsBoolean,
13 | parseAsString,
14 | useQueryState,
15 | } from "nuqs";
16 |
17 | export interface Filter {
18 | query: string;
19 | category: string[];
20 | freeProviders: boolean;
21 | }
22 |
23 | export function ProviderToolbar({
24 | providers,
25 | }: {
26 | providers: Provider[];
27 | }) {
28 | const [isPending, startTransition] = useTransition();
29 | const [query, setQuery] = useQueryState(
30 | "query",
31 | parseAsString.withDefault(""),
32 | );
33 | const [category, setCategory] = useQueryState(
34 | "category",
35 | parseAsArrayOf(parseAsString).withDefault([]),
36 | );
37 | const [freeProviders, setFreeProviders] = useQueryState(
38 | "freeProviders",
39 | parseAsBoolean.withDefault(false),
40 | );
41 |
42 | const categories = providers.flatMap((provider) =>
43 | provider.categories.map((category) => category),
44 | );
45 |
46 | const isFiltering = query !== "" || category.length > 0 || freeProviders;
47 |
48 | const uniqueCategories: Category[] = Array.from(
49 | new Set(categories.map((category) => JSON.stringify(category))),
50 | ).map((category) => JSON.parse(category));
51 |
52 | const handleQueryChange = (e: React.ChangeEvent
87 |
92 |
93 | {provider.good_free_tier && (
94 | {provider.name}
88 | 89 | {provider.description} 90 | 91 |
87 |
131 | );
132 | }
133 |
--------------------------------------------------------------------------------
/src/components/search-menu.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | Check,
5 | LucideArrowRight,
6 | LucideCommand,
7 | LucideGrid2X2,
8 | LucideLoader2,
9 | LucideMonitor,
10 | LucideMoon,
11 | LucideSearch,
12 | LucideSun,
13 | } from "lucide-react";
14 | import * as React from "react";
15 |
16 | import {
17 | CommandDialog,
18 | CommandEmpty,
19 | CommandGroup,
20 | CommandInput,
21 | CommandItem,
22 | CommandList,
23 | CommandSeparator,
24 | } from "@/components/ui/command";
25 | import { requestUrl } from "@/config";
26 | import { queries } from "@/lib/groq-queries";
27 | import { client } from "@/sanity/lib/client";
28 | import type { Provider } from "@/types/provider";
29 | import { useTheme } from "next-themes";
30 | import Image from "next/image";
31 | import { useRouter } from "next/navigation";
32 | import { GithubIcon } from "./icons/github";
33 | import { Button } from "./ui/button";
34 |
35 | export function SearchMenu() {
36 | const router = useRouter();
37 | const [open, setOpen] = React.useState(false);
38 | const [providers, setProviders] = React.useState
88 |
89 |
104 |
105 | {isFiltering && (
106 |
116 | )}
117 |
118 |
130 | No results found.
110 |111 | Try searching for a provider name or feature. 112 |
113 |
183 |
185 | ) : (
186 | providers.map((provider) => (
187 |
197 |
202 |
203 |
204 |
211 | 205 | {provider.name} 206 |
207 | 208 | {provider.description} 209 | 210 |
218 |
249 |
219 |
230 |
231 |
232 | ↑↓
233 |
234 |
235 | to navigate
236 |
237 |
238 | enter
239 |
240 |
241 | to select
242 |
243 |
244 | esc
245 |
246 | to close
247 |
248 | {children}
62 |
92 |
94 | )}
95 |
98 |
100 | )}
101 |
146 | {children}
147 |
148 |
162 |
171 |
172 | );
173 | });
174 | CarouselContent.displayName = "CarouselContent";
175 |
176 | const CarouselItem = React.forwardRef<
177 | HTMLDivElement,
178 | React.HTMLAttributes
55 |
65 | ));
66 |
67 | CommandInput.displayName = CommandPrimitive.Input.displayName;
68 |
69 | const CommandList = React.forwardRef<
70 | React.ElementRef
124 | {children}
125 |
126 | );
127 | };
128 |
129 | const CredenzaFooter = ({ className, children, ...props }: CredenzaProps) => {
130 | const isDesktop = useMediaQuery(desktop);
131 | const CredenzaFooter = isDesktop ? DialogFooter : DrawerFooter;
132 |
133 | return (
134 |
61 |
69 | ));
70 | NavigationMenuViewport.displayName = Primitive.Viewport.displayName;
71 |
72 | export {
73 | NavigationMenu,
74 | NavigationMenuList,
75 | NavigationMenuItem,
76 | NavigationMenuContent,
77 | NavigationMenuTrigger,
78 | NavigationMenuLink,
79 | NavigationMenuViewport,
80 | };
81 |
--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as DialogPrimitive from "@radix-ui/react-dialog";
4 | import { XIcon } from "lucide-react";
5 | import type * as React from "react";
6 |
7 | import { cn } from "@/lib/utils";
8 |
9 | function Dialog({
10 | ...props
11 | }: React.ComponentProps
112 |
121 | )
122 | }
123 |
124 | function NavigationMenuLink({
125 | className,
126 | ...props
127 | }: React.ComponentProps
22 |
25 | );
26 | }
27 |
28 | function PageHeaderTitle({
29 | icon,
30 | className,
31 | ...props
32 | }: React.HTMLAttributes{childrenWithoutActions}
23 | {actions}
24 |
37 | {icon && icon}
38 |
45 |
46 | );
47 | }
48 |
49 | function PageHeaderDescription({
50 | className,
51 | ...props
52 | }: React.HTMLAttributes
11 |
13 | );
14 |
15 | export const LucideIcon = ({ name, ...props }: IconProps) => {
16 | const Icon = React.useMemo(
17 | () =>
18 | dynamic(dynamicIconImports[name as keyof typeof dynamicIconImports], {
19 | loading: () => fallback,
20 | }),
21 | [],
22 | );
23 |
24 | return