next-mobbin-clone

Introduction

This project has been undertaken with the goal of enhancing my skills in user interface (UI) development and putting the cutting-edge features of shadcn-ui to the test. Inspired by the clean design of mobbbin.com, I am recreating its essence using the powerful Next.js 14 framework to optimize the visual experience.

Components mainly used: Carousel, CommandDialog, Dropdown Menu, HoverCard, Checkbox.

[!NOTE] This project contains UI Only - Just for testing shadcn's components.

Installation

Clone & create this repo locally with the following command:

npx create-next-app my-name-project --example "https://github.com/mickasmt/next-mobbin-clone"

1. Install dependencies using pnpm:

pnpm install

2. Start the development server:

pnpm dev

Roadmap

• Fix collision for Hover Card on Y axis in search command dialog
• Detect keyboard for to display HoverCard in search command dialog
• Fix fade carousel after resize screen
• Add framer-motion on HoverCard on carousel buttons tags
• Add auth pages
• Add pricing page

Tech Stack + Features

https://github.com/mickasmt/next-mobbin-clone/assets/62285783/098dc343-a3b1-4d9b-9574-7723eeba5611

Frameworks

• Next.js React framework for building performant apps with the best developer experience

Platforms

• Vercel Easily preview & deploy changes with git

UI

• Tailwind CSS Utility-first CSS framework for rapid UI development
• Shadcn/ui Re-usable components built using Radix UI and Tailwind CSS
• Framer Motion Motion library for React to animate components with ease
• Lucide Beautifully simple, pixel-perfect icons
• next/font Optimize custom fonts and remove external network requests for improved performance
• ImageResponse Generate dynamic Open Graph images at the edge

Code Quality

• TypeScript Static type checker for end-to-end typesafety
• Prettier Opinionated code formatter for consistent code style
• ESLint Pluggable linter for Next.js and TypeScript

Miscellaneous

• Vercel Analytics Track unique visitors, pageviews, and more in a privacy-friendly way

Author

Created by @miickasmt in 2024, released under the MIT license.

Credits

This project was inspired by the Mobbin's website.