Building CodeAndCount: A Full-Stack Journey from Concept to Launch

Every agency needs a website that showcases not just their work, but their technical capabilities. Here's how we built ours from the ground up.

The Vision: More Than Just a Portfolio

When we set out to build CodeAndCount.com, we had a clear mission: create a website that demonstrates our technical expertise while serving as a high-converting lead generation platform. We didn't want a template—we wanted a custom solution that would set us apart.

Key Goals We Set

1. Performance-First Architecture - Sub-second load times
2. SEO Excellence - Rank for targeted keywords from day one
3. Modern Tech Stack - Showcase cutting-edge technologies
4. Scalable CMS - Full admin panel for content management
5. Engaging UX - Smooth animations and intuitive navigation

---

Tech Stack Decisions

After careful evaluation, we chose a stack that prioritizes performance, developer experience, and scalability:

---

Challenges We Faced (And How We Solved Them)

Challenge 1: Smooth Scroll Animations with Sticky Positioning

The Problem: We wanted cards to stack on top of each other as users scroll through our portfolio. But CSS position: sticky kept breaking.

Root Cause: An overflow: hidden on a parent container was blocking the sticky behavior.

Solution: We refactored the component hierarchy to remove the conflicting overflow property while maintaining visual containment through other means:

// Before: Broken sticky
<section className="overflow-hidden">
  <div className="sticky top-100">...</div>
</section>

// After: Working sticky
<section className="relative">
  <div className="absolute inset-0 overflow-hidden pointer-events-none">
    {/* Background effects only */}
  </div>
  <div className="sticky top-100">...</div>
</section>

Challenge 2: Hydration Mismatches with Date Rendering

The Problem: "Text content does not match server-rendered HTML" errors appearing in production.

Root Cause: Dates were being formatted differently on the server vs. client due to timezone differences.

Solution: Serialize dates to ISO strings on the server, then format them client-side:

// Server Component
const serializedPosts = posts.map(post => ({
  ...post,
  publishedAt: post.publishedAt?.toISOString() // Always UTC
}));

// Client Component
const formattedDate = new Date(post.publishedAt).toLocaleDateString();

Challenge 3: Type-Safe Database Queries

The Problem: Complex queries with joins were losing type information.

Solution: Drizzle ORM's relational queries with proper typing:

const projectWithCaseStudy = await db.query.projects.findFirst({
  where: (projects, { eq }) => eq(projects.slug, slug),
  with: {
    caseStudy: true
  }
});
// projectWithCaseStudy is fully typed!

Challenge 4: Video Preview Performance

The Problem: Video previews on hover were loading slowly and causing layout shifts.

Solution:

• Use preload="metadata" to load only video metadata initially
• Add playsInline and muted for autoplay compliance
• Implement lazy loading with Intersection Observer

---

Features We Built

1. Custom Admin Panel

A complete CMS for managing:

• 📝 Blog posts with markdown support
• 🏷️ Categories with color coding
• 📁 Portfolio projects
• 📊 Case studies with stats
• ⭐ Client testimonials
• 📈 Analytics dashboard

2. SEO Optimization

Every page is optimized with:

• Dynamic meta tags
• Open Graph images
• Structured data (JSON-LD)
• Sitemap generation
• Proper heading hierarchy

3. Performance Optimizations

• Image Optimization: Next.js Image with proper sizing
• Code Splitting: Dynamic imports for heavy components
• Font Loading: Using next/font for zero layout shift
• Caching: Aggressive caching strategies

4. Interactive Elements

• Smooth scroll-based animations
• Sticky card stacking effects
• Hover preview videos
• Parallax backgrounds
• Dark mode throughout

---

Results & Metrics

After launching CodeAndCount, we achieved:

---

Key Takeaways

1. Start with the data model - A solid schema prevents many headaches later
2. Type everything - TypeScript + Drizzle = confident refactoring
3. Test on real devices - Animations that look great on desktop might struggle on mobile
4. Monitor performance continuously - Use Lighthouse CI in your deploy pipeline
5. Document as you go - Future you will thank present you

---

What's Next?

We're continuously improving CodeAndCount:

• Add internationalization (i18n) for multi-language support
• Implement A/B testing for conversion optimization
• Build a client portal for project updates
• Add more interactive case study features

---

Need a Similar Solution?

If you're looking to build a high-performance web application with modern technologies, let's talk. We bring the same level of care and technical expertise to every project.

---

Built with ❤️ by the CodeAndCount team

Related Articles:

• Why Your Business Needs a Website in 2024
• Next.js vs React: Which Should You Choose?