https://github.com/codewithshabbir/webxv-agency-template
https://github.com/codewithshabbir/webxv-agency-template
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
Last synced: 9 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/codewithshabbir/webxv-agency-template
- Owner: codewithshabbir
- Created: 2025-04-22T13:06:14.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-05-06T12:36:40.000Z (17 days ago)
- Last Synced: 2025-05-06T13:47:50.798Z (17 days ago)
- 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
- Language: JavaScript
- Homepage: https://web-xv-agency-template.vercel.app
- Size: 5.71 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ⚛️ Figma to React - Modern Web App UI
Welcome 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.
## 🚀 Live Demo
Check out the live version here: [Figma to React Demo](https://web-xv-agency-template.vercel.app/)
*Note: Make sure to view it on both desktop and mobile devices for the best responsive experience.*
---
## 📂 Project Overview
This 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.
### 🔑 Key Features
- 🔁 **React Router DOM** for client-side routing
- 💡 **Tailwind CSS** for utility-first, responsive design
- 📦 **Component-based architecture**
- 🎨 **React Icons** integration
- 📁 **Clean folder structure** with organized pages and components
- 📱 **Fully responsive design**
- 🎥 Figma to live conversion video included (UI → Code)
---
## 🛠️ Technologies Used
### Languages
- **JavaScript (ES6+)**
- **JSX**
### Libraries & Tools
- ⚛️ **React.js**
- 💨 **Tailwind CSS**
- 🔁 **React Router DOM**
- 🎨 **React Icons**
- 🎯 **Figma (UI/UX Design)**
---
## 📁 Folder Structure
```plaintext
src/
├── assets/ # Static assets like images
├── components/ # Reusable components (Header, Footer, etc.)
├── Login/
│ ├── Login.jsx
│ └── Register.jsx
├── Pages/
│ ├── AboutUs/
│ ├── AllProjects/
│ └── Community/
│ └── Community.jsx
├── App.jsx # Root component
├── MainLayout.jsx # Layout wrapper with routing
├── main.jsx # App entry point
├── App.css / index.css # Stylesheets
```
---
## 📦 Installation
To run this project locally:
1. **Clone the repository**:
```bash
git clone https://github.com/codewithshabbir/WebXV-agency-template
```
2. **Navigate to the project directory**:
```bash
cd WebXV-agency-template
```
3. **Install dependencies**:
```bash
npm install
```
4. **Run the development server**:
```bash
npm run dev
```
Then, open your browser and visit `http://localhost:5173` (Vite default).
---
## 📸 Design to Code Showcase
This project includes a complete screen recording that shows:
- ✅ Figma design preview
- ✅ Real-time web implementation
- ✅ Project folder structure walkthrough
You can watch it [here](https://web-xv-agency-template.vercel.app/)
---
## 📢 Hashtags
#ReactJS #TailwindCSS #FigmaToReact #FrontendDevelopment #WebDevelopment
#ResponsiveDesign #ReactRouter #ReactIcons #ComponentBased #UIDesign
#WomenInTech #100DaysOfCode #OpenSource #GitHub #DevShowcase #WebApp
---
## 👨💻 Author
- **Muhammad Shabbir**
- [GitHub](https://github.com/codewithshabbir)
- [LinkedIn](https://www.linkedin.com/in/codewithshabbir)
- [CodePen](https://codepen.io/codewithshabbir)
- [Instagram](https://www.instagram.com/codewithshabbir)
- [Facebook](https://www.facebook.com/codewithshabbir)
---
## 📞 Contact
For any inquiries or feedback, feel free to reach out at:
- **Email**: [[email protected]](mailto:[email protected])
---
## 📝 License
This project is open-source and available under the [MIT License](LICENSE).