Project Overview: Med Training Platform Website Link: www.med-training.org For the Med Training p...Project Overview: Med Training Platform Website Link: www.med-training.org For the Med Training p...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Jordy's avatar
Jordy Lara
• Jul 23
Project Overview: Med Training Platform
Website Link: www.med-training.org
For the Med Training platform, my main goal was to bridge the gap between high-end brand design and advanced backend functionality. I wanted to build a practical, powerful, and visually striking platform for medical courses where Squarespace acts as a highly secure and beautiful front-end interface connecting to a robust internal database.
Design & Finish Layer Features Visually, the brand needed to project trust and modernity. I heavily utilized Squarespace’s Finish Layer tools to bring the site to life without compromising loading speeds. I applied native entrance animations across multiple images and key sections to create a smooth, dynamic browsing experience. These built-in design layers allowed me to maintain a polished, professional aesthetic that captures the user's attention right away.
Advanced Functionality, Custom JSON & Smart Automation The true power of this site lies in its custom architecture. I completely transformed the standard Squarespace Summary Blocks into a fully functional, interactive Course Calendar.
Dynamic Filtering: Users can filter events seamlessly by category and by month, driven by the event titles.
Real-Time Data Fetching: The blue card on the left side of the screen is entirely dynamic. It reads the specific registration link from the active summary in real-time.
JSON Integration: Based on that link, the card pulls precise data from a custom JSON file. This JSON file feeds the UI with the exact price, specific instructions, and even dedicated payment methods that change dynamically depending on the selected event.
Smart Deadlines & Scarcity Alerts: The system intelligently reads event dates to automatically close registrations 10 to 30 days prior to the event. Additionally, I built in a toggleable alert system: I can activate a "few spots left" warning that visually highlights those specific events in red, driving urgency and conversions.
Secure Database Connection Security and automation were non-negotiable. When a user registers, Squarespace handles the secure front-end connection, but the enrollment data is automatically routed to our internal database. This creates a flawless, automated loop that is practical for the admins and frictionless for the users.
Med Training is the perfect example of how Squarespace’s beautiful design tools can be pushed to the limit with custom code and external database integrations.
@Squarespace
squarespacechallengeWeb DesignGitHub
Post image
Post image
Post image
Dylan's avatar
Contra logo
Dylan Siegel
• 1d
This is great
Jordy's avatar
Jordy Lara
• Jul 23
My Social Post: https://www.linkedin.com/posts/jordy-l-253882171_squarespacechallenge-ugcPost-7486199986557296640-XOs-/?utm_source=share&utm_medium=member_desktop&rcm=ACoAACjixt8BzYJeYcGxKnC_5UYO23lW68HZRps
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started