Introduction

Hey there! We’re excited to share our journey of modernizing the School of Computer and Information Sciences (SCIS) website with you. This project was a collaborative effort led by the CEOL Labs community, aimed at revamping the existing website to make it more efficient, responsive, and easier to maintain. Join us as we explore the reasons behind our tech choices and the transformation of the SCIS website.

Challenges with the Old Website

Let’s start by discussing the challenges we encountered with the old SCIS website:

• Outdated Technologies: The website was built using older technologies like PHP, which made it challenging to update and maintain.

• Non-Responsive Design: The website was not mobile-responsive, which was a significant limitation in an era where mobile browsing is prevalent.

• Complex Update Process: Updating content required altering raw HTML, making it time-consuming and prone to errors.

Selecting the Right Technologies

Our journey to modernize the SCIS website led us to carefully consider our technology stack. We ultimately decided on SvelteKit and Strapi for some compelling reasons:

SvelteKit for Frontend:

• Efficiency: SvelteKit compiles code during build time, resulting in highly optimized and efficient JavaScript. This translates to faster load times and a smoother user experience.

• Declarative Syntax: Svelte’s declarative syntax made it easier to create and manage UI components, reducing development time and code complexity.

• No Runtime Overhead: Unlike some frameworks, SvelteKit does not require a runtime library, ensuring a smaller bundle size and improved performance.

• Improved Developer Experience: The development experience with SvelteKit is seamless and intuitive, allowing developers to focus on building great user interfaces.

Strapi for Backend:

• Content Management: Strapi provided a robust and user-friendly content management system, allowing content editors to update information without touching code.

• Custom Content Types: Strapi’s flexibility allowed us to define custom content types tailored to SCIS’s specific needs, making content organization straightforward.

• API Integration: Strapi offers RESTful and GraphQL APIs out of the box, enabling easy integration with our SvelteKit frontend.

• Security: Strapi’s built-in authentication and authorization features ensured that sensitive data and administrative tasks were secure.

The Implementation Process

Our project implementation followed these steps:

• Creating the Strapi Backend: We began by setting up a Strapi CMS instance where we defined content types such as news articles, faculty profiles, and event listings.

• Developing the SvelteKit Frontend: With the content API provided by Strapi, we developed a responsive and user-friendly frontend using SvelteKit. This included designing templates for different sections of the website and integrating dynamic content.

• User Training: We conducted training sessions for SCIS staff and content editors to familiarize them with the Strapi CMS, making it easier for them to update content.

• Deployment: The final step involved deploying the new website on a modern hosting infrastructure, ensuring high availability and scalability.

Benefits and Outcomes

The adoption of SvelteKit and Strapi brought several benefits:

• Efficient Content Management: With Strapi, content editors could update website information without needing technical expertise, streamlining the content update process.

• Responsive Design: The new website is fully responsive, providing an optimal browsing experience on mobile devices.

• Improved Performance: SvelteKit’s compilation process resulted in faster loading times, enhancing the overall website performance.

• Future-Proofed Technology Stack: By choosing modern technologies, we ensured that the SCIS website is adaptable and maintainable for years to come.

Conclusion

The SCIS website’s modernization with SvelteKit and Strapi has not only made it more functional but has also empowered content editors and enhanced user experiences. This project showcases the benefits of choosing the right technologies for specific project requirements and exemplifies CEOL Labs’ commitment to staying at the forefront of web development practices. The SCIS website now proudly stands as a testament to our capabilities and dedication to delivering top-notch web solutions.