Forem: Said MOUNAIM

Redesigning My Portfolio with Claude Code + Frontend-Design Skill

Said MOUNAIM — Thu, 26 Feb 2026 01:32:59 +0000

I redesigned my portfolio using Claude Code and the frontend-design skill to improve layout, hierarchy, and overall UI quality.

🌐 Live: https://mounaim.dev/

💻 GitHub: https://github.com/saidMounaim/mounaim.dev

Install Claude Code

Install in your terminal:

curl -fsSL https://claude.ai/install.sh | bash

After installation, run:

claude

Install the frontend-design Skill
Install the skills CLI:

npx skills

Search for the skill:

npx skills find

Type:

/frontend-design

Choose the official version from Anthropic and install it.
Launch Claude again:

claude

Inside Claude:

/frontend-design [HERE PROMPT]

Example prompt:

Redesign my portfolio hero section using modern UI best practices.
Improve spacing, typography, and CTA clarity.
Keep it minimal and developer-focused.

I reviewed the changes, refined them, and committed updates.

TalentAI is a modern job board built with vibe coding — fast, clean, and developer-focused.

Said MOUNAIM — Wed, 04 Feb 2026 16:25:14 +0000

It helps candidates apply to tech jobs effortlessly and get once-a-month AI career insights powered by OpenAI, while recruiters manage jobs through a simple dashboard. Built with Next.js, Prisma, PostgreSQL, Better Auth, and a polished Tailwind + Shadcn UI.

🔗 Live demo: https://talentaijobs.netlify.app/

💻 Repo: https://github.com/saidMounaim/talentai

Built using Claude Code + Cursor for rapid, fun development ✨

Football pitch reservation app built with Next.js, Shadcn UI, Prisma, and Better Auth

Said MOUNAIM — Wed, 31 Dec 2025 08:23:13 +0000

⚽ FootBookr

The modern platform for booking football pitches. Manage venues, track revenue, and book matches seamlessly.

🔗 Links

Live Demo: https://footbookr.vercel.app/
Github Repo: https://github.com/saidMounaim/footbookr

✨ Features

🏟️ For Players

Real-time Availability: Browse pitches and see live slot availability.
Smart Booking: Filter by 5-a-side vs 7-a-side, date, and time.
Digital Tickets: QR Code generation for seamless check-in at the venue.
User Dashboard: Manage upcoming matches and view booking history.
Social Login: One-click sign-in with Google or Email.

⚡ For Admins

Analytics Dashboard: Visual revenue charts, occupancy heatmaps, and KPI cards.
Venue Management: Add or delete pitches with image uploads.
Booking Control: View all reservations, cancel bookings, and manage schedules.
User Management: View user stats and manage permissions.

🛠️ Tech Stack

Framework: Next.js 16 (App Router, Server Components, Server Actions, Data Access Layer)
Language: TypeScript
Styling: Tailwind CSS
Components: Shadcn UI (Radix UI)
Database: PostgreSQL (via Prisma ORM)
Authentication: BetterAuth
Charts: Recharts / Shadcn Charts
Icons: Lucide React
Utilities: date-fns (Time), zod (Validation), react-hook-form (Forms)

QuickCart A Next.js, Prisma, and Better Auth platform for side-hustlers selling on WhatsApp.

Said MOUNAIM — Wed, 24 Dec 2025 13:29:52 +0000

Live Demo: https://quickcart-sm.vercel.app/
GitHub Repo: https://github.com/saidMounaim/quickcart

📖 About The Project

QuickCart is a platform designed for small businesses and side-hustlers who sell via social media (Instagram, TikTok, WhatsApp).

Instead of sending back-and-forth messages to explain prices and send product photos, sellers create a QuickCart Store. Customers browse, add to cart, and the final order is sent as a pre-formatted WhatsApp message to the seller to finalize payment and delivery.

✨ Key Features

⚡ Instant Store Creation: Launch a store in under 60 seconds.
📱 Mobile-First Storefront: Optimized for phone screens with a sticky cart and swipeable categories.
🛒 WhatsApp Checkout: No payment gateways required. Orders are sent as detailed WhatsApp messages.
🔍 Instant Search & Filtering: Client-side filtering for a snappy user experience.
📊 Seller Dashboard: Track revenue, active orders, and top-selling products.
👥 Customer CRM: Automatically build a customer list based on order history.
🖼️ Image Management: Drag-and-drop uploads for product images and store branding.
🎨 Custom Branding: Upload logos, cover images, and set custom currencies.

Level Up Your E-Commerce: Mastering Headless Architecture with Shopify and Next.js 16

Said MOUNAIM — Mon, 08 Dec 2025 21:47:29 +0000

I am excited to share my latest effort: building a fully custom, high-performance storefront for Shopify using a headless architecture powered by Next.js 16 (App Router).

The key benefit here is the ability to scale the frontend and achieve uncompromising speed, moving past the constraints of typical e-commerce platform themes.

Check out the live application's performance and the clean code structure on GitHub.

Live demo: https://terraceshop.vercel.app
Github repo: https://github.com/saidMounaim/terraceshop

A high-performance, accessible, and SEO-optimized portfolio built with Next.js & TypeScript

Said MOUNAIM — Tue, 02 Dec 2025 08:06:44 +0000

Said MOUNAIM | Portfolio

A high-performance, accessible, and SEO-optimized portfolio built with Next.js & TypeScript.

Github repo: https://github.com/saidMounaim/mounaim.dev/
Live: https://mounaim.dev/

Performance

Getting Started

1. Clone the repository

git clone https://github.com/saidMounaim/mounaim.dev.git

2. Install dependencies

npm install

3. Configure Environment Variables Create a .env file in the root directory:

EMAIL_USER=your_email
EMAIL_PASS=your_password

Customize Information

Update your details in the /constants/index.ts file.

Built With

Real estate web app built with Next.js, Prisma, BetterAuth, and ShadCN/UI

Said MOUNAIM — Mon, 24 Nov 2025 22:03:38 +0000

PropPulse

PropPulse is a modern and minimal real estate web application** built with Next.js 16, Prisma,BetterAuth, and ShadCN/UI.

Users can browse properties, add listings, and manage their real estate posts through a clean and fast interface.

GitHub repo

🔗 (https://github.com/saidMounaim/prop-pulse)

Live Demo

🔗 (https://proppulse-next.netlify.app/)

✨ Features

🔐 Authentication with BetterAuth
🏡 Browse all properties with search & filters
📝 Add new property listings with images, price, location, and details
📸 Upload property images using ImageKit
🗂️ Manage your own listings (edit/delete)
💅 Beautiful UI using ShadCN/UI + Tailwind CSS
📱 Fully responsive on all screen sizes

📦 Tech Stack

Next.js 16
Tailwind CSS
ShadCN/UI
TypeScript
Prisma ORM
BetterAuth
ImageKit (image uploads)

🛠 Getting Started

Follow these steps to run the project locally:

1. Clone the repository

git clone https://github.com/saidMounaim/prop-pulse.git
cd prop-pulse

2. Install dependencies

npm install

3. Configure environment variables

Create a .env file in the root:

# Database
DATABASE_URL="postgresql://..."

# BetterAuth
BETTER_AUTH_BASE_URL="https://proppulse-next.netlify.app"
BETTER_AUTH_SECRET="your_betterauth_secret"

# ImageKit
IMAGEKIT_PUBLIC_KEY="your_public_key"
IMAGEKIT_PRIVATE_KEY="your_private_key"
IMAGEKIT_URL_ENDPOINT="https://ik.imagekit.io/your_id"

4. Start the dev server

npm run dev

💼 Contribution

All contributions are welcome!

Fork the repo, create a new branch, and submit a pull request.

Real estate web app built with Next.js, Prisma, BetterAuth, and ShadCN/UI

Said MOUNAIM — Mon, 24 Nov 2025 14:18:54 +0000

PropPulse

GitHub repo

🔗 (https://github.com/saidMounaim/prop-pulse)

Live Demo

🔗 (https://proppulse-next.netlify.app/)

✨ Features

🔐 Authentication with BetterAuth
🏡 Browse all properties with search & filters
📝 Add new property listings with images, price, location, and details
📸 Upload property images using ImageKit
🗂️ Manage your own listings (edit/delete)
💅 Beautiful UI using ShadCN/UI + Tailwind CSS
📱 Fully responsive on all screen sizes

📦 Tech Stack

Next.js 16
Tailwind CSS
ShadCN/UI
TypeScript
Prisma ORM
BetterAuth
ImageKit (image uploads)

🛠 Getting Started

Follow these steps to run the project locally:

1. Clone the repository

git clone https://github.com/saidMounaim/prop-pulse.git
cd prop-pulse

2. Install dependencies

npm install

3. Configure environment variables

Create a .env file in the root:

# Database
DATABASE_URL="postgresql://..."

# BetterAuth
BETTER_AUTH_BASE_URL="https://proppulse-next.netlify.app"
BETTER_AUTH_SECRET="your_betterauth_secret"

# ImageKit
IMAGEKIT_PUBLIC_KEY="your_public_key"
IMAGEKIT_PRIVATE_KEY="your_private_key"
IMAGEKIT_URL_ENDPOINT="https://ik.imagekit.io/your_id"

4. Start the dev server

npm run dev

💼 Contribution

All contributions are welcome!

Fork the repo, create a new branch, and submit a pull request.

Resume Scan AI app built with Next.js 15, Tailwind CSS, BetterAuth, Open AI, Inngest, and Shadcn/ui

Said MOUNAIM — Mon, 06 Oct 2025 08:54:45 +0000

Resume Scan AI

Resume Scan AI app built with Next.js 15, Tailwind CSS, BetterAuth, Open AI, Inngest, and Shadcn/ui. Features include user sign-up, sign-in, uploading and scanning resumes, viewing scan results, and deleting analyses.

Getting Started

Clone the repository:

git clone https://github.com/saidMounaim/resume-scan-AI.git

Install dependencies:

npm install

Create a .env file:

DATABASE_URL=""
BETTER_AUTH_BASE_URL=""
OPENAI_API_KEY=""

Built With

Contribution

All kinds of contributions are welcome. Feel free to fork the repo and submit a pull request!

Online ticket booking web app built with Next.js, Prisma, BetterAuth, and ShadCN/UI

Said MOUNAIM — Tue, 19 Aug 2025 14:02:35 +0000

🎬 CineEntry

CineEntry is a clean, minimal online movie ticket booking web app built with Next.js, Prisma, BetterAuth, and ShadCN/UI. Users can browse movies, create screenings, upload posters, and book tickets directly—no payment required.

🚀 Live Demo

🔗 https://cineentry.vercel.app

🚀 Github Repo

🔗 https://github.com/saidMounaim/cineentry

MovieMood is a React Native app built with Expo that lets you discover and explore movies using the TMDb API.

Said MOUNAIM — Sun, 13 Jul 2025 23:01:23 +0000

🎬 MovieMood

MovieMood is a sleek, minimal mobile app built with React Native and Expo. It lets users discover and explore movies using the TMDb API. Enjoy a smooth and responsive interface, browse top-rated and trending titles, and manage your watchlist.

✨ Features

🔍 Search for movies by title
🎞️ Explore popular, top-rated, upcoming, and trending movies
📋 View detailed movie info (poster, overview, release date, cast)
💾 Save favorite movies to your personal watchlist
🧠 Powered by Zustand for state management

📦 Tech Stack

React Native
Expo
TypeScript
Zustand — global state management
TMDb API — movie data provider

Github Repo

https://github.com/saidMounaim/movie-mood-app.git

TickEvent web app built with Next.js, Prisma, BetterAuth, and ShadCN/UI.

Said MOUNAIM — Tue, 01 Jul 2025 11:10:48 +0000

🎟️ TickEvent

TickEvent is a clean, minimal event-sharing and ticketing web app built with Next.js, Prisma, BetterAuth, and ShadCN/UI. Users can create events, upload images, sell tickets via Stripe, and track orders—all.

🚀 Live Demo

🔗 https://tick-event.vercel.app

GitHub Repo

🔗 https://github.com/saidMounaim/tick-event

✨ Features

🔐 Sign up / Sign in with BetterAuth
🎉 Create events with title, image, price, and ticket count
📸 Upload images using ImageKit
💳 Buy tickets with secure Stripe Checkout
📊 View your ticket orders in your personal dashboard
💅 Fully responsive, clean design using ShadCN/UI and Tailwind CSS