This repository is your starting point for the Vercel Academy - Foundations certification program. Over the course of 4 days, you'll build and enhance two production-ready applications for ACME Corporation, demonstrating your mastery of modern web development practices with Next.js and the Vercel platform.
You'll be working on two interconnected applications for ACME Corporation:
- Web Application (
apps/web) - A modern corporate landing page - Blog Application (
apps/blog) - A full-featured company blog platform
Throughout the workshop, you'll implement several critical features including:
- Home Page - Showcase ACME's brand and services
- About Us - Present company information, team, and values
- Blog Post Listing - Display articles with proper pagination and filtering
- Blog Post Details - Individual article pages with rich content
- Additional sections leveraging the provided API helpers
- Project architecture overview
- Environment setup and configuration
- Introduction to the ACME brand guidelines
- Initial page implementations
- Building dynamic routes and pages
- Data fetching strategies implementation
- Component architecture patterns
- Performance optimization basics
- Enterprise-level features
- SEO and metadata optimization
- Third-party integrations
- Observability and analytics setup
- Final implementations
- Performance audits
- Best practices review
- Project presentations
foundation/
├── apps/
│ ├── web/ # Main corporate website
│ │ ├── src/
│ │ │ └── app/ # Next.js App Router
│ │ ├── public/ # Static assets
│ │ └── package.json
│ │
│ └── blog/ # Company blog platform
│ ├── src/
│ │ └── app/ # Next.js App Router
│ │ ├── [slug]/ # Dynamic blog post route
│ │ └── page.tsx # Blog listing page
│ ├── public/ # Static assets
│ └── package.json
│
├── packages/
│ ├── api/ # Mock data and API helpers
│ │ └── src/
│ │ ├── blog.ts # Blog-related data functions
│ │ └── brand.ts # Company data functions
│ │
│ └── ui/ # Shared UI components
│ ├── src/
│ │ ├── components/ # Reusable components
│ │ └── styles/ # Global styles
│ └── components.json # ShadCN configuration
│
├── turbo.json # Turborepo configuration
├── pnpm-workspace.yaml # PNPM workspace setup
└── biome.jsonc # Code formatting/linting
- Node.js 18.x or higher
- PNPM package manager
- Clone this repository:
git clone <repository-url>
cd foundation- Install dependencies:
pnpm install- Start the development servers:
# Run all applications
pnpm dev
# Or run specific apps
pnpm dev --filter=web
pnpm dev --filter=blogpnpm dev- Start all applications in development modepnpm build- Build all applications for production
- Mock API Helpers - Located in
packages/api/src/blog.ts- Blog post data, categories, search functionalitybrand.ts- Company information, team members, services, testimonials
- ShadCN/UI - Pre-configured component library
- Tailwind CSS - Utility-first CSS framework
- Custom Components - Shared across applications
- Turborepo - High-performance build system
- TypeScript - Type-safe development
- Biome - Fast formatter and linter
- Next.js 15 - Latest framework features
During this workshop, you'll gain hands-on experience with:
- Modern rendering strategies and their trade-offs
- Component architecture patterns for scalable applications
- State management strategies without unnecessary complexity
- Caching strategies for optimal performance
- Next.js App Router and its special files
- Server Components vs Client Components
- Data fetching patterns and best practices
- API routes and server actions
- SEO optimization techniques
- Performance monitoring and optimization
- Analytics and observability implementation
- Enterprise patterns for complex data handling
- Accessibility standards
- Responsive design principles
- Code organization and reusability
- Documentation and maintainability
-
Explore the Mock Data - Familiarize yourself with the API helpers in
packages/api/src/. They provide rich, realistic data for your applications. -
Leverage the UI Package - Use the pre-configured components from
packages/ui/to maintain consistency and save time. -
Think Production-Ready - Consider real-world requirements like performance, SEO, and user experience in your implementations.
-
Optimize Strategically - Make informed decisions about rendering strategies based on the content and use case.
-
Document Your Choices - Be prepared to explain your architectural and implementation decisions.
- All data is mocked using Faker.js - no external APIs required
- The project uses PNPM workspaces for monorepo management
- Hot reload is enabled for rapid development
- TypeScript is configured for type safety across the monorepo
- Web: Home page
- Web: Gallery page (set up
next/image) - Web: About page
- Web: Contact Us page
- Blog: Blog listing page
- UX & Styling improvements
- Header & Footer implementation
- Reusable UI components
- Correct colocation of UI components
- Nested layouts for Web and Blog
- Use ENV variables for linking the two apps from navigation
- Web Performance: Font optimisations
- Web Performance: Audit Client vs Server Components
- Web Performance: Check for async waterfalls
- Web Performance: Add skeletons and loading states
- Blog: Dynamic route
- Blog: Error handling
- Blog: Not found handling
- Blog: Pagination
- Contact form implementation
- Add SEO & metadata
- Deploy to Vercel
- Web Performance: Optimise images
- Web Performance: Ensure correct rendering strategy
- Web Performance: Check Chrome DevTools Performance or Vercel Speed Insights
- Contact form: Add tracking (Vercel Analytics)
- Security review: headers
- Security review: API endpoints or Actions
- Security review: ENV variables
- Build & Web Performance: Build locally
- Build & Web Performance: Check build output
- Build & Web Performance: Deploy to Vercel
Good luck with your certification journey! 🎉
Build something amazing, and remember: every line of code is an opportunity to demonstrate your expertise in modern web development.