Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/edbert-fl/teamify

Team Management Application built with Typescript and React Native on the front end with Javascript and Node.js in the back.
https://github.com/edbert-fl/teamify

javascript nodejs portfolio-project postgresql react-native typescript

Last synced: 10 days ago
JSON representation

Team Management Application built with Typescript and React Native on the front end with Javascript and Node.js in the back.

Awesome Lists containing this project

README

        

Teamify Employee Management App


Typescript
React Native
PostgreSQL
Node.js
Javascript

## About The Project

Teamify is a Team Management application that caters specifically to small businesses employing part-time staff. The frontend is powered by React Native and Typescript, while the backend boasts the efficiency of Javascript, Node.js and PostgreSQL for seamless data management. Elevating user authentication to a new level, we leverage the robust capabilities of Microsoft Azure's Vision API for facial recognition, ensuring a secure and modernized experience for both employers and employees.

(back to top)

## Features

### 📱 Cross-Platform Compatibility:
Runs on both iOS and Android

### 🔐 Authentication:
- Custom User Authentication
- Organization-specific roles and permissions
- AI-powered facial recognition for employee clock-in

### 👩‍💼 Admin Features:
- Admin Dashboard
- Organization data overview
- (Under Development) Intuitive roles and user management
- (Under Development) Setting pay for all users

### 🔄 Organization Management:
- Admins can create organizations
- Invite employees using organization codes for user registration

### 📅 Shift Management:
- Shift creation and assignment to employees
- (Under Development) View upcoming shifts and receive notifications

# Getting Started

To get a local copy up and running follow these simple example steps.

## Prerequisites

### Node.js and npm

Make sure you have Node.js and npm installed on your machine. You can download them from https://nodejs.org/.

### React Native CLI

Install React Native CLI globally by running the following command:

```bash
npm install -g react-native-cli
```

## Installation

Clone the repository to your local machine using Git then navigate to the project directory.

```bash
git clone
cd
```

Then install the project dependencies using npm.

```bash
npm install
```

To use the database you can setup a free PostgreSQL database using ElephantSQL and set up a Microsoft Azure account then get a Vision key and Vision Endpoint for their Vision API. Then create a `.env` file in the backend folder and place the following inside:

```bash
DATABASE_URL=
VISION_KEY=
VISION_ENDPOINT=
```

Once it's working run the following command to setup the SQL Database.

```bash
cd backend
node sqlsetup
```

You can run this to check if everything has been set up correctly.

```bash
node sqlsetup -c
```

Once setup then create another `.env` file in the root of the project and then add your computer's IP address so that it can connect to your computer for testing while in development. Follow the instructions here to get your computer's IP Address.

- 🖥️ Windows
- 🍎 MacOS

Once you know your computer's IP address then place it into the root `.env` file:

```bash
EXPO_PUBLIC_IOS_SERVER_URL=
```

Then run `npm start` to run the project and scan the QR code to load it on your iOS or Android device with Expo!

(back to top)

## Usage

### User Authentication


Sign Up GIF

Users of the app are able to create new organizations easily when signing up. Then once the organizatino is created they can sign up for a personal account that is immediately made into the admin of their created organization. As an admin they are able to receive their organization's randomly generated 6 digit alphanumeric organization code on their personal Home page which can then be shared to other employees to create their own accounts which will immediately be registered as part of the parent organization.

```typescript
const signUp = async () => {
setLoading(true);
try {
// Generate a random alphanumeric code of 6 digits
const generatedCode = Math.random()
.toString(36)
.substr(2, 6)
.toUpperCase();

if (organizationName && generatedCode) {
// Save organization information to be added to database after owner account is created
setCurrOrganization({
code: generatedCode,
name: organizationName,
});

// Sends call to API endpoint with the generated organization code and name to update the database
const response = await axios.post(`${SERVER_URL}/organization/add`, {
code: generatedCode,
name: organizationName,
});

// Navigate to the Registration page
navigation.navigate('Registration', { userCreatedOrganization: true });
} else {
throw new Error("Organization name or code is undefined.");
}
} catch (error: any) {
console.log(error);
alert("Sign up failed: " + error.message);
} finally {
setLoading(false);
}
};
```

(back to top)

### Admin Dashboard


Manage Shifts GIF

Admins have access to the Organization tab which is an admin dashboard that displays different relevant statistics of the whole organization. From here they are also able to manage shifts for their employees. They can choose whether to create a shift for a particular day, or have a repeating shift that occurs every week at the same time.

(back to top)