Job Journey

by Kim Robinson

---

hosted on Vercel

---

Jump to section

• About the Project
  • Description
  • Built With
  • Known Bugs
• Getting Started
  • Prerequisites
  • Setup
• Stretch Goals
• Contact and Support
• License

---

---

About the Project

Description

Built out of a desire to lighten the frustration with the saturated Junior Developer market and to continue learning new technology. Job journey is an application where a user can enter their job search details into a form and see the results in a pie chart, bar chart or line graph.

Built With

Known Bugs

• Currently adding new application data only updates the current browser state (refreshing the page resets it to the csv containing 103 entries) because there is no back end set up for this to save and maintain the data. It's probably for the best so I don't have someone spamming my form.

Getting Started

Prerequisites

Code Editor

To view or edit the code, you will need a code editor or text editor. The open-source code editor we used is VisualStudio Code.

1. Code Editor Download: VisualStudio Code
2. Click the download most applicable to your OS and system.
3. Wait for download to complete, then install -- Windows will run the setup exe and macOS will drag and drop into applications.

Setup

Clone repository

1. Navigate to the repository.

2. Click the Fork button and you will be taken to a new page where you can give your repository a new name and description. Choose "create fork".

3. Click the Code button and copy the url for HTTPS.

4. On your local computer, create a working directory of your choice.

5. In this new directory, via the terminal, type $ git clone https://github.com/kimmykokonut/job-journey.

6. Run the command cd job-journey to enter into the project directory.

7. View or Edit: On your terminal, type $ code . to open the project in VS Code.

8. In VSCode- in project directory of the terminal: type $ npm install to compile the application's code and install all needed dependencies.

9. Run local server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

10. You can now see my project on your local server as is. To add your own data, you can use the form input on the client side or import your own CSV using D3.

CSV

• If you would like to use your own spreadsheet data, title your columns: Date Company Postition Source Status
• I used google sheets: to download the cells as a .csv,

  1. File>Download>Comma separated values(.csv)

  2. Move .csv file into the public folder of this repository
  3. In page.tsx, line 19, update the file to match your file name and the d3 function will convert the .csv to an object for the charts to use.
  4. Note: Make sure your Status is in double quotes ("Hired") because the code is set to handle this as an array of strings, as a job application may have more than one status (["Interview", "Hired"]) as built in the form to add new applications.

Stretch Goals

• Add edit form to update/add to application status
• Have option to display data as boring spreadsheet
• I built this with dark mode in mind, it would be nice to add a slider and tweak the light mode a bit.

Contact and Support

If you have any feedback or concerns, Report Bug Request Feature

License

GNU General Public License, see license.md for details