Migrating to Typescript

[prathmesh796]

TypeScript will help a lot with:

• session typing
• API response safety
• MongoDB schema typing
• avoiding undefined errors
• autocomplete in VS Code

Benefits:

• safer refactoring
• better DX
• fewer runtime bugs
• easier scaling
• better API contracts

Changes Done

• Added TypeScript dependencies
• Create a tsconfig.json and deleted jsconfig.json
• Rename files:

• .js → .ts
• .jsx → .tsx

• Added types

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
getlancer	Ready	Preview, Comment	May 25, 2026 5:58am

[Copilot]

Pull request overview

This PR migrates the Next.js codebase from JavaScript to TypeScript and introduces new typed modules and routes (notably for chat, jobs, and profiles) to improve safety and developer experience across the app.

Changes:

• Adds TypeScript tooling/config (tsconfig.json, typescript, @types/*) and introduces/updates .ts/.tsx sources.
• Introduces Firebase + Firestore chat support (service + hooks) and related UI scaffolding.
• Adds/updates multiple API routes (jobs search/recommendations/detail, profiles) and refactors NextAuth route structure.

Reviewed changes

Copilot reviewed 49 out of 74 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
utils/SessionProvider.tsx	Replaces JS session provider with TSX and session typing.
utils/SessionProvider.js	Removes old JS session provider.
utils/db.ts	Adds TS mongoose connection helper.
types/User.ts	Adds shared User/profile/session types.
types/Jobs.ts	Adds shared Job/application types.
types/next-auth.d.ts	Adds NextAuth Session/JWT module augmentation.
tsconfig.json	Introduces TypeScript compiler configuration.
package.json	Adds TypeScript + React/Node type dependencies.
package-lock.json	Locks new TS-related dependency graph.
models/User.ts	Adds TS typing/casting for mongoose User model.
models/Jobs.ts	Adds TS typing/casting for mongoose Jobs model.
models/Fprofile.ts	Adds TS typing/casting for mongoose Freelancer profile model.
models/Cprofile.ts	Adds TS typing/casting for mongoose Client profile model.
lib/firebase.ts	Adds Firebase app + Firestore initialization.
jsconfig.json	Removes JS path config in favor of TS config.
services/chat.ts	Adds Firestore conversation/message utilities.
hooks/useMessages.tsx	Adds client hook to subscribe to conversation messages.
hooks/useConversations.tsx	Adds client hook to list user conversations.
hooks/useChat.tsx	Adds client hook to subscribe to project messages.
proxy.ts	Adds TS typing to middleware-like proxy function.
components/theme.tsx	Adds client theme provider with cookie persistence.
components/theme-switch.tsx	Adds UI control to toggle theme.
components/Sidebar.tsx	Adds typed/sidebar navigation component.
components/Navbar.tsx	Removes unnecessary React import in TSX.
components/Jobs.tsx	Removes unnecessary React import in TSX.
components/Footer.tsx	Removes unnecessary React import in TSX.
components/CJobs.tsx	Adds TS props typing for client job card.
components/chat/ChatBox.tsx	Replaces prior JS file with placeholder TSX content.
components/chat/ChatBox.js	Removes old JS chat page wrapper.
components/Calendar.tsx	Updates date-fns locale import and event defaults.
app/layout.tsx	Adds theme + session providers; minor TS adjustments.
app/page.tsx	Adds new client home page with role-based redirect + theme assets.
app/schedule/page.tsx	Removes unused Link import; TS adjustments.
app/messages/[userId]/page.tsx	Adds/adjusts messages list page logic.
app/messages/[userId]/[conversationId]/page.tsx	Adds/adjusts conversation view + sending logic.
app/profile/view/[userId]/page.tsx	Adds TS typing adjustments for profile view page.
app/api/signin/route.ts	Formatting/TS import changes for signin route.
app/api/auth/[...nextauth]/route.ts	Introduces NextAuth handler route wrapper.
app/api/auth/[...nextauth]/options.ts	Moves authOptions and helpers into a TS module.
app/api/profile/user/route.ts	Adds a user lookup API route (name/email).
app/api/profile/FreelancerProfile/route.ts	Adds TS typing and updateFields changes for freelancer profile API.
app/api/profile/ClientProfile/route.ts	Adds TS typing and updateFields changes for client profile API.
app/api/jobs/route.ts	Adds TS typings for jobs list/create route handlers.
app/api/jobs/search/route.ts	Adds jobs search endpoint.
app/api/jobs/recommendations/route.ts	Adds endpoint for latest-job recommendations.
app/api/jobs/ClientJobs/route.ts	Adds TS typing for client jobs endpoint handler.
app/api/jobs/applications/route.ts	Updates “my applications” lookup route.
app/api/jobs/[job_id]/route.ts	Adds job detail/update/status/delete endpoints.
app/api/jobs/[job_id]/applications/route.ts	Adds endpoint to list applications for a job.
app/api/forgot-password/route.ts	Replaces JS forgot-password route with TS route scaffold.
app/api/forgot-password/route.js	Removes old JS forgot-password implementation.
app/api/reset-password/route.ts	Replaces JS reset-password route with TS route scaffold.
app/api/reset-password/route.js	Removes old JS reset-password implementation.
app/(Auth)/signin/page.tsx	Adds TS-related changes and new import.
app/(Auth)/login/page.tsx	Adds global typing for Turnstile callback usage.
app/(Auth)/join/page.tsx	Adds account-type selection page.
app/(Auth)/forgot-password/page.tsx	Adds forgot-password UI page.
app/(Auth)/reset-password/[token]/page.tsx	Adds reset-password UI page.
app/(Docs)/about/page.tsx	Adds About page.
app/(Docs)/contact/page.tsx	Adds Contact page.
app/(Cinterface)/Cdash/page.tsx	Adds typing for jobs state and adjusts CJobs usage.
app/(Cinterface)/NewJob/page.tsx	Adds form event typing and safer form parsing.
app/(Cinterface)/Cprofile/page.tsx	Refactors to use a single clientProfile state with TS typing.
app/(Cinterface)/Cprofile/updateCprofile/page.tsx	Refactors update page to use clientProfile object state with TS typing.
app/(Cinterface)/JobApplications/[job_id]/page.tsx	Adds TS typing changes for job applications page.
app/(Finterface)/Fdash/page.tsx	Adds freelancer dashboard page with filters/recommendations.
app/(Finterface)/MyApplications/page.tsx	Fixes FontAwesome icon rendering usage.
app/(Finterface)/ApplyJob/[job_id]/page.tsx	Adds typing for job details and adjusts fetched fields.
app/(Finterface)/Fprofile/page.tsx	Adds typing for socialLinks iteration.
app/(Finterface)/Fprofile/[userId]/page.tsx	Removes React default import and adjusts param typing.
app/(Finterface)/Fprofile/updateFprofile/page.tsx	Fixes socialLinks typing and textarea attribute usage.
app/(TestPages)/TestConf/page.tsx	Adds test configuration/info page.
app/(TestPages)/contest/page.tsx	Fixes JSX attributes and removes invalid props on divs.
tests/api.auth.test.js	Updates test import path to new NextAuth options module.

Comments suppressed due to low confidence (17)

app/api/jobs/applications/route.ts:26

• This query/filtering uses applications.freelancerId, but the Jobs schema stores applications as { userId, proposal } (no freelancerId). As written, this will always return an empty list and job.applications.find(...) will never match. Use the schema field name (applications.userId) or update the schema consistently.
  app/api/jobs/[job_id]/applications/route.ts:30
• job.applications is being treated as having freelancerId and appliedAt, but the Jobs schema stores applications as { userId, proposal }. This will cause User.findById(app.freelancerId) / Fprofile.findOne({ user: app.freelancerId }) to query with undefined and return incorrect applicant details. Align with the schema field names (or migrate the schema + existing data).
  app/api/profile/ClientProfile/route.ts:83
• socialLinksJSON and logo can be null (or logo can be a File). Unconditionally doing JSON.parse(socialLinksJSON as string) / JSON.parse(logo as string) will throw (and will always throw when logo is a File), breaking profile updates. Parse only when the value is a string and keep the File path separate, with validation/error handling for invalid JSON.
  app/api/profile/ClientProfile/route.ts:77
• This endpoint now persists socialLinks as whatever JSON.parse(...) returns, but the Cprofile mongoose schema defines socialLinks as an object with fixed keys (facebook/twitter/linkedin/...). Storing an array (as sent by the updated client) will make existing reads/Object.entries rendering inconsistent. Either keep socialLinks as a keyed object end-to-end or migrate the schema + all consumers to the array shape.
  app/api/profile/FreelancerProfile/route.ts:72
• hourlyRate: Number(hourlyRate) will write NaN when the value is missing/undefined (e.g., if the client doesn’t send it). Prefer defaulting to 0 (or leaving it unset) and validate that the parsed value is a finite number before updating the document.
  app/(Auth)/signin/page.tsx:7
• This is a client component, but it imports NextResponse from next/server and returns NextResponse.json(...) from an event handler. That will break bundling/runtime (server-only module in client) and the return value is ignored in the browser anyway—remove the server import and handle errors via component state/UI.
  app/messages/[userId]/page.tsx:10
• params is a plain object in Next.js route components; calling React’s use(params) and typing the result as string is incorrect and will throw at runtime. Read the route param directly (e.g., from params.userId) instead of using use() here.
  app/messages/[userId]/[conversationId]/page.tsx:11
• This is a client component, but params is typed as a Promise and passed to React’s use(). Route params are serializable objects, not Promises, so this pattern will break at runtime. Use params.userId / params.conversationId directly (or make this a server component if you truly need use() with a Promise).
  app/(Finterface)/ApplyJob/[job_id]/page.tsx:12
• use(params) is being used to derive job_id, but in Next.js params is an object (e.g., { job_id: string }), not a Promise/thenable. This will throw at runtime and job_id will not be a string. Read job_id directly from params.job_id.
  app/(Finterface)/Fprofile/[userId]/page.tsx:13
• use(params) is used to get userId, but params is a plain object in Next.js. This will throw at runtime (and can make userId undefined), preventing profile fetches. Use params.userId directly.
  app/profile/view/[userId]/page.tsx:12
• This client page types params as a Promise and calls use(params). Route params are not Promises in client components, so this will break at runtime and block profile loading. Use params.userId directly (or convert this to a server component pattern).
  app/(Cinterface)/JobApplications/[job_id]/page.tsx:14
• This page types params as a Promise and calls use(params). In Next.js client components, params is a plain object; using use() here will throw at runtime and job_id won’t resolve. Access params.job_id directly.
  app/(TestPages)/contest/page.tsx:180
• These clickable <div> elements act like buttons (they have onClick handlers) but aren’t keyboard-accessible and won’t be announced correctly by screen readers. Use <button type="button"> (and disabled/aria-disabled if needed) to keep the quiz navigation accessible.
  app/layout.tsx:13
• UserSession is imported but never used, which will fail linting under typical TypeScript/Next.js ESLint rules. Remove the unused import or use it for the session typing if that was the intent.
  models/User.ts:3
• The imported User type doesn’t match the schema field names (schema uses isVerfied but the type defines isVerified). Casting User to mongoose.Model<User> will hide these mismatches and give incorrect typings—either fix the schema field name or update the TS type to match the persisted document shape.
  models/Jobs.ts:3
• The imported Job type currently doesn’t reflect the jobsSchema shape (e.g., schema has bounty: Number, status includes "closed", and applications stores userId + proposal). Exporting this as mongoose.Model<Job> will produce misleading typings across the codebase—update the Job type (or define a proper Mongoose Document interface) to match the schema.
  app/(Cinterface)/Cprofile/page.tsx:146
• This component assumes clientProfile.socialLinks is a map of { [platform]: url } (it uses Object.entries and uses link directly as the href). But the updated profile update flow/API now treats socialLinks as an array of { platform, link }. With that shape, href={link} will be wrong and rendering will break—standardize the socialLinks shape across API/schema/UI.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.