Skip to content

Introduction

Our frontend project is a modern, high-performance web application built using Svelte 3.54, HTML5, and Tailwind CSS, leveraging the power of SvelteKit 1.5 for seamless routing and server-side rendering. This combination allows us to create dynamic, responsive, and visually appealing user interfaces while ensuring optimal performance and scalability.

With Svelte's reactive framework, we deliver an intuitive and fast user experience, Tailwind CSS ensures a streamlined and customizable styling process, and SvelteKit provides a robust structure for managing routes, data fetching, and deployment. Together, these technologies enable us to build a cutting-edge frontend solution tailored to modern web development standards.

Frontend

  • The user interface is built using SvelteKit
  • It communicates with the backend using REST API

Framework

Routes and Pages

  • Pages are defined in the "/src/routes" directory. Each file corresponds to a route, and SvelteKit automatically handles routing based on the file structure.
  • Example:

    /src/routes/+page.svelte → Home page
    /src/routes/school/[id]/+page.svelte → School

Components

  • Reusable UI elements are organized in the "/src/lib/components" directory, such as buttons, modals, or forms etc.

State and Data Management

  • Data fetching is done using "load()" which are being called in either +layout.ts or +page.ts.
  • Svelte stores are being used to store the data which can be be accessed and shared across all components and pages.
  • Uses Svelte's reactivity for state management of variables.