Commercial website for the beer brand Goudster from Halen, Belgium.
Designed in AdobeXD and built with care in NodeJs by Joris Raymaekers.
See more @ liondigits.com
- Responsive design with mobile first approach
- Bottom menu on mobile, top menu on desktop
- Custom built company history timeline
- Fade-in animations for timeline items via Intersection Observer API
- GDPR compliant forms with active consent before button can be clicked
- Modal pop-up on page load for active age consent
- Cookie bar pop-up with link to privacy-policy
- User consent setting is stored in and read from cookie
- Custom Map via Google Maps API with Advanced Marker Elements
- Flash card pop-ups for client side validation errors and server side messages
- Debounce functionality for form submit buttons to prevent multiple submissions
- Custom error page for 404 and server side errors
- Snow.js integration with custom toggle in menu to enable/disable animation
- ExpressJs web server
- Server side HTML rendering with EJS
- Newsletter sign up handling via Mailgun API.
- Contact form handling via Nodemailer and Mailgun API.
- Server side form content validation (Express-validatorJs)
- Age verification: input birthday validation check
- Routing with Express-Router
- Jest Integration Testing for route handlers and form validation
- Middleware for spam prevention
Gulp task runner with browser-sync and nodemon. CSS written in SASS. JavaScript compilation with Webpack. Type is set to modules: files with .js extension are ES6. CommonJs files have the .cjs extension.
Dev notes:
- both development and production versions require access to the correct environment variables.
- the bash deploy script is meant to be run on a VPS or dedicated build server
- As of december 2023 dev dependencies are updated to work with with Node v20.
- see changelog for version history