Foysal Rana – Full Stack Developer Portfolio

Overview

This project is my personal portfolio and service website. Built with Next.js 15, React 19, and Tailwind CSS 4, it showcases my work, services, and contact flow. The UI uses shadcn/ui and Radix primitives with animation via Framer Motion and Swiper. The backend is an Express API with Prisma and PostgreSQL powering authentication and contact messaging; SEO metadata, accessibility, and performance are prioritized.

Problem Statement

I needed a fast, maintainable portfolio with a real backend to showcase projects, capture leads, and support future content while keeping performance, accessibility, and SEO strong.

Solution

A full‑stack Next.js app with a typed design system, server‑side API for auth and contact, robust validation, and production‑ready security and performance practices. Modular sections (Hero, Services, Portfolio, Testimonials, Contact) and dynamic routes (service and portfolio slugs) make content extensible.

Process / Development Steps

1. 1. Architecture and design system setup with shadcn/ui, Tailwind 4, and Radix.
2. 2. Frontend implementation of pages and components with Next.js App Router.
3. 3. Backend API with Express, Prisma, JWT cookies, and Google OAuth.
4. 4. Form validation with Zod and email delivery via Nodemailer.
5. 5. SEO, accessibility, and performance optimizations with image/route tuning.

Challenges & How They Were Solved

• Performance Optimized bundle splitting, image handling, and animations; leveraged Next.js App Router and turbopack with code‑splitting and caching.
• Data Quality Validated contact inputs with Zod schemas; sanitized and guarded API payloads.
• Access Control Implemented JWT cookie auth, optional/protected routes, and Google OAuth via Passport; enforced server‑side checks.