Nardone
The Nardone frontend application is a modern web platform built with Next.js, featuring a robust component-driven architecture and seamless CMS integration. The project emphasizes performance, accessibility, and maintainable code through the use of TypeScript and modern development practices.
80%
Component Reusability
Percentage of components that are reused across multiple features
95+
Performance Score
Lighthouse performance score across key pages
Technical Architecture
The application follows a modern Next.js architecture with TypeScript, featuring app router, server components, and client components where needed. It integrates with Storyblok CMS for content management and uses a component-driven development approach.
Technical Details
Frontend
Framework: Next.js with TypeScript
State Management: React Context and Server Components
Styling: Tailwind CSS with CSS Modules
Notable Features
- Server-side rendering
- Automatic type generation for CMS components
- Component-driven development with Storybook
- Advanced animations with GSAP and Framer Motion
Infrastructure
Hosting: Vercel
Deployment: Vercel CI/CD Pipeline
Monitoring: Vercel Analytics
Notable Features
- Automatic deployments
- Preview deployments for branches
- Performance monitoring
- Error tracking
Team & Role
Team Information
Team Size: 5-10 members
Role: Frontend Developer
Responsibilities
- Developing and maintaining core UI components
- Implementing Storyblok CMS integration
- Creating and maintaining the design system
- Optimizing application performance
- Contributing to architectural decisions
Project Journey
Challenge
Building a scalable component architecture that supports dynamic content from Storyblok CMS
Solution
Implemented a comprehensive component type generation system for Storyblok integration
Impact
Achieved consistent design implementation across the platform
Challenge
Ensuring consistent design implementation across multiple developers
Solution
Created a detailed Storybook documentation system for component development
Impact
Improved development velocity through component reusability
Challenge
Maintaining high performance while implementing rich animations and interactions
Solution
Utilized Radix UI primitives for accessible component foundations
Impact
Enhanced content management workflow with Storyblok integration
Challenge
Managing type safety between CMS content and frontend components
Solution
Developed custom hooks and utilities for animation performance optimization
Impact
Maintained high performance scores despite rich interactive features