Thaddeus Resource Center Website

Project Specification

Tools/Languages: TypeScript (JavaScript), Next.js (React), Firebase (Google Cloud), Node.js, Cypress, and other Node libraries
Workflow tools: Jira, GitHub Planner, and GitHub Actions
Environment: Internship, teams of 5-6 interns
Timeline: Actively maintaining until internship ends
Project Link: Website

Description

The Thaddeus Resource Center website was originally built using a website builder named Webflow. It allowed you to build a website essentially without touching any code. While that was great, we eventually switched to developing it in TypeScript and React, allowing us to cut costs, add new features, and learn more about the programming world. We also got the opportunity to standardize many processes when transitioning, such as providing proper training and documentation for the website.

Note: Just in case you are reading this after I leave the internship, please forgive me for not updating the tenses.

My Contribution

I am a part of the web development team, and many of us are all responsible for the front-end and back-end of our organization’s main website. As needed, we could be assigned to improve the appearances of the front-end or be tasked to create or update back-end functionality.

My most important contribution is designing, implementing, and testing the popup system. The pop-up system allows logged-in employees to create and edit pop-ups. These pop-ups can inform website visitors of organization updates, advertisements, event notifications, or just general messages.

I have set up permission such that while any intern can create and edit pop-ups, only administrative staff, such as our Executive Director, can delete or make a pop-up active (to be available for showing).

The employees can customize many aspects of this pop-up, including adding a header and body message. They can add a button or make the entire pop-up take them to another website when clicked on. They can also pick between many templates (allowing pictures to be centered, left-justified, right-justified, or take up everything). Last but not least, the user can adjust the colors of a lot of these aspects, including the pop-up’s background and text’s color.

When I developed the pop-up system, one of the user requirements of the system was that selected paths on the website could display their own unique pop-up, which increased the complexity of the system. To fix it, I added a string field to the pop-up schema to filter which pop-up is selected when the front-end decides to display the pop-up. For example, if the string of the field is “home,” that pop-up is meant to be displayed on the home page. As such, the front-end needs to pass a prop with the value “home” to the popup component for it to display a pop-up for the home page.

To test my projects, I have used Cypress for end-to-end testing and Jest for unit testing. Specifically, I have written end-to-end tests to ensure my pop-up system mentioned above works correctly. Those tools also provide code and branch coverage to further ensure a given code line has been passed through a test.

Frontend Work

Of course, I also helped out with the frontend of the website. I was primarily helping out with the “How We Help” section of the page. The section originally lacked a lot of content. Fortunately, I approached it from the beginning.

First, I reached out to people who have information about developing those pages to get information about those pages. I asked them if they had any text to fill up the page and media that would make it more visually appealing. From there, I use common standards to develop the website if they do not have any suggestions on how I should create it. For example, this means using icons to signify many features of the organization’s program. Finally, I show the stakeholders the website for feedback. After finally getting their approval, I push my changes to GitHub and merge the branch into production.

The resulting section is as follow:

How We Help: