feat: ui revamp for explore job page

* ui-revamp

* updated-font/satoshi

* footer-added

* nav-bar

* mobile-nav

* responsive/job-form

* new-schema

* added-skills

* mobile-nav

* mobile-nav

* minor/ui-bugs

.env.example

@@ -15,7 +15,7 @@ CDN_BASE_UPLOAD_URL=https://sg.storage.bunnycdn.com/job-board/assets
 CDN_BASE_ACCESS_URL=https://job-board.b-cdn.net/assets
 
 
-NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=
+NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=maps-api-key
 
 # To run the application in production environment / check the envs 
 # SKIP_ENV_CHECK=true npm run [replace with your script name]

prisma/migrations/20240921165842_update/migration.sql

@@ -0,0 +1,16 @@
+/*
+  Warnings:
+
+  - Changed the type of `type` on the `Job` table. No cast exists, the column would be dropped and recreated, which cannot be done if there is data, since the column is required.
+
+*/
+-- CreateEnum
+CREATE TYPE "EmployementType" AS ENUM ('Full_time', 'Part_time', 'Internship', 'Contract');
+
+-- AlterTable
+ALTER TABLE "Job" ADD COLUMN     "has_experience_range" BOOLEAN NOT NULL DEFAULT false,
+ADD COLUMN     "maxExperience" INTEGER,
+ADD COLUMN     "minExperience" INTEGER,
+ADD COLUMN     "skills" TEXT[],
+DROP COLUMN "type",
+ADD COLUMN     "type" "EmployementType" NOT NULL;

prisma/schema.prisma

@@ -19,28 +19,32 @@ model User {
 }
 
 model Job {
-  id             String   @id @default(cuid())
-  userId         String
-  title          String
-  description    String?
-  companyName    String   @map("company_name")
-  companyBio     String   @map("company_bio")
-  companyEmail   String   @map("company_email")
-  category       String 
-  type           String
-  workMode       WorkMode @map("work_mode")
-  currency       Currency @default(INR)
-  city           String
-  address        String
-  application    String
-  companyLogo    String 
-  hasSalaryRange Boolean  @default(false) @map("has_salary_range")
-  minSalary      Int?
-  maxSalary      Int?
-  isVerifiedJob  Boolean  @default(false) @map("is_verified_job")
-  postedAt       DateTime @default(now())
-  updatedAt      DateTime @updatedAt
-  user           User     @relation(fields: [userId], references: [id])
+  id                 String   @id @default(cuid())
+  userId             String
+  title              String
+  description        String?
+  companyName        String   @map("company_name")
+  companyBio         String   @map("company_bio")
+  companyEmail       String   @map("company_email")
+  category           String 
+  type               EmployementType
+  workMode           WorkMode @map("work_mode")
+  currency           Currency @default(INR)
+  city               String
+  address            String
+  application        String
+  companyLogo        String 
+  skills             String[]
+  hasSalaryRange     Boolean  @default(false) @map("has_salary_range")
+  minSalary          Int?
+  maxSalary          Int?
+  hasExperiencerange Boolean @default(false) @map("has_experience_range")
+  minExperience      Int?
+  maxExperience      Int?
+  isVerifiedJob      Boolean  @default(false) @map("is_verified_job")
+  postedAt           DateTime @default(now())
+  updatedAt          DateTime @updatedAt
+  user               User     @relation(fields: [userId], references: [id])
 }
 
 enum Currency {
@@ -59,3 +63,10 @@ enum Role {
   ADMIN
 }
 
+enum EmployementType {
+  Full_time
+  Part_time
+  Internship
+  Contract
+}
+

prisma/seed.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import { Currency, Role, WorkMode } from '@prisma/client';
+import { Currency, EmployementType, Role, WorkMode } from '@prisma/client';
 import { faker } from '@faker-js/faker';
 import bcrypt from 'bcryptjs';
 import prisma from '../src/config/prisma.config';
@@ -20,10 +20,13 @@ let jobs = [
       'Leading tech solutions provider specializing in innovative web development.',
     companyEmail: '[email protected]',
     category: 'development',
-    type: 'full-time',
+    type: EmployementType.Full_time,
     workMode: WorkMode.remote,
     currency: Currency.USD,
     application: '[email protected]',
+    hasExperiencerange: true,
+    minExperience: 1,
+    maxExperience: 2,
     companyLogo: '',
     hasSalaryRange: true,
     minSalary: 60000,
@@ -40,10 +43,11 @@ let jobs = [
       'Innovatech specializes in backend systems and cloud-based solutions.',
     companyEmail: '[email protected]',
     category: 'development',
-    type: 'full-time',
+    type: EmployementType.Full_time,
     workMode: WorkMode.office,
     currency: Currency.USD,
     application: '[email protected]',
+    hasExperiencerange: false,
     companyLogo: '',
     hasSalaryRange: false,
     minSalary: null,
@@ -60,10 +64,13 @@ let jobs = [
       'Global Solutions offers comprehensive IT services for businesses worldwide.',
     companyEmail: '[email protected]',
     category: 'development',
-    type: 'full-time',
+    type: EmployementType.Full_time,
     workMode: WorkMode.hybrid,
     currency: Currency.USD,
     application: '[email protected]',
+    hasExperiencerange: true,
+    minExperience: 3,
+    maxExperience: 4,
     companyLogo: '',
     hasSalaryRange: true,
     minSalary: 90000,
@@ -81,10 +88,13 @@ let jobs = [
       'DevOps Ltd. specializes in automation and cloud infrastructure management.',
     companyEmail: '[email protected]',
     category: 'development',
-    type: 'full-time',
+    type: EmployementType.Full_time,
     workMode: WorkMode.remote,
     currency: Currency.USD,
     application: '[email protected]',
+    hasExperiencerange: true,
+    minExperience: 1,
+    maxExperience: 2,
     companyLogo: '',
     hasSalaryRange: true,
     minSalary: 50000,
@@ -102,10 +112,11 @@ let jobs = [
       'Productive Minds helps businesses achieve their goals through strategic product management.',
     companyEmail: '[email protected]',
     category: 'management',
-    type: 'full-time',
+    type: EmployementType.Full_time,
     workMode: WorkMode.hybrid,
     currency: Currency.USD,
     application: '[email protected]',
+    hasExperiencerange: false,
     companyLogo: '',
     hasSalaryRange: true,
     minSalary: 110000,
@@ -123,10 +134,13 @@ let jobs = [
       'Data Insights provides data-driven solutions to empower businesses.',
     companyEmail: '[email protected]',
     category: 'development',
-    type: 'full-time',
+    type: EmployementType.Full_time,
     workMode: WorkMode.office,
     currency: Currency.USD,
     application: '[email protected]',
+    hasExperiencerange: true,
+    minExperience: 1,
+    maxExperience: 2,
     companyLogo: '',
     hasSalaryRange: true,
     minSalary: 80000,
@@ -144,10 +158,13 @@ let jobs = [
       'Creative Designs excels in crafting intuitive and visually appealing user interfaces.',
     companyEmail: '[email protected]',
     category: 'design',
-    type: 'full-time',
+    type: EmployementType.Full_time,
     workMode: WorkMode.remote,
     currency: Currency.USD,
     application: '[email protected]',
+    hasExperiencerange: true,
+    minExperience: 1,
+    maxExperience: 2,
     companyLogo: '',
     hasSalaryRange: true,
     minSalary: 70000,
@@ -164,10 +181,13 @@ let jobs = [
       'App Innovators is a leader in mobile application development and innovation.',
     companyEmail: '[email protected]',
     category: 'development',
-    type: 'full-time',
+    type: EmployementType.Full_time,
     workMode: WorkMode.hybrid,
     currency: Currency.USD,
     application: '[email protected]',
+    hasExperiencerange: true,
+    minExperience: 1,
+    maxExperience: 2,
     companyLogo: '',
     hasSalaryRange: false,
     minSalary: null,
@@ -183,10 +203,13 @@ let jobs = [
     companyBio: 'Cloud Works provides cutting-edge cloud computing solutions.',
     companyEmail: '[email protected]',
     category: 'development',
-    type: 'full-time',
+    type: EmployementType.Full_time,
     workMode: WorkMode.office,
     currency: Currency.USD,
     application: '[email protected]',
+    hasExperiencerange: true,
+    minExperience: 1,
+    maxExperience: 2,
     companyLogo: '',
     hasSalaryRange: true,
     minSalary: 100000,
@@ -203,10 +226,13 @@ let jobs = [
       'SecureTech specializes in cybersecurity solutions for modern businesses.',
     companyEmail: '[email protected]',
     category: 'support',
-    type: 'full-time',
+    type: EmployementType.Full_time,
     workMode: WorkMode.remote,
     currency: Currency.USD,
     application: '[email protected]',
+    hasExperiencerange: true,
+    minExperience: 1,
+    maxExperience: 2,
     companyLogo: '',
     hasSalaryRange: true,
     minSalary: 75000,
@@ -223,13 +249,13 @@ let jobs = [
       'QA Solutions ensures top-notch quality assurance services for software.',
     companyEmail: '[email protected]',
     category: 'support',
-    type: 'full-time',
+    type: EmployementType.Full_time,
     workMode: WorkMode.remote,
     currency: Currency.USD,
     application: '[email protected]',
     companyLogo: '',
     hasSalaryRange: true,
-    minSalary: 45000,
+    hasExperiencerange: false,
     maxSalary: 50000,
     isVerifiedJob: true,
   },
@@ -243,10 +269,13 @@ let jobs = [
       'WriteTech specializes in high-quality technical writing services.',
     companyEmail: '[email protected]',
     category: 'writing',
-    type: 'contract',
+    type: EmployementType.Contract,
     workMode: WorkMode.remote,
     currency: Currency.USD,
     application: '[email protected]',
+    hasExperiencerange: true,
+    minExperience: 1,
+    maxExperience: 2,
     companyLogo: '',
     hasSalaryRange: false,
     minSalary: null,
@@ -304,10 +333,23 @@ async function seedJobs() {
             application: j.application,
             city: faker.location.city(),
             address: faker.location.streetAddress(),
-            companyLogo: j.companyLogo,
+            hasExperiencerange: j.hasExperiencerange,
+            minExperience: j.minExperience,
+            maxExperience: j.maxExperience,
+            companyLogo: '/spotify.png',
             hasSalaryRange: j.hasSalaryRange,
             minSalary: j.minSalary,
             maxSalary: j.maxSalary,
+            skills: [
+              'Java',
+              'REST API',
+              'React',
+              'Node.js',
+              'CSS',
+              'HTML',
+              'Python',
+              'SQL',
+            ],
             isVerifiedJob: j.isVerifiedJob,
           },
           update: {},

src/actions/job.action.ts

@@ -73,6 +73,9 @@ export const getAllJobs = withServerActionAsyncCatcher<
   if (data?.workmode && !Array.isArray(data?.workmode)) {
     data.workmode = Array.of(data?.workmode);
   }
+  if (data?.EmpType && !Array.isArray(data?.EmpType)) {
+    data.EmpType = Array.of(data?.EmpType);
+  }
   if (data?.salaryrange && !Array.isArray(data?.salaryrange)) {
     data.salaryrange = Array.of(data?.salaryrange);
   }
@@ -94,6 +97,11 @@ export const getAllJobs = withServerActionAsyncCatcher<
       description: true,
       companyName: true,
       city: true,
+      hasExperiencerange: true,
+      minExperience: true,
+      maxExperience: true,
+      skills: true,
+      type: true,
       address: true,
       workMode: true,
       minSalary: true,
@@ -136,8 +144,14 @@ export const getJobById = withServerActionAsyncCatcher<
       companyEmail: true,
       companyLogo: true,
       city: true,
+      type: true,
+      hasExperiencerange: true,
+      minExperience: true,
+      maxExperience: true,
+      skills: true,
       address: true,
       workMode: true,
+      hasSalaryRange: true,
       minSalary: true,
       maxSalary: true,
       postedAt: true,
@@ -176,6 +190,9 @@ export const getRecentJobs = async () => {
         workMode: true,
         minSalary: true,
         maxSalary: true,
+        minExperience: true,
+        maxExperience: true,
+        skills: true,
         postedAt: true,
         companyLogo: true,
         type: true,

src/app/create/page.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 const page = () => {
   return (
-    <div className="mt-10">
+    <div className="mt-10 min-w-full">
       <div>
         <h1 className="text-center text-4xl font-semibold">Post a job</h1>
         <p className="text-center mt-6 text-lg text-gray-300">