{"id":15131592,"url":"https://github.com/arnobt78/SkinCare-Salon--NextJS-Frontend","last_synced_at":"2025-08-19T23:30:42.303Z","repository":{"id":256864805,"uuid":"856659769","full_name":"arnobt78/SkinCare-Salon-NextJS-Website","owner":"arnobt78","description":"SkinCare-Salon is a NextJS 14 Static Frontend Website, using React.js, Typescript, TailwindCSS, Framer-Motion, Tailwind-Merge, tailwindCSS-Animate, Lucide-React, React-Icons, React-Player, React-Reponsive features and deployed on Vercel.","archived":false,"fork":false,"pushed_at":"2024-09-16T13:11:55.000Z","size":874,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-31T12:46:32.069Z","etag":null,"topics":["lucide-react","nextjs","nextjs14","react-components","react-icons","react-player","react-responsive","react-router","reactjs","skincare-app","skincare-salon","typescript","typescript-react","vercel-deployment"],"latest_commit_sha":null,"homepage":"https://skincare-salon-arnob.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/arnobt78.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-09-13T01:01:13.000Z","updated_at":"2024-09-16T13:11:58.000Z","dependencies_parsed_at":"2024-09-13T13:49:39.574Z","dependency_job_id":"3da6271d-65ff-4311-ab3a-6b975bbd3256","html_url":"https://github.com/arnobt78/SkinCare-Salon-NextJS-Website","commit_stats":null,"previous_names":["arnobt78/skincare-salon-nextjs-website"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FSkinCare-Salon-NextJS-Website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FSkinCare-Salon-NextJS-Website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FSkinCare-Salon-NextJS-Website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FSkinCare-Salon-NextJS-Website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/SkinCare-Salon-NextJS-Website/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230374294,"owners_count":18216043,"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":["lucide-react","nextjs","nextjs14","react-components","react-icons","react-player","react-responsive","react-router","reactjs","skincare-app","skincare-salon","typescript","typescript-react","vercel-deployment"],"created_at":"2024-09-26T04:00:29.835Z","updated_at":"2025-08-19T23:30:42.289Z","avatar_url":"https://github.com/arnobt78.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Skin Care Salon - Next.js TailwindCSS Fundamental Project 6\n\n![Screenshot 2024-09-13 at 02 50 01](https://github.com/user-attachments/assets/3c23bd2d-bf2e-4d09-b991-2b451177739e) ![Screenshot 2024-09-13 at 02 50 26](https://github.com/user-attachments/assets/abee4693-f5c8-4669-9dad-0a6689a1a9b4) ![Screenshot 2024-09-13 at 02 50 49](https://github.com/user-attachments/assets/e9644d1f-550d-4bf4-a3da-fb07d912b346) ![Screenshot 2024-09-13 at 02 51 07](https://github.com/user-attachments/assets/55b85241-46ad-4811-a2cb-7d98f3619e23) ![Screenshot 2024-09-13 at 02 51 35](https://github.com/user-attachments/assets/3dc4604b-0e02-472f-be9a-a95de5f3254f)\n\n---\n\n## Project Summary\n\n**SkinCare-Salon** is a modern, responsive, and animated frontend website built with Next.js 14, React, and TypeScript. The project simulates a skin care salon's online presence, featuring sleek design, smooth transitions, and a modular component structure. The goal is to demonstrate how to build a professional landing site using the latest web technologies, with a strong focus on TailwindCSS, Framer Motion for animations, and Shadcn-UI for UI components.\n\n- **Live Demo:** [https://skincare-salon-arnob.vercel.app/](https://skincare-salon-arnob.vercel.app/)\n\n---\n\n## Table of Contents\n\n- [Project Summary](#project-summary)\n- [Tech Stack \u0026 Key Dependencies](#tech-stack--key-dependencies)\n- [Project Structure](#project-structure)\n- [Features and Functionalities](#features-and-functionalities)\n- [How to Run the Project](#how-to-run-the-project)\n- [Installing NodeJS](#installing-nodejs)\n- [Component \u0026 Page Walkthrough](#component--page-walkthrough)\n- [API, Routes \u0026 Navigation](#api-routes--navigation)\n- [Learning \u0026 Teaching Resources](#learning--teaching-resources)\n- [Deployment](#deployment)\n- [Keywords](#keywords)\n- [Examples \u0026 Scripts](#examples--scripts)\n- [Conclusion](#conclusion)\n\n---\n\n## Tech Stack \u0026 Key Dependencies\n\n- **Framework:** Next.js 14 (React, SSR/SSG Hybrid)\n- **Language:** TypeScript\n- **Styling:** TailwindCSS, tailwindcss-animate\n- **Animation:** Framer Motion\n- **UI Components:** Shadcn-UI, Dialog (modal)\n- **Icons:** Lucide-React, React-Icons\n- **Media:** React-Player\n- **UX:** React-Responsive, React-CountUp\n\n**Install Key Packages:**\n```bash\nnpm i framer-motion react-icons react-player react-responsive react-countup\nnpx shadcn-ui@latest init\nnpx shadcn-ui@latest add dialog\n```\n\n---\n\n## Project Structure\n\nA typical Next.js 14 project structure is as follows:\n\n```\nSkinCare-Salon--TailwindCSS-Fundamental-Project-6/\n├── app/\n│   ├── page.tsx\n│   ├── layout.tsx\n│   ├── [other pages].tsx\n├── components/\n│   ├── [UI components].tsx\n├── public/\n│   ├── images/\n├── styles/\n│   ├── globals.css\n├── package.json\n├── tailwind.config.js\n├── tsconfig.json\n├── README.md\n└── ...\n```\n\n- **app/**: Next.js 14 app directory with pages and layouts.\n- **components/**: Reusable UI components like Navbar, Footer, ServiceCard, etc.\n- **public/**: Static assets such as images and icons.\n- **styles/**: Global and component-specific styles.\n- **package.json**: Project dependencies and scripts.\n- **tailwind.config.js**: TailwindCSS customizations.\n\n---\n\n## Features and Functionalities\n\n- **Responsive Design:** Fully mobile-friendly layout using TailwindCSS utility classes.\n- **Animated Transitions:** Smooth entrance/exit effects via Framer Motion.\n- **UI Library Integration:** Shadcn-UI for accessible, reusable components (e.g., dialogs/modals).\n- **Rich Media Support:** Video playback with React-Player.\n- **Dynamic Stats:** Animated counters via React-CountUp.\n- **Iconography:** Modern icon sets (Lucide, React-Icons).\n- **SEO-Friendly:** SSR \u0026 SSG by Next.js for fast load and optimized search indexing.\n- **Developer Friendly:** TypeScript, modular file structure, and hot reloading.\n- **Deployment Ready:** Easily deployed to Vercel or any Node.js environment.\n\n---\n\n## How to Run the Project\n\n### 1. Install Dependencies\n\nBefore running, install all required dependencies as listed in `package.json`:\n\n```bash\nnpm install\n```\n\n### 2. Start Development Server\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) in your browser.\n\n### 3. Edit Pages\n\nStart editing by modifying `app/page.tsx`. The site auto-updates as you save files.\n\n---\n\n## Installing NodeJS\n\nEnsure NodeJS is installed on your machine.  \n[NodeJS Download \u0026 Installation Guide](https://nodejs.org/en/)\n\n---\n\n## Component \u0026 Page Walkthrough\n\n- **Homepage (`app/page.tsx`):**  \n  Landing page with hero section, services overview, call-to-action buttons, and animated stats.\n- **Service Cards (`components/ServiceCard.tsx`):**  \n  Card components for each service, animated on scroll.\n- **Modal Dialog (`components/Dialog.tsx`):**  \n  Shadcn-UI modal for booking or more info.\n- **Navigation Bar \u0026 Footer:**  \n  Consistent layout across pages.\n- **Gallery/Media Section:**  \n  Showcases salon images, video player, and testimonials.\n- **Contact/Booking:**  \n  Simple contact form or booking modal.\n\n---\n\n## API, Routes \u0026 Navigation\n\n- **Static Routing:**  \n  Pages are statically generated under `app/` directory.\n- **Dynamic Components:**  \n  Some content (like counters, modals) is dynamic using React's state/hooks.\n- **No backend/API integration:**  \n  This project is frontend-only, ideal for portfolio or static deployment.\n\n---\n\n## Learning \u0026 Teaching Resources\n\n- [Next.js Documentation](https://nextjs.org/docs)\n- [Learn Next.js Interactive Tutorial](https://nextjs.org/learn)\n- [Shadcn-UI Docs](https://ui.shadcn.com/docs/installation/next)\n- [Framer Motion Docs](https://www.framer.com/motion/)\n- [YouTube Tutorial - Build Modern Next.js Website](https://www.youtube.com/watch?v=XhOAesfkVco)\n- [Other References](https://zenn.dev/msy/articles/e21e729eb0727d), [Reffect Guide for Shadcn-React](https://reffect.co.jp/react/shadcn-react#Slot)\n\n---\n\n## Deployment\n\nDeploy instantly with [Vercel](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app).\n\nMore on [Next.js deployment](https://nextjs.org/docs/deployment).\n\n---\n\n## Keywords\n\nNext.js, React, TypeScript, TailwindCSS, Framer Motion, Shadcn-UI, Dialog, Lucide-React, React-Icons, React-Player, Responsive Design, Animation, Modern Web, Static Website, Portfolio, UI/UX.\n\n---\n\n## Examples \u0026 Scripts\n\n**Run locally:**\n```bash\nnpm install\nnpm run dev\n```\n\n**Install extra packages:**\n```bash\nnpm i framer-motion react-icons react-player react-responsive react-countup\nnpx shadcn-ui@latest init\nnpx shadcn-ui@latest add dialog\n```\n\n**Edit page:**\n```tsx\n// app/page.tsx\nexport default function HomePage() {\n  return (\n    \u003cmain\u003e\n      \u003cHeroSection /\u003e\n      \u003cServices /\u003e\n      \u003cGallery /\u003e\n      \u003cContactForm /\u003e\n    \u003c/main\u003e\n  );\n}\n```\n\n---\n\n## Conclusion\n\nSkinCare-Salon is a modern, animated, and fully responsive frontend project, ideal for learning Next.js, TailwindCSS, and modern React UI practices.  \nClone, explore, and adapt it for your own business, portfolio, or learning needs.\n\n---\n\n## Happy Coding! 🎉  \nThank you for visiting and learning!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2FSkinCare-Salon--NextJS-Frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2FSkinCare-Salon--NextJS-Frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2FSkinCare-Salon--NextJS-Frontend/lists"}