Skip to content

A full-stack employee directory web app for global companies using Python, JavaScript, Flask and PostgresSQL.

Notifications You must be signed in to change notification settings

soo-park/organza

Repository files navigation

Organza

Organza is an employee directory web app generated by Soo Park in four weeks as a final project of a bootcamp.


Features

This project is built to accommodate needs of global companies that may want to have their own employee roster.

Along with the basic features of segregated login, employee list view, and employee info detail features, users can

  1. search employees and filter with multiple conditions
  2. add employees/companies/departments/titles/office and upload employee photos
  3. view organizational chart and office location map dynamically updated by DB

Production Screen Shots

Login

The login feature has three credentials - admin, employee, a user. Bootstrap nav var changes according to the credential. With test seed data, try

admin: ID: usera, Password: aaa123 Employee1: ID: userb, Password: bbb123 Employee2: ID: userc, Password: ccc123 User: ID: userd, Password: ddd123

Alt text

  • The password is saved as clear text for now, to be later on hashed.

Home

Layout dynamically changes according to the window size.

Alt text

Employee Search

Server side controls search and pagination. The four-filter search use only one query by utilizing lazy-query of SQLAlchemy to save a number of queries.

Alt text

Add employee, company, department, title, and/or office

Features include employee photo upload, UTF-8 form and database to accommodate Asian and other characters, an instant update on all relational tables on submit, and much more.

Alt text

Corporate locations

The markers in Google Map, the info modal window, and the information below all are dynamically generated from DB for scalability.

Alt text

Organizational chart

JS plug-in generates the chart structure. A table of hierarchy exists in the data model to accommodate complicated organizational structural needs.

Alt text

Statistics

The data for these ChartJS data visualizations are generated in server side with a full format of color schemes. If columns added, appropriate color schemes will apply automatically. *** Better compatibility with Chrome than Safari

Alt text


Behind the scenes

Data model

The model for this project is built to accommodate company with subsidiaries that share certain properties, employees working for multiple subsidiaries at the same point of time, and many other many-to-many relationships.

Alt text

Languages

Python, JavaScript, SQL, HTML, CSS

Technologies

Flask, PostgreSQL, SQLAlchemy JQuery, AJAX, Jinja Bootstrap, openpyxl, virtualenv

Industry

Git, GitHub, Jira Ponyorm online editor Photoshop, Illustrator Noun Project, Subtle Patterns


How to see a test run

Use bash script given

In terminal window in the folder downloaded, run the following command

source roster_bash.sh

Shortcut

Copy the entire paragraph of the following inside the forked folder to run the web app

virtualenv env; source env/bin/activate; dropdb intranet; createdb intranet; pip install -r requirements.txt; echo export secret_key='abc' > secret.sh; source secret.sh; python model.py; python seed.py; open 'http://localhost:5000'; python server.py;

OR

Do it manually

1. Open your terminal, make secret.sh file

Command: echo "export secret_key='abc'" >> secret.sh Reason: you want web frame "Flask" and other requirements to run in your computer to test the code, but you do not want to install everything needed to your global environment. Secret.sh file will contain the key for the app to run.

2. Run your virtual environment

Command: virtualenv env; source env/bin/activate; source secret.sh Reason: to make the installation run in a limited space

3. Install requirements

Command: pip install -r requirements.txt Reason: all needed installations are saved in requirements.txt. pip is a command for Python to pick up necessary packages and install them.

4. Generate db

Command: dropdb intranet; createdb intranet Reason: createdb command will generate the database that will store the data. The database is named "intranet" inside the model.py file. (if ERROR "Database "intranet" already exists" raised: dropdb intranet is needed. Just to make sure that there is no pre-existing DB, you can always go with dropdb intranet) Caution: this will delete the existing data from your DB. If you want to "add" data, and not start a new, do not do this.

5. Run model

Command: python model.py Reason: the model will be a base template for your DB

6. Run seed.py

Command: python seed.py Reason: generate starting point for your DB for testing The test seed will fill data tables with 17000 employees with full data.

Alt text

7. Check if the DB is loaded correctly

Command: psql intranet \dt Reason: you want to see if the tables are generated. If the are generated, a chart containing the list of them will show.

8. Run server

Command: python server.py Reason: have your server running, so that what you interact with server-client will be viewable on your browser

9. Run your Flask on browser

Command: localhost:5000 on your browser address bar Reason: Because your server is running, you can see the site


License

The MIT License (MIT) Copyright (c) 2017 Soo Park

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.