next-mobbin-clone - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #golang #go #android #rust #nodejs #macos #java #awesome #cli #kubernetes #awesome-list #security

next-mobbin-clone

(★ 123)

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

파일 탐색기

최종 버전 다운로드 (.zip)

- settings.json
- - layout.tsx
- favicon.ico
- globals.css
- layout.tsx
- - carousel-buttons-tags.tsx
  - carousel-card.tsx
  - carousel-progress-bar.tsx
- - search-command-dialog.tsx
- - badge.tsx
  - button.tsx
  - carousel.tsx
  - checkbox.tsx
  - command.tsx
  - context-menu.tsx
  - dialog.tsx
  - dropdown-menu.tsx
  - hover-card.tsx
  - popover.tsx
  - scroll-area.tsx
  - separator.tsx
  - skeleton.tsx
  - tooltip.tsx
- analytics.tsx
- button-hover-card.tsx
- button-tag.tsx
- cards-list.tsx
- categories-list.tsx
- checkbox-card.tsx
- checkbox-toolbar.tsx
- command-content.tsx
- context-menu-card.tsx
- hero-homepage.tsx
- hero-switcher.tsx
- hover-card-content.tsx
- hover-popover.tsx
- icons.tsx
- modal-provider.tsx
- nav-links.tsx
- nav-menu.tsx
- search-button-nav.tsx
- tags-list.tsx
- tailwind-indicator.tsx
- theme-provider.tsx
- theme-toggle.tsx
- site.ts
- use-checkbox-selection.ts
- use-hero-selection.ts
- use-lock-body.ts
- use-media-query.ts
- use-mounted.ts
- use-search-modal.ts
- _data.tsx
- utils.ts
- - basiersquare-medium-webfont.woff2
  - basiersquare-regular-webfont.woff2
  - basiersquare-semibold-webfont.woff2
- - desktop-screen.webp
  - hero-banner-1.webp
  - hero-banner-2.webp
  - hero-banner-3.webp
  - hero-banner-4.webp
  - phone-screen.webp
  - review-star-dark.png
  - review-star-light.png
  - square-logo.webp
- next.svg
- og.png
- vercel.svg
.eslintrc.json
.gitignore
components.json
LICENCE.md
next.config.js
package.json
pnpm-lock.yaml
postcss.config.js
README.md
tailwind.config.ts
tsconfig.json

// 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>

<p align="center">
  <a href="https://twitter.com/miickasmt">
    <img src="https://img.shields.io/twitter/follow/miickasmt?style=flat&label=miickasmt&logo=twitter&color=0bf&logoColor=fff" alt="Mickasmt Twitter follower count" />
  </a>
</p>

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

## 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. 
<br/>
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.