CareerPath Solutions

CareerPath Solutions is a mobile application that helps users analyze and compare job offers by evaluating benefits, time-off policies, and salary packages. The app provides a personalized grading system based on user preferences to help make informed career decisions.

Table of Contents

• Features
• Project Structure
• Architecture
• Technologies Used
• Getting Started
  • Prerequisites
  • Installation
  • Environment Setup
• Running the App
• Testing
• Deployment
• Contributing
• License
• Flow Graphs
  • Angela Fujihara
  • Mark Buster
  • Dureti Shemsi
  • Mycole Brown
• Attributions

Features

• User Authentication: Secure sign-up, sign-in, and password reset functionality
• Job Offer Management: Create, view, and compare job offers
• Customizable Preferences: Set importance levels for different benefits and job aspects
• Personalized Grading System: Each job offer receives grades based on user preferences
• Dark Mode Support: Toggle between light and dark themes
• Responsive Design: Works on various device sizes
• Offline Capability: Limited functionality available without internet connection

Project Structure

The project follows a traditional layered architecture with clear separation of concerns:

project-root/
│
├── app/                      # Main application screens and routing
│   ├── _layout.tsx           # Root layout component with navigation configuration
│   ├── index.tsx             # Authentication screen
│   ├── MainMenu.tsx          # Home screen with navigation options
│   ├── BenefitForm.tsx       # Benefits selection form
│   ├── FAQ.tsx               # Frequently asked questions screen
│   ├── JobRating.tsx         # Job rating display
│   ├── NewJobOfferForm.tsx   # Form for creating new job offers
│   ├── PreferencesScreen.tsx # User preferences screen
│   ├── PreviousJobOffers.tsx # List of previous job offers
│   └── Settings.tsx          # User settings
│
├── assets/                   # Static assets like images
│
├── business/                 # Business logic layer
│   ├── calculators/          # Calculation utilities
│   │   └── gradeCalculator.ts # Algorithms for calculating grades
│   └── services/             # Business services
│       ├── benefitsService.ts    # Benefits processing
│       ├── jobOfferService.ts    # Job offer management
│       ├── JobHistoryServices.ts # Job history tracking
│       └── userService.ts        # User management
│
├── core/                     # Core application types and hooks
│   ├── hooks/                # Custom React hooks
│   │   └── ThemedContext.tsx # Theme context provider
│   └── types/                # TypeScript type definitions
│       ├── benefits.types.ts # Benefits-related types
│       ├── jobOffer.types.ts # Job offer types
│       ├── rating.types.ts   # Rating system types
│       └── user.types.ts     # User-related types
│
├── data/                     # Data access layer
│   ├── database/             # Database connection
│   │   └── supabase.ts       # Supabase client configuration
│   └── repositories/         # Data repositories
│       ├── jobOfferRepository.ts   # Job offer data operations
│       ├── JobHistoryRepository.ts # Job history data operations
│       └── userRepository.ts       # User data operations
│
└── src/                      # Source files
    ├── components/           # Reusable UI components
    │   ├── ClearHistoryModal.tsx   # Modal for clearing history
    │   ├── Collapsible.tsx         # Collapsible component
    │   ├── CustomCheckbox.tsx      # Custom checkbox component
    │   ├── IconSymbol.tsx          # Icon component
    │   └── PreferencesSlider.tsx   # Slider for preferences
    └── styles/               # Style definitions
        ├── AuthStyles.ts           # Authentication screen styles
        ├── BenefitsFormStyles.ts   # Benefits form styles
        ├── FAQStyles.ts            # FAQ screen styles
        ├── JobRatingStyles.ts      # Job rating styles
        └── ...                     # Other style files

Architecture

CareerPath Solutions uses a layered architecture pattern with four main layers:

1. Presentation Layer (app/, src/components/, src/styles/)

   • User interface components and screens
   • Styling and layout
   • User input handling

2. Business Logic Layer (business/)

   • Services that implement application-specific logic
   • Calculation utilities for grading job offers
   • Data transformation and processing

3. Data Access Layer (data/)

   • Repositories for CRUD operations
   • Database connection management
   • Data fetching and persistence

4. Core Layer (core/)

   • Type definitions shared across layers
   • Utility hooks and context providers
   • Constants and configuration

This layered approach promotes:

• Separation of concerns: Each layer has a specific responsibility
• Maintainability: Changes in one layer don't affect others
• Testability: Components and services can be tested in isolation
• Reusability: Lower layers can be reused by multiple higher-layer components

Technologies Used

• Frontend:

  • React Native - Cross-platform mobile app framework
  • Expo - React Native toolchain
  • Expo Router - File-based routing
  • TypeScript - Typed JavaScript
  • @react-native-community/slider - UI slider component
  • @react-native-picker/picker -UI picker component

• Backend:

  • Supabase - Backend-as-a-Service
  • PostgreSQL (via Supabase) - Database

• Authentication:

  • Supabase Auth - Email/password authentication

• State Management:

  • React Context API - Application state
  • Props drilling for component-specific state

• Styling:

  • React Native StyleSheet

Getting Started

Prerequisites

• Node.js (v18 or later)
• npm (v9 or later)
• Expo CLI
• iOS Simulator (for iOS development) or Xcode
• Android Studio & Android SDK (for Android development)
• Supabase account (for backend services)

Installation

1. Clone the repository:

   git clone https://github.com/A-Fujihara/JobOfferRating.git
   cd JobOfferRating

2. Install dependencies:

   npm install

Environment Setup

1. Create a .env file in the project root:

   cp .env.example .env

2. Update the .env file with your Supabase credentials:

   EXPO_PUBLIC_SUPABASE_URL=your_supabase_project_url
   EXPO_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
   

3. Set up Supabase tables according to the schema:

   • users: User accounts and profiles
   • job_offer: Job offer details
   • rating: Job offer ratings
   • user_preferences: User preference settings
   • median_salaries: Reference data for salary comparisons

Running the App

Start the development server:

npx expo start

This will display a QR code and options to run the app on:

• Localhost Web Browser
• iOS Simulator
• Android Emulator
• Physical devices with Expo Go

Testing

The project uses Jest for testing. To run tests:

npm test

Test Dependencies

Before running tests, ensure you have the required testing dependencies:

# Install required testing libraries
npm install --save-dev @testing-library/react-native react-test-renderer

Writing Tests

To create new tests, add files with the .test.tsx or .test.ts extension:

• For component tests: __tests__/components/
• For service tests: __tests__/services/
• For utility tests: __tests__/utils/

When testing services or repositories that have external dependencies (like Supabase or AsyncStorage), make sure to mock those dependencies:

// Example of mocking dependencies
jest.mock('../../../data/repositories/jobOfferRepository', () => ({
  jobOfferRepository: {}
}));

// Then import and test your service
import { yourService } from '../yourService';

Example of a simple test:

import { letterToNumber } from "../business/calculators/gradeCalculator";

describe("gradeCalculator", () => {
  it("should convert letter grades to numeric values", () => {
    expect(letterToNumber("A")).toBe(4.0);
    expect(letterToNumber("B")).toBe(3.0);
    expect(letterToNumber("C")).toBe(2.0);
    expect(letterToNumber("D")).toBe(1.0);
    expect(letterToNumber("F")).toBe(0.0);
  });
});

Deployment

Expo Build

To create a standalone build:

eas build --platform android
eas build --platform ios

Publishing to Stores

1. Update app.json with appropriate version numbers
2. Generate assets (icons, splash screens)
3. Follow the Expo documentation for submitting to app stores

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add some amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details

---

Database Schema

Users Table

CREATE TABLE users (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  user_name VARCHAR NOT NULL,
  auth_id VARCHAR UNIQUE NOT NULL,
  email VARCHAR,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

User Preferences Table

CREATE TABLE user_preferences (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  user_id UUID REFERENCES users(id),
  health INT DEFAULT 3,
  vision INT DEFAULT 3,
  vacation INT DEFAULT 3,
  sick INT DEFAULT 3,
  maternity INT DEFAULT 3,
  paternity INT DEFAULT 3,
  religious_leave INT DEFAULT 3,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

Job Offer Table

CREATE TABLE job_offer (
  id SERIAL PRIMARY KEY,
  company_name VARCHAR NOT NULL,
  position VARCHAR NOT NULL,
  salary VARCHAR NOT NULL,
  description TEXT,
  health_care BOOLEAN DEFAULT FALSE,
  vision BOOLEAN DEFAULT FALSE,
  vacation_time BOOLEAN DEFAULT FALSE,
  sick_time BOOLEAN DEFAULT FALSE,
  maternity_leave BOOLEAN DEFAULT FALSE,
  paternity_leave BOOLEAN DEFAULT FALSE,
  religious_leave BOOLEAN DEFAULT FALSE,
  stock_options BOOLEAN DEFAULT FALSE,
  retirement_401k BOOLEAN DEFAULT FALSE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

Rating Table

CREATE TABLE rating (
  id SERIAL PRIMARY KEY,
  company_name VARCHAR NOT NULL,
  benefits VARCHAR NOT NULL,
  time_off VARCHAR NOT NULL,
  salary VARCHAR NOT NULL,
  overall_grade VARCHAR NOT NULL,
  user_id UUID REFERENCES users(id),
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

Median Salaries Table

CREATE TABLE median_salaries (
  id SERIAL PRIMARY KEY,
  position VARCHAR UNIQUE NOT NULL,
  median_salary NUMERIC NOT NULL
);

Cyclomatic Complexity

Angela Fujihara

Mark Buster

Dureti Shemsi

Mycole Brown

Attributions

Angela Fujihara:

• Settings.tsx
• ClearHistoryModal.tsx
• CustomCheckbox.tsx
• _layout.tsx
• index.tsx
• gradeCalculator.ts
• benefitsService.ts
• userService.ts
• ThemedContext.tsx
• jobOffer.types.ts
• rating.types.ts
• user.types.ts
• userRepository.ts
• SettingsStyle.ts
• _layout.test.tsx
• jobHistoryService.ts

Dureti Shemsi

• NewJobOfferForm.tsx
• BenefitForm.tsx
• BenefitsFormStyles.ts
• NewJobOfferFormStyles.ts
• BenefitForm.test.tsx
• benefits.types.ts

Mark Buster

• MainMeu.tsx
• JobRating.tsx
• PreviousJobOffer.tsx
• FAQ.tsx
• jobOfferService.ts
• react-native-picker.d.ts
• jobHistoryRepository.ts
• jobOfferRepository.ts
• AuthStyles.ts
• ClearHistoryModal.ts
• FAQStyles.ts
• JobRatingStyles.ts
• PreviousJobOffersStyle.ts
• tests/jobOfferSerivce.test.ts

Mycole Brown

• PreferencesScreen.tsx
• PreferencesSlider.tsx
• PreferencesScreenStyles.ts
• PreferencesStyles.ts

Team pre-planning

This is the tool we used to layout our architectural design, using code examples and current files from our project.

LucidChart