CECO Les Pedreres | Website and learning platform

Summary

CECO Les Pedreres combines its institutional website and learning platform in one stack. Astro SSR, Node.js, Express and MySQL serve the public site, courses, enrolment, private learning area, lesson progress, assessments and training administration.

Objective

Build an institutional website that also works as a learning platform, keeping public communication and course/user management in one coherent system.

Context

The website needed one structure for the cooperative, courses, projects, territorial activity and contact information, with navigation adapted to mobile devices.

Implementation

The platform uses Astro SSR for the public interface and learning area, with Node.js, Express and MySQL in the same production service. The architecture covers courses and course-detail routes, authentication, enrolment, lesson progress, assessments, a private area and administration screens for courses, modules, lessons, media and users. The public site, learning platform and administration share the same technical and data foundation.

Objectives

Organise home, courses, projects, about and contact under one hierarchy.
Give courses, course detail pages and projects their own routes.
Keep a common visual hierarchy across the public pages.
Integrate contact, access, registration and responsive navigation.
Keep public pages separate from access and training-management screens.

Current status

Home, courses, projects, about and contact brought into one visual structure.
Course routes, course detail pages and project content.
Reusable components and styles for adding sections without rebuilding the base.

Work delivered

Astro SSR and public application

Interface built with Astro SSR, reusable components and public routes served in the same runtime as the API.

Agro-editorial visual system

Dark palette with lime accents, editorial typography, subtle grid backgrounds and reusable components.

Interactions and animation

Custom cursor, page transitions, scroll effects, image changes on interaction and microinteractions in buttons and navigation.

Main pages

Development and refinement of the home, courses, projects, about and contact pages.

Learning platform, data and backoffice

Node.js, Express and MySQL support authentication, enrolment, progress, assessments, the private learning area and management screens for courses, modules, lessons, media and users.

Responsive and mobile menu

Mobile experience review, overlap fixes and creation of an opaque top-sheet mobile menu.