{"id":20355415,"url":"https://github.com/saulkurosaki/dribbble-clone-project","last_synced_at":"2026-04-12T13:07:43.961Z","repository":{"id":220576370,"uuid":"752006773","full_name":"saulkurosaki/DRIBBBLE-CLONE-PROJECT","owner":"saulkurosaki","description":"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","archived":false,"fork":false,"pushed_at":"2024-07-09T22:56:19.000Z","size":11828,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-15T01:03:14.828Z","etag":null,"topics":["clerk","clerkauth","cloudinary","headlessui","mongodb","mongoose","nextjs","nextjs14","nextjs14-typescript","shadcn-ui","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://flexibble-ten-gamma.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/saulkurosaki.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-02T20:03:23.000Z","updated_at":"2024-07-09T22:56:23.000Z","dependencies_parsed_at":"2024-07-10T02:59:22.147Z","dependency_job_id":null,"html_url":"https://github.com/saulkurosaki/DRIBBBLE-CLONE-PROJECT","commit_stats":null,"previous_names":["saulkurosaki/dribbble-clone-project"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saulkurosaki%2FDRIBBBLE-CLONE-PROJECT","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saulkurosaki%2FDRIBBBLE-CLONE-PROJECT/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saulkurosaki%2FDRIBBBLE-CLONE-PROJECT/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saulkurosaki%2FDRIBBBLE-CLONE-PROJECT/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saulkurosaki","download_url":"https://codeload.github.com/saulkurosaki/DRIBBBLE-CLONE-PROJECT/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241889181,"owners_count":20037460,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clerk","clerkauth","cloudinary","headlessui","mongodb","mongoose","nextjs","nextjs14","nextjs14-typescript","shadcn-ui","tailwindcss","typescript"],"created_at":"2024-11-14T23:12:39.573Z","updated_at":"2026-04-12T13:07:43.954Z","avatar_url":"https://github.com/saulkurosaki.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 DRIBBBLE CLONE: High-Fidelity Design Showcase and Social Platform\n\n## **STRATEGIC ARCHITECTURE \u0026 BUSINESS VALUE**\n\n### 🎯 Identified Market Problem \u0026 Value Proposition\n\n\u003e **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.\n\u003e\n\u003e **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).\n\n### 📈 Key Metrics, Anti-AI Strategy, and Business Alignment\n\n*   **Performance Priority:** Fast image loading and efficient list rendering (implied virtualization) to handle the high density of visual content, crucial for user engagement.\n*   **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.\n*   **Monetization/Value Stream:** Focuses on high user retention through continuous, visually appealing content feeds.\n\n---\n\n## **DEEP SOFTWARE ARCHITECTURE**\n\n### 🛠️ Core Technology Stack\n\n| Technology | Role and Strategic Justification |\n| :--- | :--- |\n| **Framework** | Next.js 14 (TypeScript) |\n| **Backend/DB** | \u003cImplied: Data source for posts, e.g., MongoDB/Appwrite\u003e |\n| **Styling** | Tailwind CSS |\n| **Auth** | Clerk / Custom Auth (Implied Social Login) |\n| **AI/Services** | Image Optimization (Cloudinary/Next Image), Advanced CSS Grid/Flexbox |\n\n### ⚙️ Key Architectural Decisions\n\n1.  **Next.js (API Routes/Security):** Used to manage secure data endpoints and enforce access control logic (authentication/authorization) for user-generated content.\n2.  **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.\n3.  **Clerk/Auth:** Utilized to delegate the critical security layer of authentication, ensuring development focus remained on the complex social logic.\n\n---\n\n## **T-SHAPE SUPERPOWERS \u0026 EXECUTION CHALLENGES**\n\n### 🧠 Strategic Challenges Overcome\n\n*   **Challenge 1:** Achieving **efficient grid layouts** that are fully responsive and adapt gracefully to varying screen sizes and content densities.\n*   **Solution 1:** Masterful application of advanced CSS (Grid/Flexbox) combined with Tailwind responsiveness utility.\n*   **Challenge 2:** Managing the **loading state and lazy loading** of images to avoid performance bottlenecks in the main feed.\n*   **Solution 2:** Strategic use of lazy loading and placeholders for images not currently in the viewport.\n\n### 💻 Local Setup (Quick Start)\n\n```bash\n# 1. Clone the repository\ngit clone https://github.com/saulkurosaki/DRIBBBLE-CLONE-PROJECT\n\n# 2. Change directory\ncd DRIBBBLE-CLONE-PROJECT\n\n# 3. Install dependencies\nnpm install\n\n# 4. Configure variables de entorno\n# Create a .env.local file and add the necessary keys for Auth (Clerk) and Database access.\n\n# 5. Start Development Server\nnpm run dev\n```\n----\n\n![alt text](\u003c1-Flexibble - Google Chrome 20_02_2024 03_55_20 p. m..png\u003e)\n![alt text](\u003c2-Flexibble - Google Chrome 20_02_2024 03_55_47 p. m..png\u003e)\n![alt text](\u003c3-Flexibble - Google Chrome 20_02_2024 03_55_47 p. m..png\u003e)\n![alt text](\u003c4-Flexibble - Google Chrome 20_02_2024 03_59_09 p. m..png\u003e)\n![alt text](\u003c5-Flexibble - Google Chrome 20_02_2024 03_59_29 p. m..png\u003e)\n![alt text](\u003c6-Flexibble - Google Chrome 20_02_2024 03_59_38 p. m..png\u003e)\n![alt text](\u003c7-Flexibble - Google Chrome 20_02_2024 03_59_45 p. m..png\u003e)\n![alt text](\u003c8-Flexibble - Google Chrome 20_02_2024 03_59_57 p. m..png\u003e)\n![alt text](\u003c9-Flexibble - Google Chrome 20_02_2024 04_00_02 p. m..png\u003e)\n![alt text](\u003c10-Flexibble - Google Chrome 20_02_2024 04_00_15 p. m..png\u003e)\n![alt text](\u003c11-Flexibble - Google Chrome 20_02_2024 04_00_21 p. m..png\u003e)\n![alt text](\u003c12-Flexibble - Google Chrome 20_02_2024 04_00_35 p. m..png\u003e)\n![alt text](\u003c13-Flexibble - Google Chrome 20_02_2024 04_00_40 p. m..png\u003e)\n![alt text](\u003c14-Flexibble - Google Chrome 20_02_2024 04_00_51 p. m..png\u003e)\n![alt text](\u003c15-Flexibble - Google Chrome 20_02_2024 04_01_08 p. m..png\u003e)\n![alt text](\u003c16-Flexibble - Google Chrome 20_02_2024 04_01_18 p. m..png\u003e)\n![alt text](\u003c17-Flexibble - Google Chrome 20_02_2024 04_01_25 p. m..png\u003e)\n![alt text](\u003c18-Flexibble - Google Chrome 20_02_2024 04_01_36 p. m..png\u003e)\n![alt text](\u003c19-Flexibble - Google Chrome 20_02_2024 04_01_41 p. m..png\u003e)\n![alt text](\u003c20-Flexibble - Google Chrome 20_02_2024 04_01_45 p. m..png\u003e)\n![alt text](\u003c21-Flexibble - Google Chrome 20_02_2024 04_01_55 p. m..png\u003e)\n![alt text](\u003c22-Flexibble - Google Chrome 20_02_2024 04_02_09 p. m..png\u003e)\n![alt text](\u003c23-Flexibble - Google Chrome 20_02_2024 04_02_17 p. m..png\u003e)\n![alt text](\u003c24-Flexibble - Google Chrome 20_02_2024 04_02_32 p. m..png\u003e)\n![alt text](\u003c25-Flexibble - Google Chrome 20_02_2024 04_02_54 p. m..png\u003e)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaulkurosaki%2Fdribbble-clone-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaulkurosaki%2Fdribbble-clone-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaulkurosaki%2Fdribbble-clone-project/lists"}