https://github.com/saulkurosaki/dribbble-clone-project
This is a Full-Stack Complete and Device Responsive Dribbble App Clone Project called: Flexibble, developed with NextJs14, Typescript, TailwindCss, HeadlessUi, ShadcnUi, Cloudinary, Clerk and MongoDB to practice my Developer skills
https://github.com/saulkurosaki/dribbble-clone-project
clerk clerkauth cloudinary headlessui mongodb mongoose nextjs nextjs14 nextjs14-typescript shadcn-ui tailwindcss typescript
Last synced: 3 months ago
JSON representation
This is a Full-Stack Complete and Device Responsive Dribbble App Clone Project called: Flexibble, developed with NextJs14, Typescript, TailwindCss, HeadlessUi, ShadcnUi, Cloudinary, Clerk and MongoDB to practice my Developer skills
- Host: GitHub
- URL: https://github.com/saulkurosaki/dribbble-clone-project
- Owner: saulkurosaki
- Created: 2024-02-02T20:03:23.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-09T22:56:19.000Z (about 2 years ago)
- Last Synced: 2025-01-15T01:03:14.828Z (over 1 year ago)
- Topics: clerk, clerkauth, cloudinary, headlessui, mongodb, mongoose, nextjs, nextjs14, nextjs14-typescript, shadcn-ui, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://flexibble-ten-gamma.vercel.app
- Size: 11.3 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 DRIBBBLE CLONE: High-Fidelity Design Showcase and Social Platform
## **STRATEGIC ARCHITECTURE & BUSINESS VALUE**
### 🎯 Identified Market Problem & Value Proposition
> **Core Problem:** The need for a platform that maximizes visual impact, content discovery, and social interaction within a visually intensive community focused on design portfolios.
>
> **T-Shape Solution:** Built a high-fidelity clone focused on **complex grid layouts, visual consistency, and user authentication**. The strategic goal is to demonstrate mastery in translating complex design systems into performant Front-End code (Barra Horizontal: UI/UX, Maquetación).
### 📈 Key Metrics, Anti-AI Strategy, and Business Alignment
* **Performance Priority:** Fast image loading and efficient list rendering (implied virtualization) to handle the high density of visual content, crucial for user engagement.
* **Strategy Anti-AI:** The value is in the **meticulous detail and aesthetic judgment** required to replicate a high-standard design system (Dribbble), integrating dynamic data without compromising the visual experience.
* **Monetization/Value Stream:** Focuses on high user retention through continuous, visually appealing content feeds.
---
## **DEEP SOFTWARE ARCHITECTURE**
### 🛠️ Core Technology Stack
| Technology | Role and Strategic Justification |
| :--- | :--- |
| **Framework** | Next.js 14 (TypeScript) |
| **Backend/DB** | |
| **Styling** | Tailwind CSS |
| **Auth** | Clerk / Custom Auth (Implied Social Login) |
| **AI/Services** | Image Optimization (Cloudinary/Next Image), Advanced CSS Grid/Flexbox |
### ⚙️ Key Architectural Decisions
1. **Next.js (API Routes/Security):** Used to manage secure data endpoints and enforce access control logic (authentication/authorization) for user-generated content.
2. **Data Modeling for Recursion:** The core challenge was designing a database schema (MongoDB/Mongoose implied) to efficiently query and render **deeply nested threads** without performance degradation.
3. **Clerk/Auth:** Utilized to delegate the critical security layer of authentication, ensuring development focus remained on the complex social logic.
---
## **T-SHAPE SUPERPOWERS & EXECUTION CHALLENGES**
### 🧠 Strategic Challenges Overcome
* **Challenge 1:** Achieving **efficient grid layouts** that are fully responsive and adapt gracefully to varying screen sizes and content densities.
* **Solution 1:** Masterful application of advanced CSS (Grid/Flexbox) combined with Tailwind responsiveness utility.
* **Challenge 2:** Managing the **loading state and lazy loading** of images to avoid performance bottlenecks in the main feed.
* **Solution 2:** Strategic use of lazy loading and placeholders for images not currently in the viewport.
### 💻 Local Setup (Quick Start)
```bash
# 1. Clone the repository
git clone https://github.com/saulkurosaki/DRIBBBLE-CLONE-PROJECT
# 2. Change directory
cd DRIBBBLE-CLONE-PROJECT
# 3. Install dependencies
npm install
# 4. Configure variables de entorno
# Create a .env.local file and add the necessary keys for Auth (Clerk) and Database access.
# 5. Start Development Server
npm run dev
```
----
