{"id":28151727,"url":"https://github.com/codewithshabbir/webxv-agency-template","last_synced_at":"2026-05-09T16:10:44.523Z","repository":{"id":289641680,"uuid":"970733999","full_name":"codewithshabbir/WebXV-agency-template","owner":"codewithshabbir","description":null,"archived":false,"fork":false,"pushed_at":"2025-05-06T12:36:40.000Z","size":5984,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-06T13:47:50.798Z","etag":null,"topics":["agency","agency-tem","agency-theme","agency-website","agency-website-template","react","reactjs","reactjs-project","reactjs-template","reactjs-ui","website","website-design","website-template","website-theme"],"latest_commit_sha":null,"homepage":"https://web-xv-agency-template.vercel.app","language":"JavaScript","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/codewithshabbir.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-04-22T13:06:14.000Z","updated_at":"2025-05-06T12:38:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"1d320c61-8039-4557-873d-80dcbda269ad","html_url":"https://github.com/codewithshabbir/WebXV-agency-template","commit_stats":null,"previous_names":["codewithshabbir/webxv-agency-template"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithshabbir%2FWebXV-agency-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithshabbir%2FWebXV-agency-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithshabbir%2FWebXV-agency-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithshabbir%2FWebXV-agency-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codewithshabbir","download_url":"https://codeload.github.com/codewithshabbir/WebXV-agency-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254270662,"owners_count":22042863,"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":["agency","agency-tem","agency-theme","agency-website","agency-website-template","react","reactjs","reactjs-project","reactjs-template","reactjs-ui","website","website-design","website-template","website-theme"],"created_at":"2025-05-15T04:13:05.601Z","updated_at":"2025-10-28T23:15:04.471Z","avatar_url":"https://github.com/codewithshabbir.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ⚛️ Figma to React - Modern Web App UI\n\n![Figma to React](/public/webxvscreenshot.png)\n\nWelcome to **Figma to React**, a responsive and component-based web application developed using React.js and Tailwind CSS. This project is a complete conversion of a UI/UX design from Figma into a live, interactive frontend — built with scalability and modern design principles in mind.\n\n## 🚀 Live Demo\n\nCheck out the live version here: [Figma to React Demo](https://web-xv-agency-template.vercel.app/)\n\n*Note: Make sure to view it on both desktop and mobile devices for the best responsive experience.*\n\n---\n\n## 📂 Project Overview\n\nThis project showcases a modern React.js application that includes routing, reusable components, and clean folder organization. The UI is entirely based on a Figma design and implemented with attention to layout, responsiveness, and user experience.\n\n### 🔑 Key Features\n\n- 🔁 **React Router DOM** for client-side routing  \n- 💡 **Tailwind CSS** for utility-first, responsive design  \n- 📦 **Component-based architecture**  \n- 🎨 **React Icons** integration  \n- 📁 **Clean folder structure** with organized pages and components  \n- 📱 **Fully responsive design**  \n- 🎥 Figma to live conversion video included (UI → Code)\n\n---\n\n## 🛠️ Technologies Used\n\n### Languages\n- **JavaScript (ES6+)**\n- **JSX**\n\n### Libraries \u0026 Tools\n- ⚛️ **React.js**\n- 💨 **Tailwind CSS**\n- 🔁 **React Router DOM**\n- 🎨 **React Icons**\n- 🎯 **Figma (UI/UX Design)**\n\n---\n\n## 📁 Folder Structure\n\n```plaintext\nsrc/\n├── assets/               # Static assets like images\n├── components/           # Reusable components (Header, Footer, etc.)\n├── Login/\n│   ├── Login.jsx\n│   └── Register.jsx\n├── Pages/\n│   ├── AboutUs/\n│   ├── AllProjects/\n│   └── Community/\n│       └── Community.jsx\n├── App.jsx               # Root component\n├── MainLayout.jsx        # Layout wrapper with routing\n├── main.jsx              # App entry point\n├── App.css / index.css   # Stylesheets\n```\n\n---\n\n## 📦 Installation\n\nTo run this project locally:\n\n1. **Clone the repository**:\n   ```bash\n   git clone https://github.com/codewithshabbir/WebXV-agency-template\n   ```\n\n2. **Navigate to the project directory**:\n   ```bash\n   cd WebXV-agency-template\n   ```\n\n3. **Install dependencies**:\n   ```bash\n   npm install\n   ```\n\n4. **Run the development server**:\n   ```bash\n   npm run dev\n   ```\n\nThen, open your browser and visit `http://localhost:5173` (Vite default).\n\n---\n\n## 📸 Design to Code Showcase\n\nThis project includes a complete screen recording that shows:\n\n- ✅ Figma design preview  \n- ✅ Real-time web implementation  \n- ✅ Project folder structure walkthrough\n\nYou can watch it [here](https://web-xv-agency-template.vercel.app/)\n\n---\n\n## 📢 Hashtags\n\n#ReactJS #TailwindCSS #FigmaToReact #FrontendDevelopment #WebDevelopment  \n#ResponsiveDesign #ReactRouter #ReactIcons #ComponentBased #UIDesign  \n#WomenInTech #100DaysOfCode #OpenSource #GitHub #DevShowcase #WebApp\n\n---\n\n## 👨‍💻 Author\n\n- **Muhammad Shabbir**  \n  - [GitHub](https://github.com/codewithshabbir)  \n  - [LinkedIn](https://www.linkedin.com/in/codewithshabbir)  \n  - [CodePen](https://codepen.io/codewithshabbir)  \n  - [Instagram](https://www.instagram.com/codewithshabbir)  \n  - [Facebook](https://www.facebook.com/codewithshabbir)\n\n---\n\n## 📞 Contact\n\nFor any inquiries or feedback, feel free to reach out at:  \n- **Email**: [codewithshabbir@gmail.com](mailto:codewithshabbir@gmail.com)\n\n---\n\n## 📝 License\n\nThis project is open-source and available under the [MIT License](LICENSE).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithshabbir%2Fwebxv-agency-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodewithshabbir%2Fwebxv-agency-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithshabbir%2Fwebxv-agency-template/lists"}