My profiles

My profiles

My Profiles is a modern project showcase platform that allows developers, designers, and creators to share and review side projects, startups, and open-source builds. Built with React, Vite, Clerk Authentication (Google SSO), and a Supabase backend, it features a fluid landing page with dynamic hero animations and a featured projects showcase. Users can log in securely to manage their profiles, submit detail-rich project previews with media assets, and connect with other builders.

System Viewport Preview

https://myprofiles.co.in

The Challenge

The objective was to transform a basic hackathon prototype into a premium, production-ready showcase hub called My Profiles. The implementation faced several critical technical and design challenges:

Authentication Re-engineering & Migration: The legacy system relied on basic local storage mocks and standard Supabase inputs, which lacked robust security and seamless OAuth flows. The challenge lay in integrating the enterprise-grade Clerk Authentication SDK (specifically Google SSO) inside a single-page React Router structure without causing full-page refreshes or breaking state synchronization.
Layout and Alignment Clipping: Implementing a modern, dynamic hero section with text cycling animations using Framer Motion. The varying character lengths of rotating words (such as transitioning from "Builds" to "Masterpieces") caused text clipping on the horizontal axis and severe layout reflow on desktop viewports.
Aesthetic and Style Alignment: The project required a full upgrade to support TypeScript compilation and Tailwind CSS v4 styling rules. The engineering team had to deploy these tools concurrently while strictly preserving the client's custom brand color palette (cream-white background #FCFBF8 and warm orange accents #F97316) without relying on default Tailwind color resets.
Access Gating and Render Loops: Restricting views of featured projects to users who had already contributed a submission, while ensuring that redirect logic did not trigger infinite rendering loops or spam toast notifications.

The Solution

To resolve these challenges, a complete system upgrade and layout redesign were executed:

Full TypeScript, Tailwind CSS, & shadcn CLI Setup:
- Installed the TypeScript runtime and configurations alongside PostCSS and Tailwind CSS v4.
- Created a custom tailwind.config.js mapping standard color properties to our existing CSS custom variables (--bg-primary, --primary, , etc.) to maintain the brand’s custom cream-white and warm orange identity.

The Implementation Process

The upgrade was carried out in a systematic, phased workflow to prevent service downtime and build breaks:

Dependency Audit and Installation:
- Evaluated package locks and installed core development packages: typescript, @types/react, @types/react-dom, @types/node, tailwindcss, @tailwindcss/postcss, postcss, autoprefixer, and vite-tsconfig-paths.
- Installed animation and helper packages: framer-motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, and tailwind-merge.
Environment Configuration:
- Initialized tsconfig.json to define path mapping aliases (@/* mapping to ./src/*) and strict compilation guidelines.
- Created postcss.config.js and tailwind.config.js to run the @tailwindcss/postcss compiler.
- Written components.json to map shadcn components and utility imports.
Styles & Path Resolution Integration:
- Injected PostCSS Tailwind directives at the top of the global stylesheet (src/index.css), ensuring imports precede all other definitions to prevent PostCSS parsing errors.
- Configured Vite's native resolve.tsconfigPaths: true inside vite.config.js to natively handle typescript path aliases during compilation.
- Exported the standard cn merging helper inside utils.js.
Authentication Migration:
- Replaced the standard local storage mock and Supabase inputs with Clerk React SDK.
- Wrapped the React Router layout in the Clerk provider and mapped routes using custom navigation state hooks to bypass full-page reloads.
Refinement and Deployment:
- Modified the hero container's minimum styling layout to eliminate word clipping on desktop and mobile viewports.
- Copied custom brand logos and configured index.html's favicon.png meta tag.
- Ran local compilation tests (npm run build) and deployed to the Vercel production branch, linking the build to the custom domain.

The Challenge

The Challenge

The Solution

The Solution

The Implementation

The Implementation Process

The Results

The Results

Project Metrics

Verified Proof

Ready to achieve your own outcomes?