restructured files

frontend/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+# next-env.d.ts

frontend/.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

frontend/.prettierrc

@@ -0,0 +1 @@
+{}

frontend/Dockerfile

@@ -0,0 +1,65 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN yarn build
+
+# If using npm comment out above and use below instead
+# RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+# set hostname to localhost
+ENV HOSTNAME "0.0.0.0"
+
+CMD ["node", "server.js"]

frontend/README.md

@@ -0,0 +1,161 @@
+# Shift_Enter Next.js Frontend
+
+# Next.js Frontend
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped using [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with Material UI installed.
+
+To learn more:[Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+[Customizing Material UI](https://mui.com/material-ui/customization/how-to-customize/) - approaches to customizing Material UI.
+
+## How to Use
+
+Before you begin, make sure you have Node.js installed. You can download it from [Node.js server](https://nodejs.org/en)
+
+Install the necessary project dependencies. You can do this by running the following command:
+```bash
+npm install
+```
+
+Start the development server:
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## Testing
+For testing we use Cypress test runner.
+
+To run tests in a web browser:
+```bash
+ npx cypress open
+```
+To run tests in the console for automated testing: 
+```bash
+npx cypress run
+```
+To add test visit: frontend/cypress
+
+For more information: [Cypress doc](https://docs.cypress.io/guides/core-concepts/introduction-to-cypress)
+
+Note: The app has not undergone comprehensive testing due to time constraints and our limited experience. However, we intend to follow Test-Driven Development (TDD) principles in future app development.
+
+## Deployment - technical information
+The app has been successfully deployed and can be accessed at the following URL: [Shift+Enter](https://nextjsapp-iwghenktca-ew.a.run.app/)
+
+For deployment we used [Google cloud platform](https://console.cloud.google.com/welcome?project=enter-400508)
+
+To deploy the app, you need to have the Google Cloud Console installed.
+
+After installation, follow these steps to build and deploy the app:
+
+1. Navigate to the required directory.
+
+2. Build the app:
+```bash
+npm run gcbuild 
+```
+
+3. Deploy the app:
+```bash
+npm run gcdeploy
+```
+
+## Implemented flows
+
+For testing purposes, you can use the following user accounts with different roles:
+
+**USER 1**
+
+- Email: `[email protected]`
+- Password: `Company123.123`
+- Role: `company user`
+
+**USER 2**
+
+- Email: `[email protected]`
+- Password: `Candidate123.123`
+- Role: `candidate`
+
+**USER 3**
+
+- Email: `[email protected]`
+- Password: `Association123.123`
+- Role: `association user`
+
+### Company User Flow
+This is the primary flow implemented within our application, providing company users with a seamless experience to navigate and interact with various features. Below, we outline the steps involved in the Company User Flow. You can also view a video demonstration of this flow, created from our Figma mockups, at [link to video].
+
+**Note:** All data in this flow is downloaded from the testing database where the testing datasets have been prepared.
+
+### Flow Steps
+
+### 1. User Log In
+Company users log in to their accounts, providing authentication.
+
+### 2. List of Posted Jobs
+Upon successful login, users are redirected to the list of jobs posted by the company.
+
+### 3. Preview One Job
+From the list of posted jobs, users have the option to preview details of a specific job.
+
+### 4. List of Matched Candidates
+Users can also access a list of candidates matched to the selected job.
+
+### 5. List of Balanced Matched Candidates
+Or access a list of candidates generated by the balanced algorithm.
+This feature is currently not implemented in the application, but it serves an educational purpose. This feature is designed to provide users with insights into the concept of balanced matching.
+Balanced matching is a technique aimed at reducing bias in candidate selection. It ensures that the selection process is fair and equitable, promoting diversity and inclusivity in the workplace.
+
+### 6. Filter Candidates
+Within the list of matched candidates, users have the ability to apply filters to refine the displayed candidates.
+
+### 7. List of All Candidates Matched
+Users can access a comprehensive list of all candidates matched to all posted jobs by the company.
+
+### 8. Preview Candidate Profile
+Within the list of candidates, users can preview the profile of a specific candidate.
+
+### 9. Un-blur Hidden Data
+Users have the option to un-blur hidden data within the candidate profiles.
+
+### 10. Preview CV
+Users can view the candidate's curriculum vitae (CV) directly from the profile.
+
+### 11. Add Comment
+Users can add comments related to a candidate's profile or qualifications.
+
+### 12. Contact the Candidate
+While the email functionality is not active, users have the option to initiate contact with a candidate.
+
+Please note that this documentation outlines the sequential steps and capabilities within the Company User Flow. 
+It allows company users to efficiently manage their posted jobs and interact with matched candidates in a user-friendly manner.
+
+### Candidate User Flow
+
+This flow outlines the user journey for candidates within our application. Candidates have specific actions and interactions designed to enhance their experience.
+For a visual demonstration of this flow based on our Figma mockups, you can watch a video [here](link to video).
+
+### Flow Steps
+
+### 1. Candidate Log In
+Candidates start by logging into the application, providing their authentication details.
+
+### 2. Profile Page
+Upon successful login, candidates are directed to their profile page. Here, they have several options:
+
+- Edit Profile:
+Candidates can edit and update their profile information to keep it current.
+
+- Preview Profile:
+Candidates can view their own profile as it appears to others.
+
+### 3. Job Listings
+   Candidates can navigate to the "Jobs" section, where they can view job listings posted by various companies. Please note that this feature showcases dummy data for preview purposes and does not reflect real job listings from the database.
+
+### 4. Role-Based Redirection
+   In case a candidate attempts to access a part of the app that is not permitted for their role (e.g., company or association functionalities), the system will automatically redirect them to a warning page, notifying them of their unauthorized access.
+
+This flow ensures that candidates can manage their profiles, explore job opportunities, and adhere to role-based restrictions for a secure and efficient user experience.
+

frontend/cypress.config.ts

@@ -0,0 +1,17 @@
+import { loadEnvConfig } from "@next/env";
+import { defineConfig } from "cypress";
+
+const { combinedEnv } = loadEnvConfig(process.cwd());
+export default defineConfig({
+  env: combinedEnv,
+  e2e: {
+    baseUrl: "http://localhost:3000",
+    retries: {
+      runMode: 3,
+    },
+    viewportHeight: 1080,
+    viewportWidth: 1920,
+    video: false,
+    screenshotOnRunFailure: false,
+  },
+});

frontend/cypress/e2e/homepage.cy.ts

@@ -0,0 +1,5 @@
+describe("Homepage", () => {
+  it("loads", () => {
+    cy.visit("http://localhost:3000/");
+  });
+});

frontend/cypress/e2e/jobList.cy.ts

@@ -0,0 +1,65 @@
+describe("JobList Component", () => {
+  before(() => {
+    cy.intercept(
+      "POST",
+      "https://django-backend-shift-enter-u53fbnjraa-oe.a.run.app/api/login/",
+      {
+        access_token:
+          "eyJhbGciOiJIUzI1NiIsImtpZCI6ImdrdVlyMFVnYmF5MjVMRWQiLCJ0eXAiOiJKV1QifQ.eyJhdWQiOiJhdXRoZW50aWNhdGVkIiwiZXhwIjoxNjk4NTYxNTI0LCJpYXQiOjE2OTg0NzUxMjQsImlzcyI6Imh0dHBzOi8vaWN1eHprbG5teW9iZmpneHVkb2guc3VwYWJhc2UuY28vYXV0aC92MSIsInN1YiI6IjlmMmRiYzllLWRiZWQtNDkyYy04ODhlLTBkMTI3OTJmMTZhMyIsImVtYWlsIjoiY29tcGFueUBjb21wYW55LmNvbSIsInBob25lIjoiIiwiYXBwX21ldGFkYXRhIjp7InByb3ZpZGVyIjoiZW1haWwiLCJwcm92aWRlcnMiOlsiZW1haWwiXX0sInVzZXJfbWV0YWRhdGEiOnsiaWQiOjEsInByb3ZpZGVyIjoiZW1haWwiLCJwcm92aWRlcnMiOlsiZW1haWwiXSwidXNlcl90eXBlIjoiY29tcGFueV91c2VycyJ9LCJyb2xlIjoiY29tcGFueV91c2VyIiwiYWFsIjoiYWFsMSIsImFtciI6W3sibWV0aG9kIjoicGFzc3dvcmQiLCJ0aW1lc3RhbXAiOjE2OTg0NzUxMjR9XSwic2Vzc2lvbl9pZCI6ImY2M2YxMjE3LWViMzgtNGZjMi04ZTk1LTMzNTkxYTI2NDJlOCJ9.cnVsGqLwUk9ME7tUHt7l9oG5LwcFV_FTMoVw_8IX-dA",
+        token_type: "bearer",
+        expires_in: 86400,
+        expires_at: 1698561524,
+        role: "company_user",
+        last_sign_in_at: "2023-10-28T06:38:44.972090684Z",
+        id: 1,
+        refresh_token: "HvtEzH_onnvbFLkH5gsjng",
+        first_name: "Robert",
+        last_name: "Art",
+        preferred_name: "Roland",
+      },
+    ).as("login");
+  });
+  it("should redirect me into login if I want approach the app without auth", () => {
+    cy.visit("http://localhost:3000/company/jobs");
+    cy.url().should("include", "/login");
+  });
+  it("should redirect me into company's job list after log in as a company user", () => {
+    cy.intercept("");
+    cy.visit("http://localhost:3000/login");
+    cy.get("#email").type("[email protected]");
+    cy.get("#password").type("Company123.123");
+    cy.get("form").submit();
+    cy.url().should("include", "/company/jobs");
+    const jobPosts = [
+      {
+        job_id: "12345",
+        hard_skills: ["JavaScript", "React", "Node.js"],
+        soft_skills: ["Communication", "Problem Solving"],
+        matches: "88.5",
+        job_title: "Frontend Developer",
+        location: "Geneva",
+        industry: "Technology",
+        raw_description: "This is a job description...",
+        job_description: "Frontend developer needed for our team.",
+        values: ["Innovation", "Teamwork"],
+        website: "https://www.example.com",
+        languages: ["English", "Spanish"],
+        open: true,
+        description_embedded: "Embedded description...",
+        last_day_to_apply: "2023-12-31",
+        closed_at: 1640947200,
+        created_at: 1640940000,
+        job_type: "Full-time",
+        work_model: "On-site",
+        matched_candidates: 5,
+      },
+    ];
+    cy.intercept(
+      "GET",
+      "https://django-backend-shift-enter-u53fbnjraa-oe.a.run.app/api/company_jobs/",
+      {
+        body: jobPosts,
+      },
+    ).as("jobPosts");
+  });
+});