CPF

Career Progression Framework Application

Kellton Europe CPF app is an innovative web-based platform – a seamless solution designed to connect employees, managers, and directors to facilitate the career development of each team member. This dynamic application empowers employees to track progress and milestones toward their chosen career paths. Managers and directors can easily oversee employee development, monitor assigned goals, and provide essential support for continuous growth. Experience enhanced collaboration and foster a thriving, goal-oriented work environment with a cutting-edge platform.

Table of Contents

• Cloning and Initializing
• Installation
• Usage
• Wiki
• Contributing
• Development
  • Frontend
  • Backend
• License
• Contact

Cloning and Initializing the Repository with Submodules

This guide will walk you through the steps to properly clone a repository.

Cloning the Repository

Clone the repository

Step 1:

git clone git@github.com:Tivix/cpf.git

Step 2:

cd cpf

Installation

Instructions on how to install and set up the project.

Copy variables to .env file needed for the frontend.

cp .env.example .env

Build and run the project

First, you need to run the supabase environment.

supabase start

The above command will build and run the supabase environment. After it's done, it should print out the message it's started alongside the list of URLs, and keys. Take the anon key, as well as service key and paste it into your .env file

If you do not have supabase CLI installed, follow the guide here:

https://supabase.com/docs/guides/local-development/cli/getting-started?queryGroups=platform&platform=macos&queryGroups=access-method&access-method=kong#installing-the-supabase-cli

Next, you need to run the next.js application

docker compose up --build

After you have done the above steps, you should be able to access the application.

Supabase admin panel

http://localhost:54323

CPF Frontend application

localhost:8080

Seeding the database

The application provides several database management scripts for seeding and managing the database:

# Reset the database (clean, push schema, and seed)
yarn db:reset

# Individual commands:
yarn db:clean      # Clean the database
yarn db:push       # Push schema changes
yarn db:seed       # Seed the database with initial data

These commands will execute the corresponding scripts in the frontend container, due to the fact that the DATABASE_URL variable host part has to match the database container name.

Seed script creates an admin user with the following credentials:

• Email: admin@user.com
• Password: password

Seed script also creates 15 random users with the following credentials:

• Email: first_name.last_name+test@kellton.com
• Password: password

Supabase

User Creation Flow

Users can be added to the app through various methods:

1. Supabase Panel: Go to http://localhost:54323 to create a user directly in the Supabase dashboard - authentication tab.
2. Directly from a Browser: Go to localhost:8080/auth to create a user via a authentication flow. Going forward we will probably get rid of this feature and focus on single sign on.
3. Add Employee flow: Employees can be added through the dashboard at localhost:8080/people/add-new. The default password is password.

Automated Backend Processes

When a user is created through any of these methods, the following processes occur:

1. Supabase automatically creates a new user in the auth.users table.
2. The auth.users table has an on_auth_user_created trigger that fires AFTER INSERT. This trigger calls the on_auth_user_created function to handle following:
   • Profile Creation:
     • Inserts a new record into the public.profiles table.
     • Extracts the first_name, last_name, and status from the raw_user_meta_data field, if provided.
     • The status field is an public.profile_status enum. If not provided, it remains NULL.
   • Role Assignment:
     • Inserts a new entry into the public.user_roles table.
     • The default role assigned is employee.
   • Ladder Information:
     • Inserts a new entry into the public.user_ladder table with optional fields ladder_slug, current_band, technologies

Usage

Instructions on how to use the project.

Frontend

Imports

Vscode auto import settings are set to shortest. This in combination with the @app alias and nexts app routing folder structure makes it easier to navigate the codebase relatively to the app routes, because auto importing a thing in a nested route in the app folder will:

• Use @app/* for imports from the src directory, so things like: /components, /constants, /types, /utils
• Use relative imports for parent components and other files near by in the routing tree

E.g. some modal component nested in a form, at route /app/(app)/(addThing)/things/add-new/components/ThingModal/ThingModal.tsx

import { Modal } from '@components/common/Modal';
import { Input } from '@components/common/Input';

import { RandomFormProvider } from '../../RandomFormProvider';

Nicely shows that the modal is nested in the form Provider.

Wiki

For more information, check out the project's wiki under the link: https://github.com/Tivix/cpf/wiki

Contributing

Guidelines for contributing to the project.

• Fork the repository.
• Create a new branch.
• Make your changes.
• Commit your changes.
• Push to the branch.
• Open a pull request.

Development

Frontend

Folder structure

• app- The App Router by Next.js. A route has a components folder that contains the main page components used in the route.
• app/api - Contains api routes. Api routes have a routesService.ts file that contains the service functions for the route.
• components - Contains all components used in the app.
  • common - In the common folder, we keep all essential components like Button, Card, or Input.
  • modules - Here we keep more complex components that are still reusable or are part of layouts.
  • tabs - Here we keep tabs that are used in the app. Technically they could be modules, but they are distinct enough to be kept in a separate folder.
• constants - Contains all the constant values used in the app.
• static- Contains assets like icons.
• store - Contains all stores for state management.
• types - Contains all reusable types and interfaces that are shared between many pages and modules.
• utils - Contains all utility functions like data transformations or calculations.

Component structure

Component folder should contain:

• index.ts - importing and exporting the component.
• ComponentName.tsx - view part of a component.
• ComponentName.types.ts - types related to that component.
• ComponentName.hooks.tsx - the logic of our component
• ComponentName.constants.ts - constants for the componentt
• ComponentName.utils.ts - utils for the component

License

Specify the license under which the project is distributed.

Contact

Contact information for the project maintainer or team.

• Email: marcin.skorek@kellton.com, mateusz.jasinski@kellton.com
• GitHub: https://github.com/Tivix/cpf