ROAD Education project

Introduction

I built the website from complete scratch, primarily using AWS to host the entire site, you can visit the site through the link road.edu.vn.

NOTE

Right now the website has been transferred to wordpress.org since the team no longer needs an advanced website. The current state of the website has been edited by the team independently of me, the website you visit right now is no longer the work of mine

Technology

• Frontend: React with MUI Library
• Backend: Node.js with Express framework
• Database: MongoDB

Advanced features

Road to Uni (depreciated)

This feature allows students to search, pick, and choose universities based on different criteria. Our database covers most universities in Vietnam, except the area near Hanoi capital.

STEM (depreciated)

This active function allows teachers to upload their STEM curriculum for students, as well as download materials from other teachers. The website includes filters that allow teachers to refine their searches based on different criteria, such as:

• Grade level (10, 11, 12)
• High school
• Subject
• Length of the curriculum

Additionally, teachers can use the autocomplete search feature to quickly find their desired files

Technical Enhancements

Beyond the core features, I implemented several key improvements focused on performance, security, and development best practices.

Performance & Modern Features

• Core Web Vitals: Optimized Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) by refining asset loading strategies, reducing render-blocking resources, and implementing lazy loading.
• Progressive Web App (PWA): Enabled app installation prompts by implementing PWA standards.
• Data Storage: Migrated client-side data storage from localStorage to IndexedDB to support larger datasets and improve asynchronous performance.

Security & Data Privacy

• Content Security Policy (CSP): Deployed strict CSP headers to mitigate cross-site scripting (XSS) and other injection attacks.
• CSRF Protection: Secured all state-changing requests with anti-CSRF tokens to prevent cross-site request forgery.
• Compromised Password Prevention: Integrated the HaveIBeenPwned API on the backend to block users from signing up with known breached passwords.
• Secure Logging: Anonymized backend logs by replacing sensitive data with non-identifiable UUIDs for debugging, ensuring user privacy.

Testing & Deployment

• End-to-End Testing: Built an automated testing suite with Cypress to validate critical user flows and prevent regressions.
• Staging Environment: Established a dedicated staging environment for comprehensive pre-deployment testing and quality assurance.
• CloudFront Stability: Build a file name filtering to handle AWS CloudFront's limitations for object names, ensuring file upload reliability.

Accessibility

• WCAG Implementation: Systematically improved application accessibility by applying technical standards guided by the Web Content Accessibility Guidelines (WCAG) 2.2.