Tracker by Turing

(back to top)

Welcome to Tracker by Turing! This web app is intended to be a useful tool for students as they transition from school into the job hunt. It allows users to create and view lists of job applications, companies, and professional contacts, while also saving their created lists to a web-hosted Rails database in the background. The backend repo that manages this database lives here: https://github.com/turingschool/tracker-crm.

This project is the product of the efforts of 35+ Turing students working collaboratively across several graduating classes. A full list of contributors can be found at the bottom of this README, along with a list of licenses.

Vist the Tracker Site

(back to top)

• npm

  npm install npm@latest -g
  

This project uses CircleCI for Continuous Integration (CI). Since CircleCI is already set up for this repository in GitHub, you shouldn't need to do any extra setup for it as long as you have write access to the repository. If you would like to set up CircleCI for a personal fork or other repository of your own, try following the instructions below:

1. Sign Up for CircleCI:

   • Visit CircleCI
   • Click "Log in"
   • Click "Log in" button on the authorize page
   • Click the text that says, "Signed up for CircleCI with GitHub or Bitbucket before September 2023?"
   • Log in with GitHub

2. Authorize CircleCI:

   • Allow CircleCI to access this repository.

3. Add the Configuration File:

   • Ensure the .circleci/config.yml file is present in the repository.

   • The current configuration uses Cypress for testing:

     version: 2.1
     orbs:
       cypress: cypress-io/cypress@3.1.1
     workflows:
       build:
         jobs:
           - cypress/run:
               cypress-command: npx cypress run --headless
               start-command: npm start

4. Verify the CI Pipeline:

   • Push your changes to the main branch.
   • Navigate to the CircleCI dashboard to confirm that tests run successfully.

For more information, see the CircleCI Documentation.

1. Clone the repo

   git clone https://github.com/github_username/repo_name.git

2. Install NPM packages

   npm install

(back to top)

1. To run a single test file via CLI: npx cypress run --spec "<relative file path name>"
2. To run a folder of tests via CLI: npx cypress run --spec "<relative folder path>"
3. To run all Cypress tests via CLI: npx cypress run
4. To open the Cypress UI dashboard: npx cypress open

Note: Frontend and Backend servers should be running before running Cypress commands.

Before adding a new Cypress test: Custom Cypress commands are set up at cypress/support/commands.ts to enhance test readability and avoid repetitive long code.

(back to top)

Users must register their account to utilize this application.

The User Registration section allows new users to create an account by filling out all necessary fields with the requried information. Empty fields or invalid information throws specific errors instructing users to correct their mistake in order to proceed.

Existing users may click the 'login' link to directly navigate to the Login page.

![User Login]

The MenuBar component provides a responsive navigation interface for your application, designed for both desktop and mobile users. Here’s an overview of its functionality:

• Fixed Vertical Menu: A static vertical navigation bar located on the left side of the screen, hidden on smaller screens.
• Logo: Clicking the logo redirects users to the home page.
• Navigation Links: Includes icons for navigating to key sections:
  • Home
  • Contacts
  • Companies
  • Job Applications
  • Account
• Drop-Down Shortcut Menu: Provides quick access to add new items:
  • Add New Contact
  • Add New Company
  • Add New Job Application

• Hamburger Menu: A collapsible menu for smaller screens.
• Slide-Out Menu: A sidebar that slides in from the left when opened.
• Close Button: Closes the slide-out menu.
• Navigation Links: Similar to the desktop navigation, but tailored for mobile interaction.
• Drop-Down Shortcut Menu: A simplified version of the desktop drop-down, allowing quick actions for adding new contacts, companies, or job applications.

• Quad Color Bar: A decorative vertical bar split into four colors, enhancing the visual design.

The home page/dash is where a user can see there weekly report.

Functionalities Include:

• User can see the job applications, contacts, and companies they have made for the week.
• as well as having a simple button to port you to add a new company

The Companies section allows users to seamlessly manage a list of their companies.

Key Functionalities Include:

• View All Companies: Browse a comprehensive list of companies with detailed information such as company name, application status, and notes.
• View Company Details: Click on a company to see detailed information on a dedicated page, including the company’s name, website, address, and notes. The details page also displays a list of associated contacts, making it easier to manage relationships and connections.
• Create a Company: Add new companies by filling out a simple form with fields like name, website, address, and notes (includes rich text formatting when text is selected).
• Update a Company: Click the Edit button on a company's details page to open a modal. Modify any field, including the company name, website, address, state, or notes, and save the changes effortlessly.
• Search for a Company: Use the search bar to quickly find companies by name, enhancing efficiency and user experience.
• Delete a Company: Click on the delete button in the company details page to remove a company. A confirmation modal will appear to verify the decision before proceeding. Deleting a company does not remove its associated contacts.

The Contacts section allows users to navigate their contacts.

Key Functionalities Include:

• View All Contacts: Browse a comprehensive list of contacts with info like their name, company, and notes. Includes a search bar and ability to create a new contact.
• View a Contact: Click on a contact to see detail info on a dedicated page, such as their name, company, email address, phone number, notes and any other contacts associated with the company. Click on the other contacts to view their contact page. Click the contact's email address to open their mail client with an email to the contact. Click on the company name to view company name details.
• Edit a Contact: Click edit in show contact page to open a modal that will enable a contact to be edited. First name and last name are required fields and the rest are optional. To exit the modal without saving changes, click the x in the corner or outside of the modal to close it. To save changes, click the save button. The modal will automatically close and the changes will be immediately viewable on your contact page.
• Delete a Contact: Click delete in show contact page to remove a contact, with a modal to verify the decision.
• Add a new Contact Click on the Add New + button to navigate to a form where a user inputs a new contact and their associated information. The notes section includes rich text formatting when text is selected. The user has the ability to add a new company here as well.
• Search for a Contact Use the search bar to quickly find a contact by name, enhancing efficiency and user experience.

(back to top)

• View All Job Applications:

• View A Job Application:

• Delete a Job Application: Click delete in the show job application page to remove a job application, with a modal to verify the decision. After the job application is successfully deleted you will be returned to the main job application page.

• Create A Job Application:

Add a new job application by filling out a form with fields for Position Title, Company, Date Applied, Application Status, Job Description, User Contacts, Application URL, and Notes (includes rich text formatting when text is selected). Choose a company that exists under your profile.

• Edit A Job Application: Edit several of the fields of an application that has already been input into the system to stay up to date on where in the process the application is at.

• Edit an Application Date or Status: Job application dates and statuses can also be edited directly on the job application page. Dates can be changed by clicking on the "Applied On" date to pull up an interactive calendar, and clicking on a new date. Statuses can be changed by clicking on the current status and selecting a new status from the dropdown.

• Practice Interview: Ten technical interview questions are generated based on the job description you share. These questions are to help prepare for a potential interview.

Helvetica Neue Sans-Serif

Example: className="text-[5vw] font-[Helvetica Neue]"

MUI's SvgIcon icons

<div className="w-[50vw] mx-auto my-[2vh] p-[3vh] ">

Cyan-600

Cyan-600

<div bg-cyan-600 text-white px-[2vw] py-[1vh] rounded w-[10vw] hover:bg-cyan-700 focus:ring-cyan-500 focus:ring-2>

*Cyan-500

Cyan-800 for right half and login button
Sky-200 for Login Page Title

<label htmlFor="email" className="block text-gray-700 font-medium mb-[1vh]"> Email </label> <input className="w-full px-[1vh] py-[1vh] border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cyan-500" name="email"/>

(back to top)

Banks, Charles

• Github
• LinkedIn

Bleggi, Jillian

• Github
• LinkedIn

Bloom, Stefan

• Github
• LinkedIn

Cardona, Danielle

• Github
• LinkedIn

Chirchirillo, Joe

• Github
• LinkedIn

Cirbo, Candice

• Github
• LinkedIn

Cochran, James

• Github
• LinkedIn

Croy, Lito

• Github
• LinkedIn

Davalos, Joel

• Github
• LinkedIn

Delaney, Kyle

• Github
• LinkedIn

De La Rosa, Melchor

• Github
• LinkedIn

Fallenius, Karl Frederick

• Github
• LinkedIn

Fox, Will

• Github
• LinkedIn

Freyr, Rig

• Github
• LinkedIn

Galvin, Shane

• Github
• LinkedIn

Green, Beverly

• Github
• LinkedIn

Haefling, Matt

• Github
• LinkedIn

Hill, John

• Github
• LinkedIn

Hotaling, Marshall

• Github
• LinkedIn

Inman, Jacob

• Github
• LinkedIn

Kendall, Mark

• Github
• LinkedIn

Knapp, Paul

• Github
• LinkedIn

Lynch, Devlin

• Github
• LinkedIn

Macur, Jim

• Github
• LinkedIn

Manning, Terra

• Github
• LinkedIn

McKee, Sebastian

• Github
• LinkedIn

Messersmith, Renee

• Github
• LinkedIn

Newland, Kevin

• Github
• LinkedIn

O'Brien, Michael

• Github
• LinkedIn

O'Leary, Ryan

• Github
• LinkedIn

Pintozzi, Erin - (Project Manager)

• Github
• LinkedIn

Riley, Alora

• Github
• LinkedIn

Salazar, Kaelin

• Github
• LinkedIn

Sommers, Jono

• Github
• LinkedIn

Vasquez, Natasha

• Github
• LinkedIn

Verrill, Seth

• Github
• LinkedIn

Wallace, Wally

• Github
• LinkedIn

Ward, Elysa

• Github
• LinkedIn

Weiland, Kristin

• Github
• LinkedIn

Willett, Bryan

• Github
• LinkedIn

(back to top)

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)