The latest articles on DEV Community by Mert izgahi (@mert_izgahi_e1e5719866b86). https://dev.to/mert_izgahi_e1e5719866b86 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1679599%2F5a606929-7aa0-41b8-8743-0c6930527eed.png https://dev.to/mert_izgahi_e1e5719866b86 en Mert izgahi Mon, 28 Oct 2024 20:02:13 +0000 https://dev.to/mert_izgahi_e1e5719866b86/join-to-my-journey-to-learn-building-full-stack-web-application-33bn https://dev.to/mert_izgahi_e1e5719866b86/join-to-my-journey-to-learn-building-full-stack-web-application-33bn <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fig2fonf93938aj4imoix.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fig2fonf93938aj4imoix.png" alt="Image description" width="800" height="450"></a></p> <p>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.</p> <p>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.</p> <p><a href="https://gitlab.com/mern2834339/job-board" rel="noopener noreferrer">Project Repository</a><br> <a href="https://www.youtube.com/playlist?list=PLN4WTu8pa217VTAbhLWFcHS3vffsUSiUb" rel="noopener noreferrer">Youtube Playlist</a></p> <h1> Job Board </h1> <p>A MERN Stack Job Board app. allow users to post jobs and apply to them.</p> <h2> Teck Stack </h2> <ul> <li>React</li> <li>Redux</li> <li>React Router</li> <li>React Hook Form</li> <li>Tailwind CSS</li> <li>Shadecn Tailwind</li> <li>Zod</li> <li>Express</li> <li>Mongoose</li> <li>Cloudinary</li> <li>JWT</li> <li>Bcrypt</li> <li>Nodemailer</li> <li>Typescript</li> <li>Vite</li> <li>Node</li> </ul> <h2> Features </h2> <ul> <li>Post jobs</li> <li>Apply to jobs</li> <li>Search jobs</li> <li>Pagination</li> <li>Filter jobs</li> <li>Sort jobs</li> <li>Manage applications</li> <li>Manage jobs</li> <li>Manage resumes</li> <li>Manage interviews</li> <li>Manage notifications</li> </ul> <h2> Application Flow </h2> <h3> User As Employer </h3> <ul> <li>Register - Or - Login</li> <li>Account <ul> <li>Update Profile</li> <li>Change Password</li> </ul> </li> <li> <p>Company Settings</p> <ul> <li>Setup Company Profile</li> <li>Update Company Profile</li> </ul> </li> <li> <p>Dashboard</p> <ul> <li>Manage Jobs</li> <li>Create Job</li> <li>Update Job</li> <li>Delete Job</li> <li>Reactivate Job</li> <li>Archive Job</li> <li>Unarchive Job</li> <li>Filter Jobs</li> <li>Sort Jobs</li> <li>Search Jobs</li> <li>Manage Applications</li> <li>View Applications</li> <li>Accept Application</li> <li>Reject Application</li> <li>Manage Interviews</li> <li>Create Interview</li> <li>Update Interview</li> <li>Delete Interview</li> <li>Manage Notifications</li> <li>View Notifications</li> <li>Mark Notification as Read</li> <li>Delete Notification</li> <li>Logout</li> </ul> </li> </ul> <h3> User As Candidate </h3> <ul> <li><p>Register - Or - Login</p></li> <li> <p>Account</p> <ul> <li>Update Profile</li> <li>Change Password</li> </ul> </li> <li> <p>Root</p> <ul> <li>Jobs</li> <li>View Job</li> <li>Apply to Job</li> <li>Filter Jobs</li> <li>Sort Jobs</li> <li>Search Jobs</li> </ul> </li> <li><p>Applications</p></li> <li><p>View Application</p></li> <li><p>Create Application</p></li> <li><p>Update Application</p></li> <li><p>Delete Application</p></li> <li> <p>Interviews</p> <ul> <li>View Interview</li> <li>Approve Interview</li> </ul> </li> <li> <p>Notifications</p> <ul> <li>View Notification</li> <li>Mark Notification as Read</li> <li>Delete Notification</li> </ul> </li> <li> <p>Resume</p> <ul> <li>Upload Resume</li> <li>Delete Resume</li> <li>Select Active Resume</li> </ul> </li> <li><p>Logout</p></li> </ul> <h3> User As Candidate </h3> <h2> Database </h2> <ul> <li>MongoDB</li> <li>Mongoose</li> </ul> <h2> Models </h2> <ul> <li> <p>Job</p> <ul> <li>id</li> <li>title</li> <li>description</li> <li>level (Senior, Junior, Intern)</li> <li>applicationMethod (email,external,linkedin,jobboard)</li> <li>location (JobType -&gt; Remote, Hybrid, Onsite)</li> <li>applicationLink?</li> <li>applicationDeadline</li> <li>category</li> <li>salary</li> <li>requirements</li> <li>responsibilities</li> <li>showSalary</li> <li>status (Active, Archived)</li> <li>created_at</li> <li>updated_at</li> </ul> </li> <li> <p>Company</p> <ul> <li>id</li> <li>name</li> <li>description</li> <li>website</li> <li>linkedin</li> <li>logo</li> <li>city</li> <li>state</li> <li>country</li> <li>cover</li> <li>size</li> <li>location</li> <li>created_at</li> <li>updated_at</li> </ul> </li> <li> <p>User</p> <ul> <li>id</li> <li>name</li> <li>email</li> <li>password</li> <li>role (Candidate, Employer, Admin)</li> <li>company?</li> <li>linkedIn</li> <li>github?</li> <li>dribble?</li> <li>activeResume?</li> <li>cover?</li> <li>imageUrl?</li> <li>created_at</li> <li>updated_at</li> </ul> </li> <li> <p>Resume</p> <ul> <li>id</li> <li>userId</li> <li>resumeUrl</li> <li>created_at</li> <li>updated_at</li> </ul> </li> <li> <p>Application</p> <ul> <li>id</li> <li>jobId</li> <li>userId</li> <li>status (Pending, Accepted, Rejected)</li> <li>resume</li> <li>message</li> <li>created_at</li> <li>updated_at</li> </ul> </li> <li> <p>Interview</p> <ul> <li>id</li> <li>jobId</li> <li>userId</li> <li>type (Virtual, InPerson)</li> <li>googleMeetLink</li> <li>status (Pending, Approved)</li> <li>created_at</li> <li>updated_at</li> </ul> </li> <li> <p>Notification</p> <ul> <li>id</li> <li>userId</li> <li>message</li> <li>created_at</li> <li>updated_at</li> </ul> </li> </ul> mern react shadecn express