Job Finder

Video Demo: <Job Finder>

Description:

Special thanks to Traversy Media for the beginner tutorial of React frontend.

Traversy Media (2024) React crash course 2024, YouTube. Available at: https://www.youtube.com/watch?v=LDB4uaJ87e0 (Accessed: 09 June 2024).

Job Finder is a web application that allows job finder to view existing jobs available in the market and he may contact the job poster via contact phone number or contact email. Meanwhile, it also allows job poster to add new job positions to the market, edit existing jobs and delete existing unwanted jobs.

This web application utilizes the following :

• Frontend - React with Tailwind CSS Framework
• Backend - Flask
• Database - Sqlite3

Project is running in two separate folders, where the client folder is where frontend files are stored and the server folder is where backend files are stored.

The following is the tree structure of client folder.

• client
  • public
  • src - All frontend react files are located
    • assets
      • images
        • find_job_logo.png - Logo for navbar
    • components
      • Hero.jsx - Main title for the home page
      • Card.jsx - Two options provided, browse or add jobs
      • HomeCards.jsx - Contains the two cards components
      • Joblisting.jsx - Displays each joblisting components
      • Joblistings.jsx - Displays all jobslistings components available
      • Navbar.jsx - Displays navbar component with all links navigating among pages
      • Spinner.jsx - Show a spinner when loading
      • ViewAllJobs.jsx - Link to /jobs page
    • layouts
      • MainLayout.jsx - Contains Navbar component, so that it can be called at every page
    • pages
      • AddjobPage.jsx - Adds new job when submitting the form
      • EditJobPage.jsx - Preloads the form with existing data and update the data when updated
      • HomePage.jsx - Contains Hero, Homecards, Joblistings and ViewAllJobs components
      • JobPage.jsx - Displays data according to the specific ID, allows edit and delete function of the data
      • JobsPage.jsx - Contains JobListings component
      • NotFoundPage.jsx - Triggers when the page is not found
    • App.jsx - Contains all pages and API calls to interact with backend
    • index.css - Where Tailwind CSS is imported
    • jobs.json - Contains sample data for databse to display in frontend
    • main.jsx - Calls App component to render the whole application
    • index.html - Contains script called main.jsx
      
      
  • configuration files:
    • .eslintrc.cjs
    • package.json
    • package-lock.json
    • postcss.config.js
    • tailwind.config.js
    • vite.config.js

The following is the tree structure of server folder

• server - All backend Flask files are located
  • jobs.db - Database for storing all data that required to be displayed in the frontend
  • populate_data.py - For populating sample data from jobs.json in client/src folder
  • routes.py - All APIs for interacting with database and fronend are stored

To run this project:

Optionally, you may create virtual environment for both folders.

Open two terminals, one for server folder and one for client folder.

In server folder, run npm install --save and pip install requirements.txt to install necessary NodeJS dependencies (nodemon) and Python modules
After installing, run npx nodemon routes.py to start the backend server

In client folder, run npm install --save to download necessary dependencies.
After installing, run npm run dev to start the frontend application

Introduction to the project:

When both terminals are connected, the web application is running and you will see the above page.

Here's the navigtion bar:

1. Directing to home page
2. Directing to jobs page, which shows all jobs available
3. Directing to Add job page, where user can add new job
   
   

Here's few buttons to interact with:

      4. Directing to jobs page
      5. Directing to Add job page
      6. Directing to selected job page
      7. Directing to jobs page

Once in selected job page, user is allowed to :
      8. Go back to home page
      9. Directing to edit page for editing the selected job
      10. shows a browser prompt asking user whether he wanted to delete the selected job. If deleted, data will be removed in database

Edit job page shows a form with pre-filled data of the selected job. User is allowed to edit the data and press the Update Job button to submit and data will be modified accordingly.

Similar to editJobPage form, addJob Page allows user to insert new jobs to the database by clicking on the Add Job button. Default validation provided by the web browser is implemented also.

Last modified: 14/6/2024