KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #typescript #developer-tools #claude-code #ai-agent #codex #deepseek-harness #ai-agents #cli #react #mcp

next-mobbin-clone

★ 123 Open GitHub ↗

Replicate the design of mobbin.com to test the news components of shadcn-ui. #builtinpublic

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<a href="https://next-mobbin-clone.vercel.app">
 <img alt="next mobbin clone" src="public/og.png">
 <h1 align="center">Next Mobbin Clone</h1>
</a>

<a href="#introduction">Introduction</a> ·
 <a href="#installation">Installation</a> ·
 <a href="#tech-stack--features">Tech Stack + Features</a> ·
 <a href="#author">Author</a> ·
 <a href="#credits">Credits</a>

## 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:

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

1. Install dependencies using pnpm:

```sh
pnpm install
```

2. Start the development server:

```sh
pnpm dev
```

## Roadmap

- [x] ~Fix collision for Hover Card on Y axis in search command dialog~
- [x] ~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](https://nextjs.org/) – React framework for building performant apps with the best developer experience

### Platforms

- [Vercel](https://vercel.com/) – Easily preview & deploy changes with git

### UI

- [Tailwind CSS](https://tailwindcss.com/) – Utility-first CSS framework for rapid UI development
- [Shadcn/ui](https://ui.shadcn.com/) – Re-usable components built using Radix UI and Tailwind CSS
- [Framer Motion](https://framer.com/motion) – Motion library for React to animate components with ease
- [Lucide](https://lucide.dev/) – Beautifully simple, pixel-perfect icons
- [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) – Optimize custom fonts and remove external network requests for improved performance
- [`ImageResponse`](https://nextjs.org/docs/app/api-reference/functions/image-response) – Generate dynamic Open Graph images at the edge

### Code Quality

- [TypeScript](https://www.typescriptlang.org/) – Static type checker for end-to-end typesafety
- [Prettier](https://prettier.io/) – Opinionated code formatter for consistent code style
- [ESLint](https://eslint.org/) – Pluggable linter for Next.js and TypeScript

### Miscellaneous

- [Vercel Analytics](https://vercel.com/analytics) – Track unique visitors, pageviews, and more in a privacy-friendly way

## Author

Created by [@miickasmt](https://twitter.com/miickasmt) in 2024, released under the [MIT license](https://github.com/shadcn/taxonomy/blob/main/LICENSE.md).

## Credits

This project was inspired by the [Mobbin](https://mobbin.com/)'s website.

next-mobbin-clone

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README