🛋️ Furniro – Furniture E-Commerce Website

Furniro is a modern and responsive furniture e-commerce website developed using React.js. The project is based on a UI/UX design created in Figma and focuses on translating a clean, modern design into a functional and responsive web interface.

The project was developed to practice React component-based development, responsive layouts, Bootstrap, CSS styling, navigation, and modern frontend development techniques.

---

🎨 UI/UX Design

The complete UI/UX concept for Furniro was designed in Figma before development.

The design focuses on:

• Modern and clean furniture-focused interface
• User-friendly navigation
• Consistent typography and spacing
• Attractive product presentation
• Responsive layouts
• Clean and minimal visual design

Design Tool: Figma

---

✨ Features

• 🏠 Modern homepage
• 🛋️ Furniture product sections
• 🖼️ Product image presentation
• 🧩 Reusable React components
• 🧭 Page navigation using React Router
• 📱 Responsive design
• 💻 Desktop, tablet, and mobile layouts
• 🎨 Figma-based UI implementation
• 📐 Bootstrap-based responsive layout
• ✨ Clean and modern user interface
• 📦 Organized React project structure

---

🛠️ Technologies Used

Frontend

• React.js
• JavaScript (ES6+)
• HTML5
• CSS3

UI & Styling

• Bootstrap
• Responsive CSS

Design

• Figma

Development Tools

• Vite
• Visual Studio Code
• Git
• GitHub

---

📁 Project Structure

Furniro/
│
├── public/
│
├── src/
│   ├── assets/
│   ├── components/
│   ├── pages/
│   ├── App.jsx
│   └── main.jsx
│
├── .gitignore
├── README.md
├── index.html
├── package.json
├── package-lock.json
└── vite.config.js

---

🚀 Installation & Setup

1. Clone the repository

git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY.git

2. Navigate to the project directory

cd Furniro

3. Install dependencies

npm install

4. Start the development server

npm run dev

The project will start on the local development server provided by Vite.

---

📱 Responsive Design

Furniro is designed to provide a responsive experience across different screen sizes, including:

• 💻 Desktop
• 📱 Mobile
• 📲 Tablet

Bootstrap and responsive CSS techniques are used to adapt the layout to different devices.

---

🎯 Project Goals

The main goals of this project were to:

• Convert a Figma UI/UX design into a functional React website
• Practice React component-based development
• Create reusable components
• Implement responsive layouts
• Practice Bootstrap integration
• Improve frontend development skills
• Develop a modern furniture e-commerce interface
• Learn Git and GitHub project management

---

🔮 Future Improvements

The project can be further enhanced by adding:

• 🛒 Shopping cart functionality
• ❤️ Wishlist functionality
• 🔍 Advanced product search and filtering
• 👤 User authentication
• 📦 Backend and database integration
• 💳 Online payment integration
• 📋 Order management
• 🧾 Product details and checkout functionality

---

Author

Muniba Ishfaq

BS Software Engineering UI/UX Designer & Web Developer

Design & Development

• UI/UX Design: Figma
• Frontend: React.js
• Styling: Bootstrap & CSS
• Build Tool: Vite
• Version Control: Git & GitHub

---

⭐ Project

If you find this project useful or interesting, feel free to ⭐ the repository.