STRPS Website: Modern CMS-Powered Website.

STRPS Website is a modern, performance-optimized web application that combines the power of Next.js and PayloadCMS to deliver a beautifully designed, fully customizable content management experience. With responsive UI, block-based content architecture, and secure form handling, STRPS is designed for scalability, flexibility, and top-tier performance.

Key Features

• Next.js App Router Architecture: Uses the latest Next.js features for optimal performance, SEO, and routing.
• Custom CMS Blocks: Pages are built from flexible, modular content blocks like Hero, Skills, and Form sections.
• Form Builder with reCAPTCHA: Advanced form integration supporting field customization, validation, and anti-spam protection.
• Design System: Consistent and responsive UI using Tailwind CSS and shadcn/ui components.
• Publication Workflow: Content creators can manage drafts, approvals, and publishing directly in the CMS.
• Dark Mode: Built-in support for light/dark mode switching.

Technologies Used

• Frontend: Next.js (App Router), React, Tailwind CSS, shadcn/ui
• Backend: PayloadCMS (Node.js, Express-based Headless CMS)
• Database: PostgreSQL
• Forms: React Hook Form, reCAPTCHA integration
• Deployment: Vercel (includes blob storage, environment config)

My Role & Contributions

• Designed and implemented the custom content block system (Hero, Skills, Form)
• Integrated reCAPTCHA for secure form submissions
• Built the responsive UI using Tailwind CSS and shadcn/ui components
• Configured PayloadCMS collections and publication workflows
• Set up deployment pipeline with Vercel and NeonDB
• Implemented environment-based configuration for API security, CORS, and authentication

Key Learnings & Challenges

• Gained deep understanding of Next.js App Router and PayloadCMS extensibility
• Learned to manage secure user input and prevent spam using server-side reCAPTCHA
• Overcame challenges related to dynamic block rendering and CMS-driven routing
• Improved CI/CD setup with environment configuration for cloud deployments