Vivly Living Frontend
Vivly Living's frontend is the website homebuyers use to explore developments, look at property details and get in touch with the sales team. Built with Next.js and TypeScript, it features a headless CMS integration, interactive property configurator, and CRM integration.
99%
Form Submission Success Rate
Improved from 90% through stricter validation
< 3s
Page Load Performance
Achieved through image optimization and caching strategies
Technical Architecture
The application follows a modern Next.js architecture with server components, utilizing Storyblok as a headless CMS. It implements the App Router pattern and features server-side actions for form handling.
Technical Details
Frontend
Framework: Next.js with TypeScript
State Management: React Context and Server Components
Styling: TailwindCSS with custom configurations
Notable Features
- Server-side form validation with Zod
- Interactive property configurator
- Dynamic routing with Next.js App Router
- Responsive image optimization
- Custom animations with Framer Motion and GSAP
Backend
Framework: Next.js API Routes
Database: Storyblok CMS
API: REST + SOAP (COINS Integration)
Notable Features
- Server-side actions for form processing
- CMS content resolution and caching
- Secure COINS CRM integration
- Dynamic sitemap generation
Infrastructure
Hosting: Vercel
Deployment: Vercel CI/CD Pipeline
Monitoring: Google Analytics
Notable Features
- Automatic HTTPS/SSL
- Edge caching
- Environment variable management
- Automatic preview deployments
Project Screenshots
Homepage
Vivly Living homepage: people-first homes in beautiful locations
Property Configurator
Interactive kitchen visualiser letting buyers customise their new home
Testimonials & Contact
Customer testimonials and contact section
Team & Role
Team Information
Team Size: 4-6 developers
Role: Frontend Developer
Responsibilities
- Implementing server-side form validation and processing
- Developing and maintaining the property configurator component
- Integration with COINS CRM system
- Building reusable UI components
- Optimizing application performance and SEO