Initial commit - jobsforit app ready for refactoring

.circleci/config.yml

@@ -0,0 +1,17 @@
+version: 2.1
+orbs:
+  node: circleci/[email protected]
+jobs:
+  build-and-test:
+    executor:
+      name: node/default
+    steps:
+      - checkout
+      - node/with-cache:
+          steps:
+            - run: npm install
+            - run: npm test
+workflows:
+    build-and-test:
+      jobs:
+        - build-and-test

.env.sample

@@ -0,0 +1,13 @@
+REACT_APP_SPACE_ID=your_space_id
+REACT_APP_ENVIRONMENT=your_environment
+REACT_APP_LANGUAGE=your_language
+REACT_APP_FB_SITE=your_fb_site
+REACT_APP_LINKEDIN=your_linkedin
+REACT_APP_ACCESS_TOKEN=your_access_token
+REACT_APP_MANAGER_TOKEN=your_manager_token
+REACT_APP_GTM_ID=your_gtm_id
+REACT_APP_GTAG=your_gtag
+REACT_APP_HOTJAR=your_hotjar
+REACT_FB_APP_ID=your_fb_app_id
+REACT_APP_MOBILE_LIMIT=your_mobile_limit
+REACT_APP_DESKTOP_LIMIT=your_desktop_limit

.gitignore

@@ -0,0 +1,33 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+/cypress/videos
+/cypress/screenshots
+
+# production
+/build
+
+# misc
+.DS_Store
+.idea
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.sass-cache
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+package-lock.json
+
+#SEO
+sitemap.xml

.nvmrc

@@ -0,0 +1 @@
+v14.15.0

README.md

@@ -0,0 +1,70 @@
+# Real-World Job Board App (Legacy Codebase)
+
+## Table of Contents
+
+1. [Introduction](#introduction)
+2. [Features](#features)
+3. [Tech Stack](#tech-stack)
+4. [Getting Started](#getting-started)
+5. [Installation Guidelines](#installation-guidelines)
+6. [Contributing](#contributing)
+7. [AI-powered Refactoring](#ai-powered-refactoring)
+8. [License](#license)
+
+## Introduction
+
+This repository contains a real-world job board application with a legacy codebase built using React, Contentful, and MobX. The application is a fully functional job listing platform that allows employers to post job offers and job seekers to apply. This project serves as a base for implementing AI-powered refactoring to improve code quality, maintainability, and performance.
+
+## Features
+
+- **Employer Dashboard**: Add, Edit, Delete job postings.
+- **Job Seeker Dashboard**: View jobs, apply, and manage applications.
+- **Admin Dashboard**: Oversee all activities and manage users.
+- **Search and Filtering**: Locate jobs based on criteria such as skills, location, and salary.
+
+## Tech Stack
+
+- **Frontend**: React.js
+- **State Management**: MobX
+- **Backend**: Contentful (Headless CMS)
+- **Styling**: Custom CSS / SASS
+- **Testing**: Jest, React Testing Library
+
+## Getting Started
+
+Before you start, make sure you have the following prerequisites installed:
+
+- Node.js
+- Yarn or npm
+- Contentful account
+
+## Installation Guidelines
+
+1. **Clone the repository**
+   ```bash
+   git clone https://github.com/AI-powered-refactoring/jobsforit-de.git
+
+2. **Navigate to the project directory**
+    ```bash
+    cd jobsforit-de
+    ```
+
+3. **Install dependencies**
+    ```bash
+    yarn install
+    ```
+
+4. **Set up environment variables**
+   Copy the `.env.sample` file to a new file named `.env` and fill in the necessary variables. For example:
+    ```env
+    REACT_APP_SPACE_ID=your_space_id
+    REACT_APP_ACCESS_TOKEN=your_access_token
+    # ...other variables
+    ```
+
+5. **Start the development server**
+    ```bash
+    yarn start
+    ```
+# jobsforit-de
+# jobsforit-de

cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "testFiles": "**/*.feature"
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/Apply.feature

@@ -0,0 +1,29 @@
+Feature: Apply for a job
+  In order to get a new job
+  As a user
+  I want to be able to apply
+
+Scenario: Coming from all jobs
+  Given I am on the main page
+  When I click on the job item
+  And I click apply button
+  Then I should see success modal
+
+Scenario: Coming from filtered jobs
+  Given I am on the main page
+  And jobs are filtered by tech and city
+  When I click on the job item
+  And I click apply button
+  Then I should see success modal
+
+Scenario: Coming from comparison list
+  Given I am on the comparison view
+  And jobs are filtered by tech and city
+  When I click on the job item
+  And I click apply button
+  Then I should see success modal
+
+Scenario: Coming from url
+  When I try to load job from url
+  And I click apply button
+  Then I should see success modal

cypress/integration/Apply/Apply.js

@@ -0,0 +1,40 @@
+import { Given, Before, When, And, Then } from 'cypress-cucumber-preprocessor/steps';
+
+Before(() => {
+  cy.viewport(1280, 1060);
+});
+
+Given('I am on the main page', () => {
+  cy.visit('/')
+});
+
+Given('jobs are filtered by tech and city', () => {
+  cy.get('button[value=Python]').click();
+  cy.get('button[value=Paris]').click();
+});
+
+Given('I am on the comparison view', () => {
+  cy.visit('/');
+  cy.contains('Senior Software Engineer (Python/Django)').click();
+});
+
+Given('I am on the job details view', () => {
+  cy.visit('/');
+  cy.contains('Senior Software Engineer (Python/Django)').click();
+});
+
+Given('I try to load job from url', () => {
+  cy.visit('/jobs/senior-software-engineer-python-backmarket-1sGCM2yo87SNF8FGKRWChW')
+});
+
+When('I click on the job item', () => {
+  cy.contains('Senior Software Engineer (m/w/d)').click();
+});
+
+When('I click apply button', () => {
+  cy.contains('Apply').click();
+});
+
+Then('I should see success modal', (term) => {
+  cy.contains('Good luck!');
+});

cypress/integration/ApplyMobile.feature

@@ -0,0 +1,28 @@
+Feature: Apply for a job on mobile
+  In order to get a new job
+  As a user
+  I want to be able to apply
+
+Scenario: Coming from all jobs
+  Given I am on the main page
+  When I click on the job item
+  And I click apply button
+  Then I should see success modal
+
+Scenario: Coming from filtered jobs
+  Given I am on the main page
+  And jobs are filtered by tech and city
+  When I click on the job item
+  And I click apply button
+  Then I should see success modal
+
+Scenario: Coming from job details
+  Given I am on the job details view
+  When I swipe to the right
+  And I click apply button
+  Then I should see success modal
+
+Scenario: Coming from url
+  When I try to load job from url
+  And I click apply button
+  Then I should see success modal

cypress/integration/ApplyMobile/ApplyMobile.js

@@ -0,0 +1,61 @@
+import { Given, Before, When, And, Then } from 'cypress-cucumber-preprocessor/steps';
+
+Before( () => {
+  cy.viewport('iphone-6');
+});
+
+Given('I am on the main page', () => {
+  cy.visit('/')
+});
+
+Given('jobs are filtered by tech and city', () => {
+  cy.contains('Edit filters').click();
+  cy.get('button[value=Python]').click();
+  cy.get('button[value=Paris]').click();
+  cy.contains('Filter jobs').click();
+  cy.contains('Edit filters');
+});
+
+Given('I am on the comparison view', () => {
+  cy.visit('/');
+  cy.contains('Senior Software Engineer (Python/Django)').click();
+});
+
+Given('I am on the job details view', () => {
+  cy.visit('/');
+  cy.contains('Senior Software Engineer (Python/Django)').click();
+});
+
+Given('I try to load job from url', () => {
+  cy.visit('/jobs/senior-software-engineer-python-backmarket-1sGCM2yo87SNF8FGKRWChW')
+});
+
+When('I click on the job item', () => {
+  cy.contains('Senior Software Engineer (Python/Django)').click();
+});
+
+When('I swipe to the right', (term) => {
+  cy.get('[data-cy=jobMobileDetails]')
+    .trigger('mousedown', { which: 1 }) // start capture
+    .trigger('mousemove', 'left') // register start position
+    .trigger('mousemove', 'right') // register end position
+    .wait(0) // wait for requestAnimationFrame to invoke fireOnMove
+    .trigger('mouseup'); // end capture
+});
+
+When('I swipe to the left', (term) => {
+  cy.get('[data-cy=jobMobileDetails]')
+    .trigger('mousedown', { which: 1 }) // start capture
+    .trigger('mousemove', 'right') // register end position
+    .trigger('mousemove', 'left') // register start position
+    .wait(0) // wait for requestAnimationFrame to invoke fireOnMove
+    .trigger('mouseup'); // end capture
+});
+
+When('I click apply button', () => {
+  cy.contains('Apply').click();
+});
+
+Then('I should see success modal', (term) => {
+  cy.contains('Good luck!');
+});

cypress/integration/Filter.feature

@@ -0,0 +1,27 @@
+Feature: Filter jobs
+  In order to find a job
+  As a user
+  I want to be able to filter jobs
+
+Scenario: Filter subcategory
+  Given I am on the main page
+  And select the React filter
+  Then I should see the React jobs
+  Then I should not see the JQuery jobs
+
+Scenario: Filter parent category
+  Given I am on the main page
+  And select the JS filter
+  Then I should see the React jobs
+
+Scenario: Filter from dropdown
+  Given I am on the main page
+  And I hover over dropdown
+  And select the other filter
+  Then I should see the other jobs
+
+#TODO:
+#Scenario: Filter salary
+#  Given I am on the main page
+#  And I move the bottom salary slider to 100k
+#  Then I should only see the jobs over 100k