Implementing the Efficient Overseas Website
This blog post describes my implementation journey for the Efficient Overseas website, a project I am developing for my COMP 4911 Computing Science Capstone at Thompson Rivers University. The goal is to replace the client’s aging ASP.NET Web Forms website with a modern, responsive website that is easier to maintain and provides better experience for prospective international students.
Rather than simply changing the appearance of the existing website, I needed to consider its existing URLs, search engine visibility, content organization, and the process students use to contact the consultancy. This post explains the technology I selected, how I structured the application, the main features I implemented, and the verification steps I used during development.
Setting Up the Development Environment
I chose Next.js 16 with the App Router, TypeScript, and CSS for the new website. Next.js provides a structured approach to routing and page rendering, while TypeScript helps identify certain programming errors before the application runs. CSS gives me control over the responsive layout and the client’s branding.
Before starting development, I needed Node.js, npm, and Git installed on my computer. Node.js provides the runtime required by the development tools, npm manages the project’s dependencies, and Git allows me to track changes to the source code.
I used the following commands to obtain the project and install its dependencies:
git clone https://github.com/hadi-TRU/efficient-overseas.git cd efficient-overseas npm install
The git clone command downloads the source code from GitHub, and cd efficient-overseas moves the terminal into the project directory. The npm install command installs the dependencies defined by the project’s package configuration.
For a clean installation in a continuous integration environment, I can also use:
npm ci
This command installs dependencies using the lockfile, helping ensure a more reproducible build.
After installing the dependencies, I started the development server:
npm run dev
I could then open http://localhost:3000 in my browser to view the website. Running the application locally allowed me to make changes to the code and review the results during development.
Building the Initial Website Structure
One of my first priorities was establishing the basic structure of the website. The original platform used Microsoft ASP.NET Web Forms, with pages such as /index.aspx, /About.aspx, /Canada.aspx, and /IELTS.aspx.
For the replacement website, I wanted a cleaner URL structure and reusable components rather than maintaining a separate collection of unrelated page layouts.
I used the Next.js App Router to organize the pages and created a shared visual structure for navigation, page content, and the footer. This meant that common elements could be reused across the application instead of being implemented separately on every page.
I also developed the initial layout as a functional tracer-code prototype. Rather than creating static mockups and then discarding them, I used working code to establish the routing, responsive navigation, styling, and general page structure. This gave me an early foundation that I could continue extending as the project progressed.
Implementing Responsive Design
The original website did not provide satisfactory experience on mobile devices. This was an important issue because prospective students and their parents may access the website primarily through smartphones. I therefore designed the new interface with a mobile-first approach. The website uses the client’s crimson brand color, #aa1515, together with gold accents to create a consistent visual identity.
I organized the content into clear sections, including destination cards, service cards, testimonials, and contact information. I also incorporated responsive navigation so visitors could access the main pages on smaller screens. During this stage, the goal was not simply to make the desktop website smaller. I needed to ensure that the layout remained readable and that visitors could navigate the website and use the consultation form without unnecessary difficulty. The responsive layout also makes future maintenance easier because the same page components can adapt to different screen sizes.
Organizing Study Destinations and Services
A significant part of the implementation involved reorganizing the information available to prospective students. The previous website contained information about admissions, visa services, and study destinations across multiple legacy pages. I wanted the new application to make this information easier to locate.
I created dedicated destination pages for Canada, Australia, New Zealand, and the United Kingdom. These pages provide structured information about study opportunities, admission requirements, intake periods, applicable post-study work options, and relevant immigration pathways. I also organized the consultancy’s services into dedicated pages for Study Visa Filing, IELTS Training, Spoken English Training, and Visitor Visa Services.
Each service page focuses on its subject and includes FAQ sections to help visitors find answers to common questions. Interactive FAQ components allow users to expand questions and view their answers without navigating to another page.
Organizing the content this way makes the website easier to navigate and gives the client a clearer structure for updating individual services in the future. Since immigration rules and work-permit requirements can change, the information must also be checked against official government sources before publication and maintained over time.
Developing the Consultation Form
Another important part of the project was improving how prospective students contact the consultancy. The consultation form is intended to collect relevant applicant information, including contact details, the preferred destination, and the requested service. I wanted the form to provide immediate feedback instead of leaving users uncertain about whether they had entered valid information.
The implementation includes client-side field validation and interface states for asynchronous submission. These states can communicate when the form is being processed and whether the operation succeeds or fails. For example, required fields should be checked before submission, and invalid input should produce a clear message near the relevant field. This helps users correct mistakes without having to complete the entire form again.
One important consideration is that client-side validation does not replace server-side validation. If the form sends information to a backend service, that service must independently validate the submitted data and handle personal information securely.
The form’s production behavior also depends on the configured submission endpoint. The interface and its validation should not be confused with a complete lead-management system unless the backend integration has been implemented and verified.
Preserving the Existing Website URLs
One of the more important technical challenges was replacing the old website without unnecessarily disrupting existing links. The client already had an established online presence, and its legacy .aspx URLs could be referenced by external websites, search engines, or users who had bookmarked individual pages.
Simply removing those pages would cause visitors to encounter missing-page errors. It could also negatively affect search visibility. To address this, I implemented a permanent redirection strategy through the Next.js configuration. The intention is to map each old URL to the most relevant page in the new application.
For example, the old /About.aspx page should be redirected to /about, while /IELTS.aspx should redirect to the new IELTS service page. The legacy homepage should also be redirected to the modern homepage where appropriate.
The redirect configuration must cover the complete inventory of legacy URLs. After implementation, each mapping needs to be tested to confirm that it returns the intended permanent redirect and reaches the correct destination.
This is important because a redirect to an unrelated page is not equivalent to preserving the original page’s purpose. Although permanent redirects help search engines process website migrations, they cannot guarantee that every backlink or ranking signal will be preserved.
Implementing Trust and Contact Information
Because the website represents an education and immigration consultancy, credibility is an important part of the user experience. I included sections for the company’s background, leadership, student results, and testimonials. The website also presents the client’s regulatory credentials and contact information. The Results section is intended to showcase student visa approvals and related documentation, while the Testimonials section presents student experiences. These features help visitors understand the company’s history and services.
However, documents and testimonials must be verified and displayed with appropriate authorization. Personal information should be protected, and any claims about approvals or client outcomes should be checked before publication. The Contact page brings together the consultation form, branch information, and telephone or WhatsApp links where configured. This gives visitors multiple ways to contact the consultancy, including directly from a mobile device.
Checking Code Quality and Building the Application
Once the main application features were in place, I needed to verify that the project could pass its development checks and produce a production build.
I used ESLint for static code analysis:
npm run lint
This checks the source code for issues identified by the project’s linting rules.
I also used the TypeScript compiler:
npx tsc --noEmit
The –noEmit option checks the TypeScript code without generating compiled JavaScript output. This allows me to identify type errors independently of the production build.
Next, I ran the production build:
npm run build
This command asks Next.js to compile the application and prepare its production output. After a successful build, I can run the production version locally using:
npm run start
I then access the application through http://localhost:3000.
These checks are useful because a website that works in development is not automatically guaranteed to build or behave correctly in production. I also need to verify individual routes, responsive layouts, form behavior, and redirects.
The project was designed to use static pre-rendering where appropriate. The final build output should be reviewed to confirm which routes are generated as static pages and whether any routes use different rendering strategies.
Testing the Website
My testing approach focuses on both technical correctness and the experience of a prospective student visiting the website. I need to verify that the main navigation works, the destination and service pages display the correct information, and the FAQ sections respond to user interaction. The consultation form must also be checked with valid and invalid input to confirm that the correct feedback is displayed.
Responsive testing is another important part of the process. I need to inspect the website at desktop, tablet, and mobile viewport sizes to identify layout problems, unreadable text, or unintended horizontal scrolling.
I also need to test the legacy redirect matrix individually. This is particularly important because migration depends on old URLs reaching the appropriate replacement pages. Finally, Lighthouse can be used to assess performance, accessibility, SEO, and general web development practices. These results should be recorded from actual test runs so that any issues can be addressed and improvements can be measured.
Conclusion
The Efficient Overseas project gave me an opportunity to apply modern web development practices to an existing business website with practical usability and migration requirements. By using Next.js 16, TypeScript, and modular CSS, I developed a foundation for a responsive website with reusable components, dedicated destination and service pages, consultation functionality, and a strategy for preserving legacy URLs.
The implementation also highlighted the importance of testing beyond the development environment. Build verification, redirect testing, responsive checks, and ongoing content review are all necessary to prepare the application for reliable production use. My priority has been to establish a maintainable core platform first, while leaving room for additional features after the main requirements have been verified.