HR Information System

Goal

This project is designed to simulate an internal system that a company might use to manage and store employee information. To streamline development, the project uses the same underlying database as the HR Dashboard I previously built, allowing for consistency across data sources. The primary goal of this project is to demonstrate my ability to create an intuitive, user-friendly interface that connects to a backend database. It showcases how I can combine front-end design with back-end functionality to support real-world business needs, particularly in the context of human resources and internal data management systems.

CLICK HERE TO ACCESS THE SITE

Please note: It may take up to 1 minute for the data to load on the page.

Tools Used

Snowflake | AWS S3 | SQL | HTML | CSS | JS | Render | Github

Features

  • View categorized data
  • Add/Update data (WIP–as time permits)

Process

For this project, I leveraged a Snowflake database that I had previously designed for an HR analytics dashboard. Since the schema and data models were already in place, I was able to shift my focus toward integrating the database with a front-end interface and building a functional full-stack application.

1. Planning & Front-End Design

I began by identifying the core features and user interactions required for the system—such as viewing employee records, updating employment status, and navigating between different views (e.g., profile pages, dashboards, or confirmation screens). Based on these needs, I determined the number of HTML pages necessary and designed wireframes for each page’s layout and functionality.

  • HTML was used to structure the content across multiple pages.
  • CSS was applied to ensure consistent styling, layout responsiveness, and a clean user experience.
2. Back-End & API Deployment

To bridge the front-end with my Snowflake data, I developed an Express.js backend and hosted it via Render, using continuous deployment from a connected GitHub repository. The backend exposed RESTful API endpoints that handled data transactions between the client-side application and the Snowflake database.

  • I created routes using app.get, app.post, and app.patch in Node.js.
  • Parameterized SQL queries were used to prevent injection vulnerabilities and ensure secure data retrieval and updates.
  • API endpoints were structured to support dynamic parameters like employee IDs for specific record access.
3. Database Integration

The Snowflake database was connected to the backend using a Snowflake Node.js driver. I configured environment variables to manage credentials securely, and wrote SQL queries that:

  • Pulled employee data for display on profile pages
  • Allowed status updates via PATCH requests
  • Returned query results in JSON for front-end rendering
4. Front-End Functionality (JavaScript)

JavaScript was used on the front end to fetch data from the API, dynamically populate page content, and handle user interactions.

  • fetch() calls were used for asynchronous API requests.
  • DOM manipulation was used to inject real-time data (e.g., names, salaries, statuses) into HTML elements.
5. Deployment & Testing

Once the application was fully integrated, I deployed the backend on Render and tested endpoints using tools like Postman and browser console logging. I validated that the data displayed in the UI reflected real-time changes in the Snowflake database and ensured cross-page functionality worked as expected.