-
This project is built using Next.js and incorporates various features to help manage a list of job opportunities for job hunting. It utilizes Prisma as the database to store job data, Render for hosting the database, Clerk for authentication, React Query for caching and fetching data, and the Recharts library for displaying monthly application and job status.
-
npm install
-
Set up the necessary environment variables for Clerk, and Render.
- Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY =
CLERK_SECRET_KEY =
Put all the necessary environment variables in .env.local
- Render (put in .env file)
DATABASE_URL=- npm run dev
npx create-next-app@latest projectName npm install @clerk/nextjs@^4.27.7 @prisma/client@^5.7.0 @tanstack/react-query@^5.14.0 @tanstack/react-query-devtools@^5.14.0 dayjs@^1.11.10 next-themes@^0.2.1 recharts@^2.10.3
npm install prisma@^5.7.0 -D- follow Next.js install steps (starting with 2)
- open another terminal window (optional)
npx shadcn-ui@latest init- setup Button
npx shadcn-ui@latest add button- setup new app, configure fields - (or use existing)
- add ENV Vars
- wrap layout
- add middleware
- make '/' public
- restart dev server
layout.tsx
import { ClerkProvider } from "@clerk/nextjs";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<ClerkProvider>
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
</ClerkProvider>
);
}middleware.tsx
import { authMiddleware } from "@clerk/nextjs";
// This example protects all routes including api/trpc routes
// Please edit this to allow other routes to be public as needed.
// See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your Middleware
export default authMiddleware({
publicRoutes: ["/"],
});
export const config = {
matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};npx shadcn-ui@latest add dropdown-menu- reference shadcn docs
- setup theme in globals.css
npm install next-themes
- install
npx shadcn-ui@latest add form input- install
npx shadcn-ui@latest add select- create .env
- add to .gitignore
- copy external URL DATABASE_URL =
- setup new prisma instance
npx prisma init- push changes to render
npx prisma db push- install
npx shadcn-ui@latest add toast
- install
npx shadcn-ui@latest add badge separator card
- create fake data in Mockaroo docs
- copy from assets or final project
- log user id
- create seed.js
- run "node prisma/seed"
const { PrismaClient } = require("@prisma/client");
const data = require("./mock-data.json");
const prisma = new PrismaClient();
async function main() {
const clerkId = "clerkUserId";
const jobs = data.map((job) => {
return {
...job,
clerkId,
};
});
for (const job of jobs) {
await prisma.job.create({
data: job,
});
}
}
main()
.then(async () => {
await prisma.$disconnect();
})
.catch(async (e) => {
console.error(e);
await prisma.$disconnect();
process.exit(1);
});- install
npx shadcn-ui@latest add skeleton