7job: Building a Job Board Application and What I Learned

July 30, 2024 (5mo ago)

After finishing my first Next.js project ‘7auth‘, I am seeking what project should I built next, while reading a job description and requirement of a junior full-stack web developer position on jobsdb.com about what skills I need to learn, I got inspired by the platform how the search filter works how the job list appears on the left side bar and job detail appear on the right side after clicking job listings on the left and a user is able to bookmark job listings for later reference, which I found particularly useful.

screenshot from the jobsdb.com website

I decided to start building my second Next.js project named ‘7job’, a job board web application that inspired by jobsdb.com

screenshot from my ‘7job’ project

App Features:

  • Job Listings: Users can view detailed job listings, including job title, company name and logo, description, salary, location, and job type.
  • Job Search: Users can search for jobs by title, type, or location.
  • Bookmarking: Users can bookmark jobs for later reference using local storage.
  • Admin Review: Admins can review, approve, or delete job postings.
  • Secure Authentication: Implemented secure user authentication.

Technologies Used:

  • Next.js
  • TypeScript
  • Prisma
  • PostgreSQL
  • TailwindCSS
  • Other Libraries: React Hook Form, Zod, Zustand, Uploadthing, TIptap.

What I Learned and Experienced

This project was an incredible learning experience that tested my understanding of building web applications, I started by cloning my ‘7auth’ project for authentication, which save me a lot of time in creating a new authentication feature for admin users.

On the ‘Post a new job page’ , I integrated uploadthing to handle file uploads. By following the documentation, I learned how to upload, preview and delete image when a job got deleted.

# Getting a fileKey from image url then delete on the server
if (job?.companyLogo) {
      const fileKey = job.companyLogo.split('/');
      const imgToDelete = fileKey[fileKey.length - 1];
      await utapi.deleteFiles(imgToDelete);
    }

    await prisma.job.delete({
      where: { id: jobId },
    });

For the rich text editor, I integrated Tiptap the main challenge I encounter was that it does not come with a menu bar by default, again, I followed the documentation to configure the editor, later I faced issues rendering a ordered and unordered lists properly. Thanks to GitHub developer community I found solutions to this problem by configuring and assigning CSS classes to it.

This experience taught me how important community resources and detailed documentation are when using third-party libraries.

StarterKit.configure({
        orderedList: {
          HTMLAttributes: {
            class: 'list-decimal pl-4',
          },
        },
        bulletList: {
          HTMLAttributes: {
            class: 'list-disc pl-4',
          },
        },
      }),

For Pagination, I learned two methods:

  1. Generating a new link with all the query parameters from the search results and redirecting the user to a new page.
function generatePageLink(page: number) {
    const searchParams = new URLSearchParams({
      ...(query && { query }),
      ...(type && { type }),
      ...(location && { location }),
      page: page.toString(),
    });

    return `/?${searchParams.toString()}`;
  }

2. Slicing job results and pass them as props, this way allowed the data to be updated without changing the pathname.

const jobsSlice = jobs.slice(
    (currentPage - 1) * RESULT_PER_PAGE,
    currentPage * RESULT_PER_PAGE
  );

For the bookmarking feature, I used Zustand to persist store data, allowing users to save job listings on their local storage. Zustands simplicity and efficiency made it an excellent choice for managing state in my application.

Building ‘7job’ was pushing me to expand my skill set and deepen my understanding of full-stack web development. Each challenge I encountered has strengthened my problem-solving skills and adaptability.

As I continue my journey in web development, I am excited about the endless possibilities and future projects. My next steps will involve exploring more advanced features or more complex applications that required real-time updates like chat features

Thank you for taking the time to read about my second project ‘7job’.

Link: https://hi.nuttanan.com/web7job
GitHub: https://github.com/mist3rW/7job

LinkedIn