{"id":24233995,"url":"https://github.com/dkhoa-happy/petproject_dkhoa","last_synced_at":"2025-10-24T11:51:22.723Z","repository":{"id":271482245,"uuid":"913077693","full_name":"Dkhoa-Happy/petProject_dkhoa","owner":"Dkhoa-Happy","description":"Blog Management For Admin","archived":false,"fork":false,"pushed_at":"2025-02-13T04:26:23.000Z","size":1095,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-13T05:25:10.509Z","etag":null,"topics":["nextjs15","react-query","react19","rest-api"],"latest_commit_sha":null,"homepage":"","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/Dkhoa-Happy.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":"2025-01-07T01:44:20.000Z","updated_at":"2025-02-05T02:35:52.000Z","dependencies_parsed_at":"2025-02-03T03:18:47.412Z","dependency_job_id":"9123ad92-d800-4e76-8842-2722ca5ee0a6","html_url":"https://github.com/Dkhoa-Happy/petProject_dkhoa","commit_stats":null,"previous_names":["dkhoa-happy/petproject_dkhoa"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dkhoa-Happy%2FpetProject_dkhoa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dkhoa-Happy%2FpetProject_dkhoa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dkhoa-Happy%2FpetProject_dkhoa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dkhoa-Happy%2FpetProject_dkhoa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dkhoa-Happy","download_url":"https://codeload.github.com/Dkhoa-Happy/petProject_dkhoa/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241859293,"owners_count":20032313,"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":["nextjs15","react-query","react19","rest-api"],"created_at":"2025-01-14T16:46:20.129Z","updated_at":"2025-10-24T11:51:22.659Z","avatar_url":"https://github.com/Dkhoa-Happy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cbr /\u003e\n    \u003ca href=\"https://petproject-deploy-v3-1s3rb69zy-dang-khoas-projects-444bf235.vercel.app/\" target=\"_blank\"\u003e\n      \u003cimg src=\"https://firebasestorage.googleapis.com/v0/b/movie-management-c2908.appspot.com/o/%E1%BA%A2nh%20ch%E1%BB%A5p%20m%C3%A0n%20h%C3%ACnh%202025-02-05%20093305.png?alt=media\u0026token=386cc520-8f2f-4018-a646-db398d30d030\" alt=\"Project Banner\"\u003e\n    \u003c/a\u003e\n  \u003cbr /\u003e\n\n  \u003cdiv\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Typescript-black?style=for-the-badge\u0026logoColor=white\u0026logo=react\u0026color=3178C6\" alt=\"typescript\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Next_JS-black?style=for-the-badge\u0026logoColor=white\u0026logo=nextdotjs\u0026color=000000\" alt=\"nextdotjs\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Tailwind_CSS-black?style=for-the-badge\u0026logoColor=white\u0026logo=tailwindcss\u0026color=06B6D4\" alt=\"tailwindcss\" /\u003e\n\n  \u003c/div\u003e\n\n\u003ch3 align=\"center\"\u003ePost \u0026 User Manager Platform\u003c/h3\u003e\n\n   \n\u003c/div\u003e\n\n## 📋 \u003ca name=\"table\"\u003eTable of Contents\u003c/a\u003e\n\n1. 🤖 [Introduction](#introduction)\n2. ⚙️ [Tech Stack](#tech-stack)\n3. 🔋 [Features](#features)\n4. 🤸 [Quick Start](#quick-start)\n5. 🕸️ [Snippets (Code to Copy)](#snippets)\n6. 🔗 [Assets](#links)\n7. 🚀 [Web Link To View](#web)\n\n\n\n## \u003ca name=\"introduction\"\u003e🤖 Introduction\u003c/a\u003e\n\nIn today’s digital age, your online presence is more crucial than ever. Whether you're a seasoned blogger, an emerging influencer, or a business aiming to amplify your brand voice, we are here to simplify and elevate your blogging experience. Our platform is designed to be your all-in-one solution, ensuring that managing your website and blog is not only efficient but also enjoyable.\n\n\n## \u003ca name=\"tech-stack\"\u003e⚙️ Tech Stack\u003c/a\u003e\n\n- React 19\n- Next.js 15\n- TailwindCSS\n- ShadCN\n- TypeScript\n\n## \u003ca name=\"features\"\u003e🔋 Features\u003c/a\u003e\n\n👉 **Live Content API**: Displays the latest post ideas dynamically on the homepage using GoRest API.\n\n👉 **Post Submission**: Admin can submit post ideas, including title, body, user_id, and multimedia links (image).\n\n👉 **Post Details Page**: Click on any post to view its details, with title and body displayed.\n\n👉 **All User Page**: Admin can view the list of users and view their post invidually.\n\n👉 **Editor Post**: Admins can highlight top post ideas.\n\n👉 **Search**: Search functionality to load and view post efficiently.\n\n👉 **Minimalistic Design**: Fresh and simple UI with only the essential pages for ease of use and a clean aesthetic.\n\nand many more, including the latest **React 19**, **Next.js 15** features alongside code architecture and\nreusability\n\n## \u003ca name=\"quick-start\"\u003e🤸 Quick Start\u003c/a\u003e\n\nFollow these steps to set up the project locally on your machine.\n\n**Prerequisites**\n\nMake sure you have the following installed on your machine:\n\n- [Git](https://git-scm.com/)\n- [Node.js](https://nodejs.org/en)\n- [npm](https://www.npmjs.com/) (Node Package Manager)\n\n**Cloning the Repository**\n\n```bash\ngit clone https://github.com/Dkhoa-Happy/post.git\ncd post\n```\n\n**Installation**\n\nInstall the project dependencies using npm:\n\n```bash\nnpm install\n```\n\n**Running the Project**\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) in your browser to view the project.\n\n## \u003ca name=\"snippets\"\u003e🕸️ Snippets\u003c/a\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003etailwind.config.ts\u003c/code\u003e\u003c/summary\u003e\n\n```typescript\nimport type { Config } from \"tailwindcss\";\n\nconst config: Config = {\n  darkMode: [\"class\"],\n  content: [\n    \"./pages/**/*.{js,ts,jsx,tsx,mdx}\",\n    \"./components/**/*.{js,ts,jsx,tsx,mdx}\",\n    \"./app/**/*.{js,ts,jsx,tsx,mdx}\",\n    \"./sanity/**/*.{js,ts,jsx,tsx,mdx}\",\n  ],\n  theme: {\n    extend: {\n      screens: {\n        xs: \"475px\",\n      },\n      colors: {\n        primary: {\n          \"100\": \"#8af2ff\",\n          DEFAULT: \"#46A5CE\",\n        },\n        secondary: \"#FBE843\",\n        black: {\n          \"100\": \"#333333\",\n          \"200\": \"#141413\",\n          \"300\": \"#7D8087\",\n          DEFAULT: \"#000000\",\n        },\n        white: {\n          \"100\": \"#F7F7F7\",\n          DEFAULT: \"#FFFFFF\",\n        },\n        light: {\n          \"100\": \"#333F4E\",\n          \"200\": \"#A3B2C7\",\n          \"300\": \"#F2F5F9\",\n          \"400\": \"#F2F4F8\",\n        },\n      },\n      fontFamily: {\n        \"work-sans\": [\"var(--font-work-sans)\"],\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n      boxShadow: {\n        100: \"2px 2px 0px 0px rgb(0, 0, 0)\",\n        200: \"2px 2px 0px 2px rgb(0, 0, 0)\",\n        300: \"2px 2px 0px 2px rgb(70, 165, 206)\",\n      },\n    },\n  },\n  plugins: [require(\"tailwindcss-animate\"), require(\"@tailwindcss/typography\")],\n};\n\nexport default config;\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003eglobals.css\u003c/code\u003e\u003c/summary\u003e\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900\u0026display=swap\");\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --radius: 0.5rem;\n  }\n}\n\n@layer utilities {\n  .c-space {\n    @apply sm:px-10 px-5;\n  }\n\n  .flex-between {\n    @apply flex justify-between items-center;\n  }\n\n  .text-30-extrabold {\n    @apply text-[20px] font-extrabold text-white;\n  }\n\n  .text-30-bold {\n    @apply text-[30px] font-bold text-black;\n  }\n\n  .text-30-semibold {\n    @apply font-semibold text-[30px] text-black;\n  }\n\n  .text-26-semibold {\n    @apply font-semibold text-[26px] text-black;\n  }\n\n  .text-24-black {\n    @apply text-[20px] font-black text-black;\n  }\n\n  .text-20-medium {\n    @apply font-medium text-[20px] text-black;\n  }\n\n  .text-16-medium {\n    @apply font-medium text-[16px] text-black;\n  }\n\n  .text-14-normal {\n    @apply font-normal text-sm text-white-100/80;\n  }\n\n  .blue_container {\n    @apply w-full bg-primary min-h-[530px] pattern flex justify-center items-center flex-col py-10 px-6;\n  }\n\n  .tag {\n    @apply bg-secondary px-6 py-3 font-work-sans font-bold rounded-sm uppercase relative tag-tri;\n  }\n\n  .heading {\n    @apply uppercase bg-black px-6 py-3 font-work-sans font-extrabold text-white sm:text-[54px] sm:leading-[64px] text-[36px] leading-[46px] max-w-5xl text-center my-5;\n  }\n\n  .sub-heading {\n    @apply font-medium text-[20px] text-white max-w-2xl text-center break-words;\n  }\n\n  .section_container {\n    @apply px-6 py-10 max-w-7xl mx-auto;\n  }\n\n  .card_grid {\n    @apply grid md:grid-cols-3 sm:grid-cols-2 gap-5;\n  }\n\n  .card_grid-sm {\n    @apply grid sm:grid-cols-2 gap-5;\n  }\n\n  .no-result {\n    @apply text-black-100 text-sm font-normal;\n  }\n\n  /* profile */\n  .profile_container {\n    @apply w-full pb-10 pt-20 px-6 max-w-7xl mx-auto lg:flex-row flex-col flex gap-10;\n  }\n\n  .profile_card {\n    @apply w-96 px-6 pb-6 pt-20 flex flex-col justify-center items-center bg-primary border-[5px] border-black shadow-100 rounded-[30px] relative z-0 h-fit max-lg:w-full;\n  }\n\n  .profile_title {\n    @apply w-11/12 bg-white border-[5px] border-black rounded-[20px] px-5 py-3 absolute -top-9 after:absolute after:content-[''] after:-top-1 after:right-0 after:-skew-y-6 after:bg-black after:-z-[1] after:rounded-[20px] after:w-full after:h-[60px] before:absolute before:content-[''] before:-bottom-1 before:left-0  before:-skew-y-6 before:w-full before:h-[60px] before:bg-black  before:-z-[1] before:rounded-[20px] shadow-100;\n  }\n\n  .profile_image {\n    @apply rounded-full object-cover border-[3px] border-black;\n  }\n\n  /* idea details */\n  .divider {\n    @apply border-dotted bg-zinc-400 max-w-4xl my-10 mx-auto;\n  }\n\n  .view_skeleton {\n    @apply bg-zinc-400 h-10 w-24 rounded-lg fixed bottom-3 right-3;\n  }\n\n  /* navbar */\n  .avatar {\n    @apply p-0 focus-visible:ring-0 bg-none rounded-full drop-shadow-md !important;\n  }\n\n  .dropdown-menu {\n    @apply w-56 border-[5px] border-black bg-white p-5 rounded-2xl !important;\n  }\n\n  .button {\n    @apply text-[14px] leading-[20px] font-medium;\n  }\n\n\n\n  /* searchform */\n  .search-form {\n    @apply max-w-3xl w-full min-h-[80px] bg-white border-[5px] border-black rounded-[80px] text-[24px] mt-8 px-5 flex flex-row items-center gap-5;\n  }\n\n  .search-input {\n    @apply flex-1 font-bold placeholder:font-semibold placeholder:text-black-100 w-full h-auto outline-none;\n  }\n\n  .search-btn {\n    @apply size-[50px] rounded-full bg-black flex justify-center items-center !important;\n  }\n\n  /* User Table */\n  .user-table {\n    @apply bg-white border-[5px] border-black py-6 px-5 rounded-[22px] shadow-200  transition-all duration-500;\n  }\n\n  .primary-btn {\n    @apply bg-blue-400 hover:bg-blue-500 transition-all rounded-full button !important;\n  }\n\n  /* Post Card */\n  .post {\n    @apply bg-white border-[5px] border-black py-6 px-5 rounded-[22px] shadow-200 hover:border-primary transition-all duration-500 hover:shadow-300 hover:bg-primary-100;\n  }\n\n  .post_date {\n    @apply font-medium text-[16px] bg-primary-100 px-4 py-2 rounded-full group-hover:bg-white-100;\n  }\n\n  .post_desc {\n    @apply font-normal text-[16px] line-clamp-2 my-3 text-black-100 break-all;\n  }\n\n  .post_img {\n    @apply w-full h-[164px] rounded-[10px] object-cover;\n  }\n\n  .post_btn {\n    @apply rounded-full bg-black-200 font-medium text-[16px] text-white px-5 py-3 !important;\n  }\n\n  .post_skeleton {\n    @apply w-full h-96 rounded-[22px] bg-zinc-400;\n  }\n\n  /* postform */\n  .post-form {\n    @apply max-w-2xl mx-auto bg-white my-10 space-y-8 px-6;\n  }\n\n  .post-form_label {\n    @apply font-bold text-[18px] text-black uppercase;\n  }\n\n  .post-form_input {\n    @apply border-[3px] border-black px-5 py-7 text-[18px] text-black font-semibold rounded-full mt-3 placeholder:text-black-300 !important;\n  }\n\n  .post-form_textarea {\n    @apply border-[3px] border-black p-5 text-[18px] text-black font-semibold rounded-[20px] mt-3 placeholder:text-black-300 !important;\n  }\n\n  .post-form_error {\n    @apply text-red-500 mt-2 ml-5;\n  }\n\n  .post-form_editor {\n    @apply mt-3 border-[3px] border-black text-[18px] text-black font-semibold placeholder:text-black-300 !important;\n  }\n\n  .post-form_btn {\n    @apply bg-primary border-[4px] border-black rounded-full p-5 min-h-[70px] w-full font-bold text-[18px] !important;\n  }\n\n  /* view */\n  .view-container {\n    @apply flex justify-end items-center mt-5 fixed bottom-3 right-3;\n  }\n\n  .view-text {\n    @apply font-medium text-[16px] bg-primary-100 px-4 py-2 rounded-lg capitalize;\n  }\n\n  .category-tag {\n    @apply font-medium text-[16px] bg-primary-100 px-4 py-2 rounded-full;\n  }\n\n  .pattern {\n    background-image: linear-gradient(\n      to right,\n      transparent 49.5%,\n      rgba(251, 232, 67, 0.2) 49.5%,\n      rgba(251, 232, 67, 0.6) 50.5%,\n      transparent 50.5%\n    );\n    background-size: 5% 100%;\n    background-position: center;\n    background-repeat: repeat-x;\n  }\n\n  .tag-tri {\n    @apply before:content-[''] before:absolute before:top-2 before:left-2 before:border-t-[10px] before:border-t-black before:border-r-[10px] before:border-r-transparent after:content-[''] after:absolute after:bottom-2 after:right-2 after:border-b-[10px] after:border-b-black after:border-l-[10px] after:border-l-transparent;\n  }\n}\n\n.w-md-editor-toolbar {\n  padding: 10px !important;\n}\n\n/* =====  SHADCN OVERRIDES */\n.shad-no-focus {\n  @apply outline-none ring-offset-transparent focus:ring-transparent focus:ring-offset-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 !important;\n}\n\n.shad-dropdown-item {\n  @apply cursor-pointer !important;\n}\n\n.shad-dialog button {\n  @apply focus:ring-0 focus:ring-offset-0 focus-visible:border-none outline-none focus-visible:outline-none focus-visible:ring-transparent focus-visible:ring-offset-0 !important;\n}\n\n.delete-confirmation {\n  @apply text-center text-light-100 !important;\n}\n\n.modal-cancel-button {\n  @apply h-[52px] flex-1 rounded-full bg-white text-light-100 hover:bg-transparent !important;\n}\n.modal-submit-button {\n  @apply primary-btn !mx-0 h-[52px] w-full flex-1 !important;\n}\n\n/*  footer */\n.social-icon {\n  @apply w-12 h-12 rounded-full flex justify-center items-center bg-black-300 border border-black-200;\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003elib/utils.ts\u003c/code\u003e\u003c/summary\u003e\n\n```typescript\nimport { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003elib/validation.ts\u003c/code\u003e\u003c/summary\u003e\n\n```typescript\nimport { z } from \"zod\";\n\nexport const formSchema = {\n  title: z.string().min(3).max(100),\n  body: z.string().min(20).max(500),\n};\n```\n\n\u003c/details\u003e\n\n## \u003ca name=\"web\"\u003e🚀 Web Link\u003c/a\u003e\n\n\u003ca href=\"https://petproject-deploy-v3-1s3rb69zy-dang-khoas-projects-444bf235.vercel.app/\" target=\"_blank\"\u003e\n      Link Website\n    \u003c/a\u003e\n\n\n\n\n## \u003ca name=\"links\"\u003e🔗 Assets\u003c/a\u003e\n\n- Fonts and Assets used in the project can be found [here](https://drive.google.com/drive/folders/1kmjb4N_-WSai1zWL_KqewEorkPRi5UK4?usp=sharing)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdkhoa-happy%2Fpetproject_dkhoa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdkhoa-happy%2Fpetproject_dkhoa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdkhoa-happy%2Fpetproject_dkhoa/lists"}