13 |
14 |
18 |
19 | );
20 | };
21 |
22 | export default Start;
23 |
--------------------------------------------------------------------------------
/src/middleware.ts:
--------------------------------------------------------------------------------
1 | import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'
2 |
3 | const isProtectedRoute = createRouteMatcher(['/apply','/start'])
4 |
5 | export default clerkMiddleware((auth, req) => {
6 | if (isProtectedRoute(req)) auth().protect()
7 | })
8 |
9 | export const config = {
10 | matcher: [
11 | // Skip Next.js internals and all static files, unless found in search params
12 | '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
13 | // Always run for API routes
14 | '/(api|trpc)(.*)',
15 | ],
16 | }
--------------------------------------------------------------------------------
/src/components/ApplicationForm/ApplicationForm.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import "survey-core/defaultV2.min.css";
3 | import { Model } from "survey-core";
4 | import { Survey } from "survey-react-ui";
5 | import Container from "../Container";
6 |
7 | import { json } from "./json";
8 |
9 | const ApplicationForm = () => {
10 | const model = new Model(json);
11 | return (
12 |
15 |
17 |
13 |
14 |
18 |
19 | );
20 | };
21 |
22 | export default ApplicationForm;
23 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": ["dom", "dom.iterable", "esnext"],
4 | "allowJs": true,
5 | "skipLibCheck": true,
6 | "strict": true,
7 | "noEmit": true,
8 | "esModuleInterop": true,
9 | "module": "esnext",
10 | "moduleResolution": "bundler",
11 | "resolveJsonModule": true,
12 | "isolatedModules": true,
13 | "jsx": "preserve",
14 | "incremental": true,
15 | "plugins": [
16 | {
17 | "name": "next"
18 | }
19 | ],
20 | "paths": {
21 | "@/*": ["./src/*"]
22 | }
23 | },
24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 | "exclude": ["node_modules"]
26 | }
27 |
--------------------------------------------------------------------------------
/src/models/PostModel.ts:
--------------------------------------------------------------------------------
1 | import mongoose from "mongoose";
2 |
3 | const PostSchema = new mongoose.Schema(
4 | {
5 | title: {
6 | type: String,
7 | default: "No Title",
8 | min: 2,
9 | max: 100,
10 | // required: true
11 | },
12 | content: {
13 | type: String,
14 | default: "No content",
15 | min: 2,
16 | max: 100,
17 | },
18 | imageUrl: {
19 | type: String,
20 | default: "No content",
21 | min: 2,
22 | max: 100,
23 | },
24 | },
25 | { timestamps: true }
26 | );
27 |
28 | const Post = mongoose.models.Post || mongoose.model("Post", PostSchema);
29 | export default Post;
30 |
--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import ApplicationForm from "@/components/ApplicationForm/ApplicationForm";
2 | import Container from "@/components/Container";
3 | import { Faq } from "@/components/Faq/Faq";
4 | import Map from "@/components/Footer/Map";
5 | import Hero from "@/components/Hero/Hero";
6 | import Loan from "@/components/Loan/Loan";
7 | import Rates from "@/components/Rates/Rates";
8 | import Testimonial from "@/components/Testimonial/Testimonial";
9 |
10 | export default function Home() {
11 | return (
12 |
15 |
17 |
14 |
18 |
19 | );
20 | };
21 |
22 | export default ThemeToggler;
23 |
--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as LabelPrimitive from "@radix-ui/react-label"
5 | import { cva, type VariantProps } from "class-variance-authority"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const labelVariants = cva(
10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 |
13 | const Label = React.forwardRef<
14 | React.ElementRef
22 | {title && {title} }
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
4 |
16 | (+1) 416 869 8458
17 |
18 | );
19 | }
20 |
21 | export default Phone;
--------------------------------------------------------------------------------
/src/app/success/page.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import Link from "next/link";
3 |
4 | export default function SuccessPage() {
5 | return (
6 |
7 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/src/lib/connectToDb.tsx:
--------------------------------------------------------------------------------
1 | import mongoose from "mongoose";
2 |
3 | if (!process.env.MONGODB_URI) {
4 | throw new Error("Please add your MONGODB_URI to .env.local");
5 | }
6 |
7 | const MONGODB_URI: string = process.env.MONGODB_URI;
8 |
9 | let globalWithMongoose = global as typeof globalThis & {
10 | mongoose: any;
11 | };
12 | let cached = globalWithMongoose.mongoose;
13 |
14 | if (!cached) {
15 | cached = globalWithMongoose.mongoose = { conn: null, promise: null };
16 | }
17 |
18 | async function dbConnect() {
19 | if (cached.conn) {
20 | return cached.conn;
21 | }
22 |
23 | if (!cached.promise) {
24 | const opts = {
25 | bufferCommands: false,
26 | };
27 |
28 | cached.promise = mongoose.connect(MONGODB_URI, opts).then((mongoose) => {
29 | return mongoose;
30 | });
31 | }
32 | cached.conn = await cached.promise;
33 | console.log("connected")
34 | return cached.conn;
35 | }
36 |
37 | export default dbConnect;
38 |
--------------------------------------------------------------------------------
/src/components/Navbar/Profile.tsx:
--------------------------------------------------------------------------------
1 | // ⚠️ Developing
2 |
3 | "use client"
4 |
5 |
6 | // components/UserAvatar.tsx
7 | import { UserButton } from '@clerk/nextjs';
8 | import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
9 | import { useUser } from '@clerk/nextjs';
10 |
11 | const UserAvatar = () => {
12 | const { isLoaded, isSignedIn, user } = useUser();
13 |
14 | if (!isLoaded || !isSignedIn) {
15 | return
8 |
22 | 9 | Application Submitted Successfully! 10 |
11 |12 | Thank you for submitting your mortgage loan application. We will 13 | review your information and get back to you soon. 14 |
15 | 21 |Loading...
;
16 | }
17 |
18 | return (
19 |
14 |
15 |
29 |
30 | );
31 | };
32 |
33 | export default Blog;
34 |
--------------------------------------------------------------------------------
/prisma/schema.prisma:
--------------------------------------------------------------------------------
1 | // This is your Prisma schema file,
2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema
3 |
4 | // Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
5 | // Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
6 |
7 | generator client {
8 | provider = "prisma-client-js"
9 | }
10 |
11 | datasource db {
12 | provider = "mongodb"
13 | url = env("DATABASE_URL")
14 | }
15 |
16 | // Apply 4
17 | model MortgageApplication {
18 | id String @id @default(auto()) @map("_id") @db.ObjectId
19 | fullName String
20 | email String
21 | phoneNumber String
22 | loanAmount Float
23 | propertyValue Float
24 | creditScore Int
25 | employmentStatus String
26 | annualIncome Float
27 | createdAt DateTime @default(now())
28 | updatedAt DateTime @updatedAt
29 | }
30 |
31 | // New Post with Prisma
32 | model Postprisma {
33 | id String @id @default(auto()) @map("_id") @db.ObjectId
34 | title String
35 | description String
36 | imageUrl String?
37 | }
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 Milad Joodi
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
5 | import { CheckIcon } from "@radix-ui/react-icons"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const Checkbox = React.forwardRef<
10 | React.ElementRef
16 |
28 |
17 |
27 | My Blog Posts
18 |
19 | {posts !== undefined && posts?.map((post, index)=> (
20 |
26 |
21 |
23 | ))}
24 |
25 |
15 |
16 |
30 |
31 | );
32 | };
33 |
34 | export default BlogPrisma;
35 |
--------------------------------------------------------------------------------
/src/components/ui/slider.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SliderPrimitive from "@radix-ui/react-slider"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Slider = React.forwardRef<
9 | React.ElementRef
17 |
29 |
18 |
28 | My Blog Posts
19 |
20 | {posts !== undefined && posts?.map((post, index)=> (
21 |
27 |
22 |
24 | ))}
25 |
26 |
14 |
40 | );
41 | };
42 |
43 | export default PostCard;
44 |
--------------------------------------------------------------------------------
/src/app/blogprisma/Postcardprisma.tsx:
--------------------------------------------------------------------------------
1 | import { shimmer, toBase64 } from "@/lib/shimmer";
2 | import Image from "next/image";
3 | import Link from "next/link";
4 |
5 | interface PostProps {
6 | title: string;
7 | description: string;
8 | imageUrl?: string | any;
9 | }
10 |
11 | const PostCardPrisma = ({ title, description, imageUrl }: PostProps) => {
12 | return (
13 |
24 |
28 |
29 |
30 |
39 | 31 | {title} 32 |
33 | 34 | 35 |36 | {content} 37 |
38 |
14 |
40 | );
41 | };
42 |
43 | export default PostCardPrisma;
44 |
--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import { ClerkProvider } from "@clerk/nextjs";
2 | import type { Metadata } from "next";
3 | import { Mulish } from "next/font/google";
4 | import "./globals.css";
5 | import Navbar from "@/components/Navbar";
6 | import { ThemeProvider } from "@/components/ThemeProvider";
7 | import type { Viewport } from "next";
8 | // import { Toaster } from "@/components/ui/toaster";
9 | import Footer from "@/components/Footer/Footer";
10 | import { Toaster } from "react-hot-toast";
11 |
12 | export const viewport: Viewport = {
13 | themeColor: "#e65100",
14 | };
15 |
16 | const mulish = Mulish({ subsets: ["latin"] });
17 |
18 | export const metadata: Metadata = {
19 | title: "Best Mortgage Rates in Canada (Updated Daily)",
20 | description: "Generated by Joodi.me",
21 | };
22 |
23 | export default function RootLayout({
24 | children,
25 | }: Readonly<{
26 | children: React.ReactNode;
27 | }>) {
28 | return (
29 |
24 |
28 |
29 |
30 |
39 | 31 | {title} 32 |
33 | 34 | 35 |36 | {description} 37 |
38 |
10 | {/* Left */}
11 |
36 |
12 |
24 |
25 | {/* Right */}
26 | Fund Your Loan Today
13 | 14 |15 | With today's historically low rates, now is a great time to get 16 | financing. Complete our quick secure application, and we will get you 17 | a custom quote with different options and review which one best fits 18 | your needs! 19 |
20 | 21 | 22 | 23 |
27 |
35 |
12 | {/* Left */}
13 |
43 |
14 |
25 |
26 | {/* Right */}
27 |
28 |
42 | 29 | A Mortgage Designed For You 30 |
31 |32 | In a digital world, we still believe in old fashioned customer 33 | values. 34 |
35 | 36 | 37 | 40 | 41 |{children}
53 |
14 |
15 |
52 |
16 |
17 |
18 |
19 | What is the home buyers' plan?
20 |
21 |
22 | The Canadian Government’s Home Buyers' Plan (HBP) allows
23 | first-time home buyers to borrow up to $60,000 from their RRSP
24 | for a down payment, tax-free.
25 |
26 |
27 |
28 | What is creditor insurance?
29 |
30 | The mortgage stress test requires financial institutions to
31 | make sure a borrower can still make mortgage payments if
32 | interest rates increase.{" "}
33 |
34 |
35 |
36 |
37 | What is the stress test?
38 |
39 |
40 | Yes. It's animated by default, but you can disable it if
41 | you prefer.
42 |
43 |
44 |
45 |
46 |
47 |
48 | All of our major banks post the same mortgage rates (raising and lowering them practically in unison), lenders make little distinction between small town and big city borrowers, and the standard interest rates they offer do not vary according to the size of a borrower’s down payment.
49 |
50 |
51 |
13 |
71 | )
72 | }
--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | .logo {
6 | text-shadow: 0px 1px 5px #000000;
7 | }
8 | .text-dolphin{
9 | color: #383c5f;
10 | }
11 |
12 | .cl-avatarBox {
13 | width: 2.5rem;
14 | height: 2.5rem;
15 | }
16 |
17 | .bgColor {
18 | background-color: #f6f6f6;
19 | }
20 |
21 | .gradien{
22 | background-image: linear-gradient(-20deg, #fc6076 0%, #ff8316 100%);
23 | }
24 |
25 |
26 | #__next {
27 | @apply h-full;
28 | overflow-y: scroll;
29 | }
30 |
31 | :root {
32 | --background: #ffffff;
33 | --foreground: #171717;
34 | }
35 |
36 |
37 |
38 | @layer base {
39 | :root {
40 | --background: 0 0% 100%;
41 | --foreground: 240 10% 3.9%;
42 | --card: 0 0% 100%;
43 | --card-foreground: 240 10% 3.9%;
44 | --popover: 0 0% 100%;
45 | --popover-foreground: 240 10% 3.9%;
46 | --primary: 240 5.9% 10%;
47 | --primary-foreground: 0 0% 98%;
48 | --secondary: 240 4.8% 95.9%;
49 | --secondary-foreground: 240 5.9% 10%;
50 | --muted: 240 4.8% 95.9%;
51 | --muted-foreground: 240 3.8% 46.1%;
52 | --accent: 240 4.8% 95.9%;
53 | --accent-foreground: 240 5.9% 10%;
54 | --destructive: 0 84.2% 60.2%;
55 | --destructive-foreground: 0 0% 98%;
56 | --border: 240 5.9% 90%;
57 | --input: 240 5.9% 90%;
58 | --ring: 240 5.9% 10%;
59 | --radius: 0.5rem;
60 | }
61 |
62 | .dark {
63 | --background: 240 10% 3.9%;
64 | --foreground: 0 0% 98%;
65 | --card: 240 10% 3.9%;
66 | --card-foreground: 0 0% 98%;
67 | --popover: 240 10% 3.9%;
68 | --popover-foreground: 0 0% 98%;
69 | --primary: 0 0% 98%;
70 | --primary-foreground: 240 5.9% 10%;
71 | --secondary: 240 3.7% 15.9%;
72 | --secondary-foreground: 0 0% 98%;
73 | --muted: 240 3.7% 15.9%;
74 | --muted-foreground: 240 5% 64.9%;
75 | --accent: 240 3.7% 15.9%;
76 | --accent-foreground: 0 0% 98%;
77 | --destructive: 0 62.8% 30.6%;
78 | --destructive-foreground: 0 0% 98%;
79 | --border: 240 3.7% 15.9%;
80 | --input: 240 3.7% 15.9%;
81 | --ring: 240 4.9% 83.9%;
82 | }
83 |
84 | }
85 |
86 |
87 | @media (prefers-color-scheme: dark) {
88 | :root {
89 | --background: #0a0a0a;
90 | --foreground: #ededed;
91 | }
92 | }
93 |
94 | body {
95 | overflow-x: hidden;
96 | color: var(--foreground);
97 | background: var(--background);
98 | font-family: Arial, Helvetica, sans-serif;
99 |
100 | /* custom scroll */
101 | --sb-track-color: #efefef;
102 | --sb-thumb-color: #e65100;
103 | --sb-size: 13px;
104 | }
105 | body::-webkit-scrollbar {
106 | width: var(--sb-size);
107 | }
108 | body::-webkit-scrollbar-track {
109 | background: var(--sb-track-color);
110 | border-radius: 8px;
111 | }
112 |
113 | body::-webkit-scrollbar-thumb {
114 | background: var(--sb-thumb-color);
115 | border-radius: 8px;
116 | }
117 |
118 |
119 | @supports not selector(::-webkit-scrollbar) {
120 | body {
121 | scrollbar-color: var(--sb-thumb-color)
122 | var(--sb-track-color);
123 | }
124 | }
125 |
126 | @layer utilities {
127 | .text-balance {
128 | text-wrap: balance;
129 | }
130 | }
131 |
--------------------------------------------------------------------------------
/src/components/Dashboard/NewPostPrisma.tsx:
--------------------------------------------------------------------------------
1 | import { createPostPrisma } from "@/lib/action";
2 | import { zodResolver } from "@hookform/resolvers/zod";
3 | import { useState } from "react";
4 | import { useForm } from "react-hook-form";
5 | import toast from "react-hot-toast";
6 | import { z } from "zod";
7 | import { Input } from "../ui/input";
8 | import { Textarea } from "../ui/textarea";
9 | import { Button } from "../ui/button";
10 |
11 | // Zod Validation
12 | const postPrismaSchema = z.object({
13 | title: z.string().min(1, "Title is required").max(100,"Title must be less than 100 characters"),
14 | description: z.string().min(1, "Title is description").max(500,"description must be less than 500 characters"),
15 | imageUrl: z.string().url("Must be a valid URL").optional().or(z.literal('')),
16 | });
17 |
18 | type FormData = z.inferCreate a New Post
14 | 70 |
49 |
91 |
92 | );
93 | };
94 |
95 | export default NewPostPrisma;
96 |
--------------------------------------------------------------------------------
/src/components/Dashboard/Dashboard.tsx:
--------------------------------------------------------------------------------
1 | import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
2 | import { Users, ShoppingCart, DollarSign, BarChart2, Settings } from "lucide-react"
3 |
4 | const Dashboard = () => {
5 | return (
6 |
7 |
65 | );
66 | }
67 |
68 | export default Dashboard;
--------------------------------------------------------------------------------
/src/app/apply4/action.ts:
--------------------------------------------------------------------------------
1 | "use server";
2 |
3 | import { MortgageApplicationInputs } from "@/components/apply4/MortgageLoanForm";
4 | import prisma from "@/lib/db";
5 | import { z } from "zod";
6 |
7 | export const createApplyForm4 = async (formData: MortgageApplicationInputs) => {
8 | try {
9 | const application = await prisma.mortgageApplication.create({
10 | data: {
11 | fullName: formData.fullName,
12 | email: formData.email,
13 | phoneNumber: formData.phoneNumber,
14 | loanAmount: formData.loanAmount,
15 | propertyValue: formData.propertyValue,
16 | creditScore: formData.creditScore,
17 | employmentStatus: formData.employmentStatus,
18 | annualIncome: formData.annualIncome,
19 | },
20 | });
21 | console.log("created");
22 | return application;
23 | } catch (error) {
24 | console.log(error);
25 | }
26 |
27 | // const fullName = formData.get("fullName")
28 | };
29 |
30 | // const prisma = new PrismaClient()
31 |
32 | // const MortgageApplicationSchema = z.object({
33 | // fullName: z.string().min(2, 'Full name must be at least 2 characters'),
34 | // email: z.string().email('Invalid email address'),
35 | // phoneNumber: z.string().regex(/^\d{10}$/, 'Phone number must be 10 digits'),
36 | // loanAmount: z.coerce.number().positive('Loan amount must be positive'),
37 | // propertyValue: z.coerce.number().positive('Property value must be positive'),
38 | // employmentStatus: z.enum(['Employed', 'Self-Employed', 'Unemployed']),
39 | // annualIncome: z.coerce.number().positive('Annual income must be positive'),
40 | // creditScore: z.coerce.number().int().min(300).max(850),
41 | // propertyType: z.enum(['Single Family', 'Multi Family', 'Condo', 'Townhouse']),
42 | // propertyAddress: z.string().min(5, 'Property address must be at least 5 characters'),
43 | // downPayment: z.coerce.number().positive('Down payment must be positive'),
44 | // loanTerm: z.coerce.number().int().positive('Loan term must be positive'),
45 | // })
46 |
47 | // export async function submitMortgageApplication(prevState: any, formData: FormData) {
48 | // const validatedFields = MortgageApplicationSchema.safeParse({
49 | // fullName: formData.get('fullName'),
50 | // email: formData.get('email'),
51 | // phoneNumber: formData.get('phoneNumber'),
52 | // loanAmount: formData.get('loanAmount'),
53 | // propertyValue: formData.get('propertyValue'),
54 | // employmentStatus: formData.get('employmentStatus'),
55 | // annualIncome: formData.get('annualIncome'),
56 | // creditScore: formData.get('creditScore'),
57 | // propertyType: formData.get('propertyType'),
58 | // propertyAddress: formData.get('propertyAddress'),
59 | // downPayment: formData.get('downPayment'),
60 | // loanTerm: formData.get('loanTerm'),
61 | // })
62 |
63 | // if (!validatedFields.success) {
64 | // return { error: 'Invalid form data. Please check your inputs.' }
65 | // }
66 |
67 | // try {
68 | // await prisma.mortgageApplication.create({
69 | // data: validatedFields.data,
70 | // })
71 | // return { success: true }
72 | // } catch (error) {
73 | // console.error('Error submitting application:', error)
74 | // return { error: 'Failed to submit application. Please try again.' }
75 | // } finally {
76 | // await prisma.$disconnect()
77 | // }
78 | // }
79 |
--------------------------------------------------------------------------------
/src/components/ui/table.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | const Table = React.forwardRef<
6 | HTMLTableElement,
7 | React.HTMLAttributes
8 |
9 |
11 |
64 | Mini Admin Dashboard
10 |
12 |
13 |
14 | Total Users
15 |
17 |
18 |
21 |
22 |
23 |
24 | Total Orders
25 |
27 |
28 |
31 |
32 |
33 |
34 | Revenue
35 |
37 |
38 |
41 |
42 |
43 |
44 | Analytics
45 |
47 |
48 |
51 |
52 |
53 |
54 | Settings
55 |
57 |
58 |
61 |
62 |
63 | 1,234
19 | +10% from last month
20 |567
29 | +5% from last week
30 |$12,345
39 | +15% from last month
40 |87%
49 | Website traffic increase
50 |3
59 | Pending system updates
60 |
10 |
15 |
16 | ))
17 | Table.displayName = "Table"
18 |
19 | const TableHeader = React.forwardRef<
20 | HTMLTableSectionElement,
21 | React.HTMLAttributes
12 | {/* Left */}
13 |
67 |
68 |
14 |
17 |
18 |
48 |
49 |
55 |
56 | {/* Right */}
57 | Today's Rates *
15 | 16 || 20 | Term 21 | | 22 |23 | Rate 24 | | 25 |26 | APR 27 | | 28 |
|---|---|---|
| 30 Yr Fxd | 33 |5.747% | 34 |5.819% | 35 |
| 30 Yr Fxd | 38 |5.747% | 39 |5.819% | 40 |
| 30 Yr Fxd | 43 |5.747% | 44 |5.819% | 45 |
50 | *=This is only an estimate, provided for illustrative purposes 51 | only. Actual rates and payments may vary. It does not constitute a 52 | quote. 53 |
54 |
58 |
66 |
69 |
83 |
70 |
78 | {/* Calculator In Today's Rates Section */}
79 |
80 |
82 |
20 |
91 |
21 |
22 |
23 |
24 | Total Users
25 |
26 |
28 |
29 |
34 |
35 |
36 |
37 |
38 | Total Orders
39 |
40 |
42 |
43 |
48 |
49 |
50 |
51 | Revenue
52 |
54 |
55 |
60 |
61 |
62 |
63 |
64 | Analytics
65 |
66 |
68 |
69 |
74 |
75 |
76 |
77 |
78 | Active Tasks
79 |
80 |
82 |
83 |
88 |
89 |
90 | 1,234
30 | 31 | +10% from last month 32 |
33 |567
44 | 45 | +5% from last week 46 |
47 |$12,345
56 | 57 | +15% from last month 58 |
59 |87%
70 | 71 | Website traffic increase 72 |
73 |13
84 | 85 | 5 tasks overdue 86 |
87 |163 | {body} 164 |
165 | ) 166 | }) 167 | FormMessage.displayName = "FormMessage" 168 | 169 | export { 170 | useFormField, 171 | Form, 172 | FormItem, 173 | FormLabel, 174 | FormControl, 175 | FormDescription, 176 | FormMessage, 177 | FormField, 178 | } 179 | -------------------------------------------------------------------------------- /src/components/Rates/RatesCalculator.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { useState } from "react"; 3 | import { Button } from "../ui/button"; 4 | import { Input } from "../ui/input"; 5 | import { Label } from "../ui/label"; 6 | import { CiCalculator2 } from "react-icons/ci"; 7 | import { sleep } from "@/lib/sleep"; 8 | import { Slider } from "../ui/slider"; 9 | 10 | const RatesCalculator = () => { 11 | // States 12 | const [loanAmount, setLoanAmount] = useState
47 |
141 | );
142 | };
143 |
144 | export default RatesCalculator;
145 |
--------------------------------------------------------------------------------
/src/components/Dashboard/NewPost2.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { zodResolver } from "@hookform/resolvers/zod";
4 | import { useForm } from "react-hook-form";
5 | import { z } from "zod";
6 | import { useFormStatus } from "react-dom";
7 |
8 | import { toast } from "@/hooks/use-toast";
9 | import { Button } from "../ui/button";
10 | import {
11 | Form,
12 | FormControl,
13 | FormField,
14 | FormItem,
15 | FormLabel,
16 | FormMessage,
17 | } from "@/components/ui/form";
18 | import { Input } from "@/components/ui/input";
19 | import { Checkbox } from "@/components/ui/checkbox";
20 | import { Label } from "@/components/ui/label";
21 | import { Textarea } from "../ui/textarea";
22 | import { ToastAction } from "../ui/toast";
23 | import { addPost } from "@/lib/action";
24 | import SubmitButton from "./SubmitButton";
25 | import { useState } from "react";
26 |
27 | export const FormSchema = z.object({
28 | title: z.string().min(2, {
29 | message: "Title must be at least 2 characters.",
30 | }),
31 | content: z.string().min(2, {
32 | message: "Content must be at least 2 characters.",
33 | }),
34 | imageUrl: z.string().min(2, {
35 | message: "Image URL must be at least 2 characters.",
36 | }),
37 | });
38 |
39 | export function NewPost2() {
40 |
41 | const [isSubmitting, setIsSubmitting] = useStateCalculate EMI Now!
48 | 140 |
76 |
156 | );
157 | }
158 |
--------------------------------------------------------------------------------
/src/components/ui/toast.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import { Cross2Icon } from "@radix-ui/react-icons"
5 | import * as ToastPrimitives from "@radix-ui/react-toast"
6 | import { cva, type VariantProps } from "class-variance-authority"
7 |
8 | import { cn } from "@/lib/utils"
9 |
10 | const ToastProvider = ToastPrimitives.Provider
11 |
12 | const ToastViewport = React.forwardRef<
13 | React.ElementRefCreate a new post
77 | 154 | 155 |
87 |
96 | ))
97 | NavigationMenuViewport.displayName =
98 | NavigationMenuPrimitive.Viewport.displayName
99 |
100 | const NavigationMenuIndicator = React.forwardRef<
101 | React.ElementRef
38 |
39 |
40 |
41 |
42 |
45 |
46 |
78 |
79 |
80 |
81 |
85 |
86 |
98 |
99 |
100 |
101 |
102 | Blog
103 |
104 |
105 |
106 |
107 |
108 |
109 | Contact
110 |
111 |
112 |
113 |
114 |
115 |
116 | );
117 | }
118 |
119 | const ListItem = React.forwardRef<
120 | React.ElementRef<"a">,
121 | React.ComponentPropsWithoutRef<"a">
122 | >(({ className, title, children, ...props }, ref) => {
123 | return (
124 | -
47 |
-
48 |
49 | 65 |50 | {/*64 |*/} 51 | 52 |63 |62 |
66 |
-
87 | {components.map((component) => (
88 |
135 | {title}
136 |
137 | 138 | {children} 139 |
140 | 141 |
10 |
143 |
11 |
142 |
12 |
28 |
29 | 13 | If you're new to buy to let or already with us, don’t hesitate 14 | to contact us. There are dedicated teams ready to help. 15 |
16 | 17 |
18 |
19 | {" "}
20 | (+1) 416 869 8458{" "}
21 |
22 |
23 |
24 | Toronto, CA
25 |
26 |
27 |
30 |
140 |
141 |
30 | {/* Sidebar */}
31 |
136 |
137 | {/* Main Content */}
138 |
166 | );
167 | }
168 |
--------------------------------------------------------------------------------
/src/components/ui/select.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import {
5 | CaretSortIcon,
6 | CheckIcon,
7 | ChevronDownIcon,
8 | ChevronUpIcon,
9 | } from "@radix-ui/react-icons"
10 | import * as SelectPrimitive from "@radix-ui/react-select"
11 |
12 | import { cn } from "@/lib/utils"
13 |
14 | const Select = SelectPrimitive.Root
15 |
16 | const SelectGroup = SelectPrimitive.Group
17 |
18 | const SelectValue = SelectPrimitive.Value
19 |
20 | const SelectTrigger = React.forwardRef<
21 | React.ElementRef
139 | {/* Header */}
140 |
141 |
158 |
159 | {/* Dashboard Content */}
160 |
165 |
142 |
157 | 143 | Dashboard 144 |
145 |
146 |
151 |
155 |
156 | {userSelect}
161 |
162 |
164 | 
2 |
3 | # Full Stack Mortgage Website
4 |
5 |
6 | A FullStack web application suitable for Mortgage use.
7 | In this project, an admin dashboard has also been developed, meaning you can publish new content.
8 | Authentication in this project is handled using Clerk.
9 |
10 | For communication with the MongoDB server, I used the mongoose library.
11 | Additionally, the posts you publish are available at the /blog address, where the information is updated using revalidationPath after your post is registered.
12 | I used Shadcn components.
13 |
14 | Dark/Light mode has been developed in this project.
15 | On the /apply page, there is a multi-step form developed using Surveyjs.io. This was my first time using Surveyjs in this project, and it was amazing! I highly recommend you try it 🤗.
16 | It's easy to use. If you need guidance, feel free to check out my post on LinkedIn:
17 |
18 | https://www.linkedin.com/feed/update/urn:li:activity:7240008028232572929/
19 |
20 | Thank you for your attention.
21 | This project is available at the following address:
22 | [**Demo** ✔️](https://mortgages-hamed.vercel.app/).\
23 | Thank you sincerely. 🙏
24 |
25 | On this admin dashboard page, I've developed two forms—one that submits data using Mongoose and another using Prisma. The form data is validated with React Hook Form and Zod.
26 | https://mortgages-hamed.vercel.app/admin
27 |
28 | On this page, the information is fetched and displayed using Prisma.
29 | https://mortgages-hamed.vercel.app/blogprisma
30 |
31 | On this page, the information is fetched and displayed using Mongoose.
32 | https://mortgages-hamed.vercel.app/blog
33 |
34 | On the homepage, I've added a minimal Calculate EMI feature.
35 | https://mortgages-hamed.vercel.app/
36 |
37 | This form is registered in the MongoDB database using Prisma.
38 | https://mortgages-hamed.vercel.app/apply4
39 |
40 | This form is registered using Mongoose.
41 | https://mortgages-hamed.vercel.app/apply2
42 |
43 | This is an advanced Mortgage Affordability Calculator that can calculate very quickly.
44 | https://mortgages-hamed.vercel.app/affordability
45 |
46 | In this Mortgage EMI Calculator, I've tried to compute user inputs in real-time and display the results along with a chart.
47 | https://mortgages-hamed.vercel.app/calculator
48 |
49 |
50 |
51 | 
57 |
58 |
59 | 
65 |
66 |
67 | 
72 |
73 | 
78 |
79 |
80 | 
85 |
86 |
87 | 
106 |
107 |
108 | 
113 |
114 |
115 | 
120 |
121 | 122 | 123 | 124 |  125 |  126 |  127 |  128 |  129 |  130 |  131 |  132 |  133 |  134 | 135 | Full: 136 |  137 | 138 | 139 |
Connect with me:
140 | 141 | 173 | 174 | 175 | 176 | 177 | -------------------------------------------------------------------------------- /src/lib/action.ts: -------------------------------------------------------------------------------- 1 | "use server"; 2 | 3 | import Post from "@/models/PostModel"; 4 | import dbConnect from "./connectToDb"; 5 | import { revalidatePath } from "next/cache"; 6 | import { z } from "zod"; 7 | import Apply from "@/models/ApplyModel"; 8 | import prisma from "./db"; 9 | 10 | // export interface FormDataType { 11 | // title: string; 12 | // content: string; 13 | // imageUrl: string; 14 | // } 15 | 16 | // POST Method 17 | export const addPost = async (formData: any) => { 18 | try { 19 | await dbConnect(); 20 | const data = { 21 | title: formData.title, 22 | content: formData.content, 23 | imageUrl: formData.imageUrl, 24 | }; 25 | const saveUser = await new Post(data).save(); 26 | revalidatePath("/blog"); 27 | console.log(saveUser); 28 | } catch (error) { 29 | console.log(error); 30 | } 31 | }; 32 | 33 | // GET Method 34 | export const getPosts = async () => { 35 | try { 36 | await dbConnect(); 37 | const response = await Post.find().exec(); 38 | console.log(response); 39 | return response; 40 | } catch (error) { 41 | console.log(error); 42 | } 43 | }; 44 | 45 | // POST APPLY 2 46 | // zod Schema Validation 47 | const applyFormSchema = z.object({ 48 | fullName: z.string(), 49 | email: z.string().email(), 50 | phoneNumber: z 51 | .string() 52 | .min(10) 53 | .refine((val) => /^\d+$/.test(val), { 54 | message: "Phone number must contain only digits", 55 | }), 56 | loanAmount: z.number().min(1000).max(1000000), 57 | loanPurpose: z.string(), 58 | employmentStatus: z.string(), 59 | annualIncome: z.number(), 60 | creditScore: z.number().min(300).max(800), 61 | hasCollateral: z.boolean(), 62 | agreeToTerms: z.boolean(), 63 | }); 64 | 65 | export const submitApply = async (data: z.infer
94 |
131 |
95 |
98 | setAnnualIncome(Number(e.target.value))}
104 | />
105 |
106 |
107 |
110 | setMonthlyDebts(Number(e.target.value))}
116 | />
117 |
118 |
119 |
122 | setDownPayment(Number(e.target.value))}
128 | />
129 |
130 |
134 |
183 |
135 |
138 | setInterestRate(value[0])}
145 | />
146 |
150 |
147 | {interestRate.toFixed(1)}%
148 |
149 |
151 |
154 | setLoanTerm(value[0])}
161 | />
162 |
166 |
163 | {loanTerm} years
164 |
165 |
167 |
170 | setCreditScore(value[0])}
177 | />
178 |
182 |
179 | {creditScore}
180 |
181 |
196 |
214 | )}
215 | Results
197 |
198 |
213 |
199 | Maximum Mortgage:
200 |
201 |
202 |
203 |
204 |
205 | ${results.maxMortgage}
206 | Monthly Payment:
207 | ${results.monthlyPayment}
208 | Down Payment:
209 |
210 | {results.downPaymentPercentage}%
211 |
212 |