Join To My Journey to learn building full stack web application

I decided to share my experience in building web applications by building a full stack web app I called it Job Board, Job board is a MERN Stack application with multi roles and features.

At the starting point, I created a repository on GitLab and wrote an overview of the app, including the roles and workflows. This overview is based on my initial perspective, which may change later. However, the important thing for me is to keep everything documented.

Project Repository
Youtube Playlist

Job Board

A MERN Stack Job Board app. allow users to post jobs and apply to them.

Teck Stack

• React
• Redux
• React Router
• React Hook Form
• Tailwind CSS
• Shadecn Tailwind
• Zod
• Express
• Mongoose
• Cloudinary
• JWT
• Bcrypt
• Nodemailer
• Typescript
• Vite
• Node

Features

• Post jobs
• Apply to jobs
• Search jobs
• Pagination
• Filter jobs
• Sort jobs
• Manage applications
• Manage jobs
• Manage resumes
• Manage interviews
• Manage notifications

Application Flow

User As Employer

• Register - Or - Login
• Account
  • Update Profile
  • Change Password

• Company Settings

  • Setup Company Profile
  • Update Company Profile

• Dashboard

  • Manage Jobs
  • Create Job
  • Update Job
  • Delete Job
  • Reactivate Job
  • Archive Job
  • Unarchive Job
  • Filter Jobs
  • Sort Jobs
  • Search Jobs
  • Manage Applications
  • View Applications
  • Accept Application
  • Reject Application
  • Manage Interviews
  • Create Interview
  • Update Interview
  • Delete Interview
  • Manage Notifications
  • View Notifications
  • Mark Notification as Read
  • Delete Notification
  • Logout

User As Candidate

• Register - Or - Login

• Account

  • Update Profile
  • Change Password

• Root

  • Jobs
  • View Job
  • Apply to Job
  • Filter Jobs
  • Sort Jobs
  • Search Jobs

• Applications

• View Application

• Create Application

• Update Application

• Delete Application

• Interviews

  • View Interview
  • Approve Interview

• Notifications

  • View Notification
  • Mark Notification as Read
  • Delete Notification

• Resume

  • Upload Resume
  • Delete Resume
  • Select Active Resume

• Logout

User As Candidate

Database

• MongoDB
• Mongoose

Models

• Job

  • id
  • title
  • description
  • level (Senior, Junior, Intern)
  • applicationMethod (email,external,linkedin,jobboard)
  • location (JobType -> Remote, Hybrid, Onsite)
  • applicationLink?
  • applicationDeadline
  • category
  • salary
  • requirements
  • responsibilities
  • showSalary
  • status (Active, Archived)
  • created_at
  • updated_at

• Company

  • id
  • name
  • description
  • website
  • linkedin
  • logo
  • city
  • state
  • country
  • cover
  • size
  • location
  • created_at
  • updated_at

• User

  • id
  • name
  • email
  • password
  • role (Candidate, Employer, Admin)
  • company?
  • linkedIn
  • github?
  • dribble?
  • activeResume?
  • cover?
  • imageUrl?
  • created_at
  • updated_at

• Resume

  • id
  • userId
  • resumeUrl
  • created_at
  • updated_at

• Application

  • id
  • jobId
  • userId
  • status (Pending, Accepted, Rejected)
  • resume
  • message
  • created_at
  • updated_at

• Interview

  • id
  • jobId
  • userId
  • type (Virtual, InPerson)
  • googleMeetLink
  • status (Pending, Approved)
  • created_at
  • updated_at

• Notification

  • id
  • userId
  • message
  • created_at
  • updated_at