next-mobbin-clone
next-mobbin-clone copied to clipboard
Replicate the design of mobbin.com to test the news components of shadcn-ui. #builtinpublic
Next Mobbin Clone
Introduction · Installation · Tech Stack + Features · Author · Credits
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"
- Install dependencies using pnpm:
pnpm install
- Start the development server:
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 – 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.