Code Stack
Technical Implementation
The website has been developed using HTML, CSS, JavaScript, PHP & MySQL. HTML, CSS, and JavaScript were the three technologies used to build the pages, apply visual layouts for those pages, and develop full-functionality for those pages.
We used XAMPP to develop our website; XAMPP is a local development environment that allows you to test your website locally before deploying it live. The main file is index.php which serves as the entry point of the website and is responsible for handling routing to other pages. There are multiple PHP files for different sections of the website including resources, documentation, login system, events page, admin panel, and individual article page. PHP mainly handled server-side logic (user authentication, session handling, and form processing), and MySQL handled all structured data in terms of storage (user accounts, listings, favorites, and submitted resources).
To provide security and to prevent SQL injection, ALL queries to MySQL were made using PHP MySQLi prepared statements. A major component of the backend system was built using API-based endpoints. These API endpoints handle dynamic and administrative activities. Examples of core operations include approving resources, rejecting an item submitted to the website as a resource, deleting a resource, restoring a user, deleting a user, toggling a users' favorite resource, retrieving a count of all pending resources, retrieving a list of approved resources, and executing bulk administrative actions.The incorporation of an admin dashboard that operates via AJAX (Asynchronous JavaScript and XML) provides the user with dynamic access to information on a single web page without loading the entire web page. Additionally, data is transferred between the front and back ends using JSON (JavaScript Object Notation). Therefore, a more structured means of transferring data between the two ends can be accomplished.
AJAX has been used extensively throughout the site to make searching and filtering for resources easier with less need for page reloads; allow for the ability to add items to your favorites list, provide administrators greater control over the site's content, and keep other portions of the page updated with live data when an event occurs. Changes made on the screen via AJAX are reflected immediately in both the database and the website's user interface (UI), without impacting the user's ability to navigate from one portion of the website to another. All of the front-end assets for the website have been grouped into a single directory structure for faster access. In this way, the directory structure clearly defines where to locate files for all custom style sheets (or CSS) and JavaScript functionality.
Additionally, multiple style sheets were created to define different types of styles for a given set of web pages. Examples of these style sheets include home.css, blog.css, and articles.css. These files control the color scheme, typography, spacing, responsive design breakpoints, and layout of the website across desktop, tablet, and mobile devices. To ensure that the UI would be uniform for all users, components of the website that occurred on all web pages (e.g., header and footer) were coded as reusable elements (header.php and footer.php respectively) and therefore can be reused without duplicating coding effort.
We developed four major JavaScript modules: banner.js, events.js, feature.js, and new.js. These scripts handled client-side interactivity, including tab switching, expandable resource cards, filtering systems, search functionality, and real-time UI updates. JavaScript also supported AJAX requests to backend APIs, enabling seamless interaction between frontend actions and database changes. For accessibility and usability, we implemented alt text for all images, keyboard navigation support, semantic HTML structure, and clear descriptive link labeling to ensure compatibility with assistive technologies. We also integrated the Google Maps API to display resource locations and provide direct navigation assistance within resource cards. This allowed users to visually locate services and receive directions without leaving the platform.
For hosting and deployment, the website was uploaded to the Hostinger server, where all files were deployed to a live production environment. Domain management was handled through GoDaddy, where the domain was configured and connected to Hostinger using DNS records and nameserver configuration. Finally, the system was designed with scalability in mind, allowing additional resources, user roles, and features to be added without major restructuring of the existing architecture.