{"id":29013194,"url":"https://github.com/sanyashresta25/order-summary","last_synced_at":"2026-05-04T22:42:58.929Z","repository":{"id":299570310,"uuid":"1003447440","full_name":"SanyaShresta25/Order-Summary","owner":"SanyaShresta25","description":"A responsive and elegant Order Summary card built with React, TypeScript, and Tailwind CSS. Clean UI, SVG wave background, and mobile-first design.","archived":false,"fork":false,"pushed_at":"2025-06-17T07:05:54.000Z","size":121,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-17T08:18:51.698Z","etag":null,"topics":["props","react-tsx","tailwind-css","vite"],"latest_commit_sha":null,"homepage":"https://order-summary-snowy.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/SanyaShresta25.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,"zenodo":null}},"created_at":"2025-06-17T06:58:39.000Z","updated_at":"2025-06-17T07:05:57.000Z","dependencies_parsed_at":"2025-06-17T08:18:53.607Z","dependency_job_id":"7fab399e-2a6a-497a-b1d6-b81be7868e5c","html_url":"https://github.com/SanyaShresta25/Order-Summary","commit_stats":null,"previous_names":["sanyashresta25/order-summary"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SanyaShresta25/Order-Summary","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SanyaShresta25%2FOrder-Summary","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SanyaShresta25%2FOrder-Summary/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SanyaShresta25%2FOrder-Summary/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SanyaShresta25%2FOrder-Summary/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SanyaShresta25","download_url":"https://codeload.github.com/SanyaShresta25/Order-Summary/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SanyaShresta25%2FOrder-Summary/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261937078,"owners_count":23232852,"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":["props","react-tsx","tailwind-css","vite"],"created_at":"2025-06-25T19:10:22.205Z","updated_at":"2026-05-04T22:42:58.877Z","avatar_url":"https://github.com/SanyaShresta25.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 💳 Order Summary Card\n\n  A clean and elegant order summary card built with **React + TypeScript** and **Tailwind CSS**. This component is fully responsive and uses modern styling practices to deliver a smooth UI experience.\n\n  ## 🚀 Live Demo\n\n  - 🌐 **Live Site URL**: [View it in action](https://order-summary-snowy.vercel.app/)\n  - 💻 **Solution URL**: [See the code](https://github.com/SanyaShresta25/Order-Summary)\n\n  ## 📸 Screenshot\n\n  ![Order Summary Screenshot](./screenshot.png)\n\n  ## 🧱 Built With\n\n  - ⚛️ **React** (with TypeScript) – Functional components and prop-driven design\n  - 🎨 **Tailwind CSS** – Utility-first styling with responsive design baked in\n  - 📱 Mobile-first responsive design approach\n\n  ## ✨ Features\n\n  - 🖼️ Hero image at the top\n  - 📋 Order summary with plan details\n  - 🔄 “Change Plan” functionality placeholder\n  - ✅ Responsive layout for mobile \u0026 desktop\n  - 🎵 Music icon and custom background wave pattern\n\n  ## 🧠 What I Learned\n\n  - How to create **reusable functional components** in React using props\n  - Using **inline SVGs as background images** with Tailwind styling\n  - Implementing **mobile-first responsive UI** with Tailwind's utility classes\n  - Structuring code in a clean, maintainable format with clear comments\n\n  ## 🔧 How to Use\n\n  ```bash\n  # Clone the repo\n  git clone https://github.com/SanyaShresta25/my-app.git\n  cd my-app\n\n  # Install dependencies\n  npm install\n\n  # Run the app\n  npm run dev\n  ```\n\n  ## 🔄 Future Enhancements\n\n  - Add support for multiple pricing plans\n  - Animate card transitions (e.g., when selecting a plan)\n  - Improve accessibility (ARIA roles, keyboard navigation)\n\n  ## 📚 Useful Resources\n\n  - [Tailwind CSS Docs](https://tailwindcss.com/docs)\n  - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/)\n  - [MDN Web Docs: Using data URIs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)\n\n  ## 👩‍💻 Author\n\n  - **Portfolio** – [Sanya Shresta Jathanna](https://sanyashresta.netlify.app/)\n  - **GitHub** – [@SanyaShresta25](https://github.com/SanyaShresta25)\n  - **Frontend Mentor** – [@SanyaShresta25](https://www.frontendmentor.io/profile/SanyaShresta25)\n\n  ## 🙏 Acknowledgments\n\n  - Inspired by [Frontend Mentor – Order Summary Card Challenge](https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj)\n  - Shoutout to the dev community for Tailwind tips and best practices!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanyashresta25%2Forder-summary","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsanyashresta25%2Forder-summary","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanyashresta25%2Forder-summary/lists"}