Refixly is an open-source web application that aims to empower users to repair household and electronic items using the power of AI and Augmented Reality (AR). With an intelligent front end, computer vision support, and planned AR overlays, Refixly aspires to become a go-to tool for real-time object detection, repair tutorials, and DIY community collaboration.
Refixly's ultimate goal is to allow users to:
- 📸 Detect broken objects using their webcam
- 🧠 Suggest fixes using AI
- 📹 Provide tutorial videos using YouTube API
- 🛠️ Guide users with AR overlays (planned)
- 🤝 Collaborate with others via a DIY community forum (planned)
This repository includes the homepage UI, the initial backend setup, and is open for community contributions.
Here’s a complete breakdown of the technologies used (or planned) for Refixly.
| Tech | Purpose |
|---|---|
| React.js | Component-based UI development |
| Vite | Fast build tool and dev server for React |
| Tailwind CSS | Utility-first CSS framework for styling |
| React Router DOM | Routing and page navigation |
| WebRTC / MediaDevices API | Accessing webcam for live detection |
| TensorFlow.js | In-browser ML (e.g., object detection using COCO-SSD) |
| Tech | Purpose |
|---|---|
| Node.js | Server-side runtime environment |
| Express.js | Web framework to handle routes and APIs |
| MongoDB Atlas | Cloud NoSQL database for storing users, posts, and repair data |
| Mongoose | ODM for MongoDB to structure and manage data schemas |
| YouTube Data API v3 | Fetch video tutorials based on object detection |
| Tech | Purpose |
|---|---|
| Firebase Auth | Secure user login (email/password, Google sign-in) |
| Tech | Purpose |
|---|---|
| Zappar WebAR SDK | Lightweight JavaScript AR overlay (WebXR-compatible) |
| 8thWall | Commercial AR SDK (if free tier needed for advanced features) |
| Tool/Service | Purpose |
|---|---|
| Vercel | Frontend hosting with GitHub CI/CD integration (free tier) |
| Render | Backend hosting for Node.js server (free tier) |
| Thunder Client / Postman | Local API testing |
refixly/
├── client/ # React Frontend (Vite)
│ ├── components/
│ ├── pages/
│ ├── assets/
├── server/ # Node.js + Express backend
│ ├── routes/
│ ├── controllers/
│ ├── models/
├── public/ # Static files (logo, manifest, favicon)
├── README.md
├── .env.examplegit clone https://github.com/yourusername/refixly.git
cd refixlycd client
npm install
npm run devcd ../server
npm installCreate a .env file in /client:
VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_FIREBASE_PROJECT_ID=your_id
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id
VITE_MEASUREMENT_ID=your_measurement_id
Create a .env file in /server:
PORT=5000
MONGO_URI=your_mongodb_uri
YOUTUBE_API_KEY=your_youtube_api_keynpm run devnode server.jsWe will use TensorFlow.js with COCO-SSD for in-browser object detection.
- No need for server-based inference
- Runs in user browser for speed and privacy
- Can be extended to YOLOv8 (with server hosting)
We welcome open source contributors to build Refixly together!
- Fork this repository
- Create a branch:
git checkout -b feature/your-feature-name - Make your changes
- Commit:
git commit -m "Added X feature" - Push to your fork
- Create a Pull Request
Check the Issues tab for beginner-friendly contributions like:
- Add "About" or "Tutorials" pages
- Setup MongoDB models
- Create AR component placeholder
- Integrate TensorFlow.js
- Follow consistent naming and code formatting
- Use comments where necessary
- Keep PRs focused and well-explained
- Respect the community — be kind and constructive ❤️
This project is licensed under the MIT License. See the LICENSE file for details.
- 🧑💻 Maintainer: Bavanetha M R
- 📧 Email: bavanethamr.com
🛠️ Refixly – Let’s fix the future, one repair at a time.