Upgrading the TBMHP Foundation Website with React

Hello, fellow Oregon State students and staff members. In this week’s blog post, I’ll be addressing the following prompt for my CS 467 capstone project:

  • What is your favorite technology from your project and why? What is it used for? How could it be made better?

I will be addressing my team’s use of React for this project.

Project Description

Our project involves upgrading (and possibly replacing) the existing website for the TBMHP foundation. Our project partner passed along their WordPress website, and asked us to make a few changes to hopefully improve the user experience of the existing site. They also left the option open for us to reimplement the website without using WordPress. Our team decided to take a 2-pronged approach: Implement the desired changes in the existing WordPress website, and simultaneously make a new website from scratch. At the end of the term, we plan to present both websites to our project partner and give them the choice of which project they would like to use.

Our custom application displays information about the organization’s mission, allows users to register for their upcoming events and sign up for their newsletter, donate toward their cause, and view photos from the organization’s past events. We are also including a database that holds the information needed to populate the website and empower the organization to hold its events. Finally, we also include an admin panel that allows the administrators to update any data in the database and perform other tasks such as sending a newsletter out to the subscribers. 

Implementing React

We decided to use React on the front end for our custom website. This decision was made for multiple reasons:

  • React allows us to create a single-page application, which creates a better user experience since the user can navigate between pages without having to refresh.
  • React’s modular nature allows us to create reusable components. Our codebase will be better organized, which should reduce development time for any desired changes in the future.
  • React has a large user base, which means there are a wide variety of existing libraries built on top of React for us to incorporate into our project.
  • React offers a much more customizable experience than developing our website with WordPress.

The downside to using this technology is that future changes will be much more difficult for non-technical members of the TBMHP foundation, but we believe that the increases in user experience and customizability make up for this downside.

Conclusion

Overall, the decision to use React for this capstone project stems from a desire to deliver a seamless experience to the visitors of the TBMHP foundation’s website. React’s ability to provide a responsive, single-page application format aligns perfectly with our objective to enhance user interaction. Additionally, we are excited by the prospect of utilizing React’s vast ecosystem for any future feature requests from the project partner.


The development journey using React for this project has offered our team the chance to dive deep into modern web development practices and deliver a product that stands out both in performance and flexibility. While we recognize the trade-off in manageability for those without a technical background, we are dedicated to ensuring that the handover is as smooth as possible. We plan to achieve this through meticulous documentation, training for TBMHP staff, and ongoing support to ease the transition.

Print Friendly, PDF & Email

Posted

in

by

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *