├── .gitignore ├── packages ├── client │ ├── README.md │ ├── src │ │ ├── hooks │ │ │ ├── index.ts │ │ │ ├── useUserApartments.ts │ │ │ └── useApartments.ts │ │ ├── react-app-env.d.ts │ │ ├── API │ │ │ ├── index.ts │ │ │ ├── fetcher.ts │ │ │ ├── user.ts │ │ │ └── apartments.ts │ │ ├── components │ │ │ ├── MyApartments.module.css │ │ │ ├── Footer.tsx │ │ │ ├── Footer.module.css │ │ │ ├── Button.tsx │ │ │ ├── Apartments.tsx │ │ │ ├── Button.module.css │ │ │ ├── Header.module.css │ │ │ ├── MyApartments.tsx │ │ │ ├── Header.tsx │ │ │ ├── ApartmentCard.module.css │ │ │ └── ApartmentCard.tsx │ │ ├── assets │ │ │ ├── fonts │ │ │ │ └── Quicksand-Regular.ttf │ │ │ └── clerk-logo.svg │ │ ├── types │ │ │ └── index.ts │ │ ├── utils │ │ │ └── cookies.ts │ │ ├── layouts │ │ │ ├── GridLayout.tsx │ │ │ └── GridLayout.module.css │ │ ├── App.test.tsx │ │ ├── index.tsx │ │ ├── index.css │ │ └── App.tsx │ ├── public │ │ ├── img │ │ │ ├── apartment.jpg │ │ │ └── clerk-logo.svg │ │ └── index.html │ ├── .env.example │ ├── .gitignore │ ├── tsconfig.json │ └── package.json ├── db │ ├── src │ │ ├── models │ │ │ ├── index.ts │ │ │ └── Apartment.ts │ │ ├── types.ts │ │ └── index.ts │ ├── .env.example │ ├── package.json │ ├── schema.prisma │ └── README.md └── server │ ├── tsconfig.json │ ├── src │ ├── auth │ │ └── clerkHandler.ts │ ├── index.ts │ └── routes │ │ ├── apartments.ts │ │ └── user.ts │ └── package.json ├── .vscode └── extensions.json ├── docs ├── cfrp.png └── show.png ├── .env.example ├── tsconfig.json ├── package.json └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .env 2 | .env.local 3 | node_modules -------------------------------------------------------------------------------- /packages/client/README.md: -------------------------------------------------------------------------------- 1 | # @cfrp/client 2 | -------------------------------------------------------------------------------- /packages/db/src/models/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Apartment"; 2 | -------------------------------------------------------------------------------- /packages/client/src/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./useApartments"; 2 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["prisma.prisma"] 3 | } 4 | -------------------------------------------------------------------------------- /packages/client/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /packages/client/src/API/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./apartments"; 2 | export * from "./user"; 3 | -------------------------------------------------------------------------------- /packages/db/.env.example: -------------------------------------------------------------------------------- 1 | # You can use the connection string from MongodDB atlas 2 | DATABASE_URL= -------------------------------------------------------------------------------- /docs/cfrp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clerk/clerk-fastify-react-prisma-starter/HEAD/docs/cfrp.png -------------------------------------------------------------------------------- /docs/show.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clerk/clerk-fastify-react-prisma-starter/HEAD/docs/show.png -------------------------------------------------------------------------------- /packages/client/src/components/MyApartments.module.css: -------------------------------------------------------------------------------- 1 | .homeLink { 2 | font-weight: 500; 3 | color: #4979ab; 4 | } 5 | -------------------------------------------------------------------------------- /packages/client/public/img/apartment.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clerk/clerk-fastify-react-prisma-starter/HEAD/packages/client/public/img/apartment.jpg -------------------------------------------------------------------------------- /packages/server/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "module": "commonjs" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/client/src/assets/fonts/Quicksand-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clerk/clerk-fastify-react-prisma-starter/HEAD/packages/client/src/assets/fonts/Quicksand-Regular.ttf -------------------------------------------------------------------------------- /packages/client/.env.example: -------------------------------------------------------------------------------- 1 | # Clerk API endpoint for your application. You can retrieve it from https://dashboard.clerk.dev 2 | REACT_APP_CLERK_PUBLISHABLE_KEY= 3 | # The backend API host 4 | REACT_APP_API_HOST= -------------------------------------------------------------------------------- /packages/client/src/types/index.ts: -------------------------------------------------------------------------------- 1 | import { Apartment as ApartmentModelType } from "@cfrp/db"; 2 | 3 | export type Apartment = Pick< 4 | ApartmentModelType, 5 | "id" | "amenities" | "title" | "price" | "imageURL" | "claimedBy" 6 | >; 7 | -------------------------------------------------------------------------------- /packages/client/src/utils/cookies.ts: -------------------------------------------------------------------------------- 1 | export function getCookie(name: string) { 2 | const value = `; ${document.cookie}`; 3 | const parts = value.split(`; ${name}=`); 4 | if (parts.length === 2) return parts.pop()!.split(";").shift(); 5 | } 6 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | # Port on which the server will receive connections 2 | SERVER_PORT= 3 | # Origin of the client app 4 | CLIENT_ORIGIN= 5 | # Clerk Secret for your application backend. You can retrieve it from https://dashboard.clerk.dev under Settings → API Keys 6 | CLERK_SECRET_KEY= 7 | -------------------------------------------------------------------------------- /packages/client/src/layouts/GridLayout.tsx: -------------------------------------------------------------------------------- 1 | import styles from "./GridLayout.module.css"; 2 | 3 | export function GridLayout({ children }: { children: React.ReactNode }) { 4 | return ( 5 |
6 |
{children}
7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /packages/client/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "./", 4 | "esModuleInterop": true, 5 | "lib": ["dom", "dom.iterable", "esnext"], 6 | "module": "ESNEXT", 7 | "moduleResolution": "node", 8 | "resolveJsonModule": true, 9 | "paths": {}, 10 | "strict": true, 11 | "target": "ESNEXT" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/client/src/components/Footer.tsx: -------------------------------------------------------------------------------- 1 | import styles from "./Footer.module.css"; 2 | 3 | export function Footer() { 4 | return ( 5 |
6 |
7 | ClerkApartments Inc. 8 |
9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /packages/client/src/layouts/GridLayout.module.css: -------------------------------------------------------------------------------- 1 | .apartments { 2 | max-width: 1100px; 3 | margin: 0 auto; 4 | } 5 | 6 | .grid { 7 | display: flex; 8 | flex-wrap: wrap; 9 | justify-content: space-around; 10 | } 11 | 12 | @media (min-width: 830px) { 13 | .grid { 14 | justify-content: space-between; 15 | margin: 0 8px; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/client/src/components/Footer.module.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | width: 100%; 3 | padding: 24px; 4 | border-top: 1px solid #e3dede; 5 | display: flex; 6 | position: fixed; 7 | bottom: 0; 8 | left: 0; 9 | } 10 | 11 | .contents { 12 | max-width: 1080px; 13 | } 14 | 15 | .footerTitle { 16 | opacity: 0.6; 17 | font-size: 1rem; 18 | letter-spacing: 1px; 19 | } 20 | -------------------------------------------------------------------------------- /packages/client/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import { BrowserRouter } from "react-router-dom"; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | 11 | 12 | , 13 | document.getElementById("root") 14 | ); 15 | -------------------------------------------------------------------------------- /packages/db/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@cfrp/db", 3 | "version": "1.0.0", 4 | "devDependencies": { 5 | "prisma": "^3.4.1" 6 | }, 7 | "dependencies": { 8 | "@prisma/client": "^3.4.1" 9 | }, 10 | "main": "src/index.ts", 11 | "scripts": { 12 | "generate": "prisma generate --schema ./schema.prisma", 13 | "studio": "prisma studio --schema ./schema.prisma" 14 | } 15 | } -------------------------------------------------------------------------------- /packages/client/src/API/fetcher.ts: -------------------------------------------------------------------------------- 1 | import { getCookie } from "../utils/cookies"; 2 | 3 | export function fetcher( 4 | path: string, 5 | options: RequestInit = {}, 6 | auth: boolean = false 7 | ) { 8 | return fetch(`${process.env.REACT_APP_API_HOST}${path}`, { 9 | headers: { 10 | ...(auth && { Authorization: `Bearer ${getCookie("__session")}` }), 11 | }, 12 | ...options, 13 | }); 14 | } 15 | -------------------------------------------------------------------------------- /packages/server/src/auth/clerkHandler.ts: -------------------------------------------------------------------------------- 1 | import { getAuth } from "@clerk/fastify"; 2 | import { FastifyRequest, FastifyReply } from "fastify"; 3 | 4 | export async function clerkPreHandler( 5 | req: FastifyRequest, 6 | reply: FastifyReply 7 | ) { 8 | const { sessionId } = getAuth(req); 9 | if (!sessionId) { 10 | reply.status(401); 11 | reply.send({ error: "User could not be verified" }); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/db/src/types.ts: -------------------------------------------------------------------------------- 1 | /** Prisma provides typings directly from the models you created using the `prisma generate` command */ 2 | export type { Apartment, Prisma } from "@prisma/client"; 3 | 4 | /** 5 | * Additionally it provides typings for all the operations that can be done on your Apartment model e.g.: 6 | * ApartmentCreateArgs, ApartmentDeleteArgs etc. 7 | * 8 | * These are exported from the Prisma namespace. 9 | */ 10 | -------------------------------------------------------------------------------- /packages/client/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /packages/db/src/index.ts: -------------------------------------------------------------------------------- 1 | import { PrismaClient } from "@prisma/client"; 2 | 3 | // Prevent multiple instances of Prisma Client in development 4 | declare const global: typeof globalThis & { prisma?: PrismaClient }; 5 | 6 | const prisma = global.prisma || new PrismaClient(); 7 | if (process.env.NODE_ENV === "development") global.prisma = prisma; 8 | 9 | export * from "./types"; 10 | export * from "./models"; 11 | export default prisma; 12 | -------------------------------------------------------------------------------- /packages/client/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": [ 4 | "src" 5 | ], 6 | "compilerOptions": { 7 | "allowSyntheticDefaultImports": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "isolatedModules": true, 10 | "noEmit": true, 11 | "jsx": "react-jsx", 12 | "allowJs": true, 13 | "skipLibCheck": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "module": "esnext" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/client/src/API/user.ts: -------------------------------------------------------------------------------- 1 | import { Apartment } from "../types"; 2 | import { fetcher } from "./fetcher"; 3 | 4 | export async function getUserApartments(): Promise { 5 | return await (await fetcher("/user/apartments", {}, true)).json(); 6 | } 7 | 8 | export async function foregoApartment(apartmentId: string) { 9 | return await fetcher( 10 | "/user/forego", 11 | { method: "POST", body: JSON.stringify({ apartmentId }) }, 12 | true 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /packages/db/schema.prisma: -------------------------------------------------------------------------------- 1 | datasource db { 2 | provider = "mongodb" 3 | url = env("DATABASE_URL") 4 | } 5 | 6 | generator client { 7 | provider = "prisma-client-js" 8 | previewFeatures = ["mongodb"] 9 | } 10 | 11 | model Apartment { 12 | id String @id @default(auto()) @map("_id") @db.ObjectId 13 | createdAt DateTime @default(now()) 14 | title String 15 | imageURL String 16 | amenities String[] 17 | price Int 18 | claimedBy String? 19 | } 20 | -------------------------------------------------------------------------------- /packages/server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@cfrp/server", 3 | "version": "1.0.0", 4 | "dependencies": { 5 | "@cfrp/db": "1.0.0", 6 | "@clerk/fastify": "^0.1.1", 7 | "dotenv": "^16.0.3", 8 | "fastify": "^4.12.0", 9 | "@fastify/cors": "^8.0.0", 10 | "fastify-env": "^2.2.0", 11 | "fastify-plugin": "^4.5.0" 12 | }, 13 | "devDependencies": { 14 | "@types/node": "^16.11.6" 15 | }, 16 | "main": "./src/index.ts" 17 | } 18 | -------------------------------------------------------------------------------- /packages/client/src/API/apartments.ts: -------------------------------------------------------------------------------- 1 | import { Apartment } from "../types"; 2 | import { fetcher } from "./fetcher"; 3 | 4 | export async function getApartments(): Promise { 5 | return await (await fetcher("/apartments")).json(); 6 | } 7 | 8 | export async function claimApartment(apartmentId: string): Promise { 9 | return await ( 10 | await fetcher( 11 | "/apartments/claim", 12 | { method: "POST", body: JSON.stringify({ apartmentId }) }, 13 | true 14 | ) 15 | ).json(); 16 | } 17 | -------------------------------------------------------------------------------- /packages/client/src/components/Button.tsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | import styles from "./Button.module.css"; 3 | 4 | type ButtonProps = { 5 | children: React.ReactNode; 6 | handleClick?: () => void; 7 | naked?: boolean; 8 | }; 9 | 10 | export function Button({ 11 | children, 12 | handleClick, 13 | naked = false, 14 | }: ButtonProps): JSX.Element { 15 | return ( 16 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /packages/client/src/components/Apartments.tsx: -------------------------------------------------------------------------------- 1 | import { ApartmentCard } from "./ApartmentCard"; 2 | import { useApartments } from "../hooks"; 3 | import { GridLayout } from "../layouts/GridLayout"; 4 | 5 | export function Apartments() { 6 | const { apartments, claimApartment } = useApartments(); 7 | 8 | return ( 9 | 10 | {apartments.map((apartment) => ( 11 | claimApartment(apartment.id)} 15 | /> 16 | ))} 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "clerk-fastify-react-prisma-starter", 4 | "workspaces": [ 5 | "packages/**/*" 6 | ], 7 | "scripts": { 8 | "server:dev": "nodemon --watch './packages/server/**/*.ts' --exec 'ts-node' ./packages/server/src/index.ts", 9 | "client:dev": "yarn workspace @cfrp/client start", 10 | "prisma:schema": "yarn workspace @cfrp/db generate", 11 | "prisma:studio": "yarn workspace @cfrp/db studio" 12 | }, 13 | "devDependencies": { 14 | "nodemon": "^2.0.14", 15 | "ts-node": "^10.4.0", 16 | "typescript": "^4.6.2" 17 | }, 18 | "engines": { 19 | "node": ">=14" 20 | }, 21 | "dependencies": {} 22 | } 23 | -------------------------------------------------------------------------------- /packages/client/src/components/Button.module.css: -------------------------------------------------------------------------------- 1 | .button { 2 | font-size: 1rem; 3 | height: 36px; 4 | padding: 0 24px; 5 | border-color: #4979ab; 6 | color: #4979ab; 7 | background: transparent; 8 | 9 | align-items: center; 10 | border-radius: 4px; 11 | border-style: solid; 12 | border-width: 2px; 13 | cursor: pointer; 14 | display: inline-flex; 15 | font-weight: 600; 16 | justify-content: center; 17 | line-height: 1; 18 | text-decoration: none; 19 | transition: background-color 0.3s ease, border 0.3s ease, color 0.3s ease, 20 | opacity 0.3s ease; 21 | } 22 | 23 | .button:hover { 24 | background-color: #f3f7fc; 25 | } 26 | 27 | .naked { 28 | border: none; 29 | padding: 0 6px; 30 | } 31 | -------------------------------------------------------------------------------- /packages/db/README.md: -------------------------------------------------------------------------------- 1 | # @cfrp/db 2 | 3 | To setup the Prisma MongoDB database connector you need to follow some specific steps: 4 | 5 | 0. (_Optional but recommended_): Because of the [transactional nature](https://www.prisma.io/docs/concepts/database-connectors/mongodb#example) of the Prisma MongoDB connector, your MongoDB should be in replica-set mode. To get started it is recommended to use a **free** [MongoDB Atlas](https://www.mongodb.com/cloud/atlas) database. 6 | 7 | 1. Create a `.env` file inside the **prisma** folder and add the `DATABASE_URL` value of the MongoDB database instance you would like to use. 8 | 9 | 2. Execute `yarn generate`, or `yarn prisma:schema` if you are in the top level of the monorepo, to generate the prisma-client files required. 10 | 11 | 3. (_Optional_): Execute `yarn studio` or `yarn prisma:studio` to open up the Prisma Studio instance, where you can add some test data for the app. 12 | -------------------------------------------------------------------------------- /packages/db/src/models/Apartment.ts: -------------------------------------------------------------------------------- 1 | import type { Prisma } from ".prisma/client"; 2 | import prisma from "../index"; 3 | 4 | export async function getApartments() { 5 | return await prisma.apartment.findMany(); 6 | } 7 | 8 | export async function claimApartment(id: string, userId: string) { 9 | return await prisma.apartment.update({ 10 | where: { id }, 11 | data: { claimedBy: userId }, 12 | }); 13 | } 14 | 15 | export async function getUserApartments(userId: string) { 16 | return await prisma.apartment.findMany({ where: { claimedBy: userId } }); 17 | } 18 | 19 | export async function getApartmentById(id: string) { 20 | return await prisma.apartment.findUnique({ where: { id } }); 21 | } 22 | 23 | export async function updateApartment( 24 | id: string, 25 | data: Prisma.ApartmentUpdateInput 26 | ) { 27 | return await prisma.apartment.update({ 28 | where: { id }, 29 | data, 30 | }); 31 | } 32 | -------------------------------------------------------------------------------- /packages/client/src/index.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Quicksand"; 3 | src: local("Quicksand"), 4 | url("./assets/fonts/Quicksand-Regular.ttf") format("truetype"); 5 | } 6 | 7 | body { 8 | margin: 0; 9 | font-family: "Quicksand", sans-serif; 10 | -webkit-font-smoothing: antialiased; 11 | -moz-osx-font-smoothing: grayscale; 12 | 13 | /* Common */ 14 | font-size: 1rem; 15 | font-style: normal; 16 | font-weight: 400; 17 | letter-spacing: -0.01rem; 18 | line-height: 1.571rem; 19 | color: #273656; 20 | } 21 | 22 | code { 23 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 24 | monospace; 25 | } 26 | 27 | * { 28 | box-sizing: border-box; 29 | } 30 | 31 | button { 32 | font-family: "Quicksand"; 33 | border: none; 34 | outline: none; 35 | background: none; 36 | cursor: pointer; 37 | } 38 | 39 | a { 40 | text-decoration: none; 41 | color: unset; 42 | } 43 | -------------------------------------------------------------------------------- /packages/server/src/index.ts: -------------------------------------------------------------------------------- 1 | import dotenv from "dotenv"; 2 | dotenv.config(); 3 | 4 | import fastify from "fastify"; 5 | import fastifyCors from "@fastify/cors"; 6 | import {clerkPlugin} from "@clerk/fastify"; 7 | import ApartmentRoutes from "./routes/apartments"; 8 | import UserRoutes from "./routes/user"; 9 | 10 | const server = fastify(); 11 | 12 | const start = async () => { 13 | try { 14 | await server.register(clerkPlugin); 15 | await server.register(fastifyCors, { 16 | origin: process.env.CLIENT_ORIGIN, 17 | allowedHeaders: ["Authorization"], 18 | }); 19 | 20 | await server.register(ApartmentRoutes); 21 | await server.register(UserRoutes); 22 | console.log('Listening to port: ', process.env.SERVER_PORT) 23 | await server.listen({ port: Number(process.env.SERVER_PORT) }); 24 | } catch (err) { 25 | server.log.error(err); 26 | process.exit(1); 27 | } 28 | }; 29 | 30 | start(); 31 | -------------------------------------------------------------------------------- /packages/client/src/components/Header.module.css: -------------------------------------------------------------------------------- 1 | .header { 2 | padding: 0 24px; 3 | align-items: center; 4 | box-sizing: border-box; 5 | display: flex; 6 | height: 64px; 7 | justify-content: space-between; 8 | border-bottom: 1px solid #e3dede; 9 | margin-bottom: 48px; 10 | } 11 | 12 | .logoLink { 13 | display: flex; 14 | align-items: center; 15 | } 16 | 17 | .logoRow { 18 | display: flex; 19 | align-items: center; 20 | } 21 | 22 | .logoRowTitle { 23 | margin-left: 0.5rem; 24 | font-size: 1.5rem; 25 | letter-spacing: 2px; 26 | display: none; 27 | } 28 | 29 | .authButtons button:nth-of-type(1) { 30 | margin-right: 6px; 31 | } 32 | 33 | .separator { 34 | width: 1px; 35 | background-color: #e3dede; 36 | height: 24px; 37 | margin: 0 14px 0 16px; 38 | } 39 | 40 | .logoRowLink { 41 | font-size: 1rem; 42 | } 43 | 44 | @media (min-width: 830px) { 45 | .logoRowTitle { 46 | display: block; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /packages/client/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { ClerkProvider } from "@clerk/clerk-react"; 2 | import { useNavigate } from "react-router-dom"; 3 | import { Apartments } from "./components/Apartments"; 4 | import { Header } from "./components/Header"; 5 | import { Routes, Route } from "react-router-dom"; 6 | import { MyApartments } from "./components/MyApartments"; 7 | import { Footer } from "./components/Footer"; 8 | 9 | // Get the Frontend API from the environment 10 | const publishableKey = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY || ""; 11 | 12 | function App() { 13 | const navigate = useNavigate(); 14 | return ( 15 | navigate(to)} 18 | > 19 |
20 | 21 | }> 22 | }> 23 | 24 |