https://github.com/sinedied/freevibes
A modern web dashboard for RSS feeds and notes, inspired by the old NetVibes interface
https://github.com/sinedied/freevibes
dashboard feed gist html lit notes rss typescript web-components
Last synced: about 1 month ago
JSON representation
A modern web dashboard for RSS feeds and notes, inspired by the old NetVibes interface
- Host: GitHub
- URL: https://github.com/sinedied/freevibes
- Owner: sinedied
- Created: 2025-06-05T14:19:12.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-02T12:05:44.000Z (12 months ago)
- Last Synced: 2025-09-21T04:35:22.691Z (9 months ago)
- Topics: dashboard, feed, gist, html, lit, notes, rss, typescript, web-components
- Language: TypeScript
- Homepage: https://sinedied.github.io/freevibes/
- Size: 67.4 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# FreeVibes
[](https://github.com/sinedied/freevibes/actions/workflows/build.yml)
[](https://sinedied.github.io/freevibes/)
[](https://www.typescriptlang.org)
[](https://lit.dev/)
[](https://vitejs.dev/)
[](LICENSE)
:star: If you like this project, star it on GitHub — it helps a lot!
[Features](#features) • [Quick Start](#quick-start) • [Customization](#customization) • [Tech Stack](#tech-stack) • [Contributing](#contributing)
A modern, **vibe-coded** web dashboard for RSS feeds and sticky notes, inspired by the classic NetVibes interface. Built entirely with AI assistance, this project showcases modern web technologies in a clean, customizable package.
> **Note**: This entire codebase has been vibe-coded and generated by an AI, demonstrating the power of AI-assisted development!
## ✨ Features
🌟 **Core Features**
- 📰 **RSS Feed Reader** - Stay updated with your favorite feeds
- 📝 **Sticky Notes** - Quick note-taking with clickable links
- 🌙 **Dark Mode** - Toggle between light and dark themes
- 📱 **Responsive Design** - Works great on desktop and mobile
🔧 **Developer Features**
- 💾 **Local Storage** - Your data persists in your browser
- 🎨 **Fully Customizable** - Theme with CSS custom properties
- 🔄 **GitHub Integration** - Sync your data via GitHub Gists
- 🚀 **Zero Backend** - Runs entirely in your browser
## 🚀 Quick Start
Get FreeVibes running in under 2 minutes:
```bash
# Clone and install
git clone https://github.com/sinedied/freevibes.git
cd freevibes
npm install
# Start development server
npm run dev
# Open http://localhost:5173
```
**Try it live**: [🌐 **Launch FreeVibes**](https://sinedied.github.io/freevibes/)
### Production Build
```bash
npm run build && npm run preview
```
## 🎨 Customization
FreeVibes is built for customization. The entire theme uses CSS custom properties with the `--fv-` prefix:
```css
:root {
--fv-bg-primary: #f8f9fa;
--fv-text-primary: #212529;
--fv-accent-primary: #007bff;
--fv-border-radius: 0.5rem;
/* 50+ more variables available */
}
```
Create your own theme by overriding these variables in your browser's developer tools or by forking the project.
## 🏗️ Tech Stack
**Frontend Stack**
- [TypeScript](https://www.typescriptlang.org) - Type-safe JavaScript
- [Lit](https://lit.dev/) - Fast, lightweight web components
- [Vite](https://vitejs.dev/) - Lightning-fast build tool
**Deployment & Data**
- [GitHub Pages](https://pages.github.com/) - Free hosting via GitHub Actions
- [GitHub Gists](https://gist.github.com/) - Data persistence and sync
- Local Storage - Offline-first data storage
**Styling**
- Modern CSS with custom properties
- CSS Grid & Flexbox layouts
- Container queries for responsive design
## 🤝 Contributing
We welcome contributions! Here's how to get started:
1. **Fork** the repository
2. **Create** a feature branch: `git checkout -b feature/amazing-feature`
3. **Commit** your changes: `git commit -m 'Add amazing feature'`
4. **Push** to the branch: `git push origin feature/amazing-feature`
5. **Open** a Pull Request
## CORS Proxy
RSS feeds are fetched through a CORS proxy to bypass browser restrictions. By default, the app uses [corsproxy.io](https://corsproxy.io), which works for localhost development.
For production deployments, you can use the included Cloudflare Worker proxy located in `packages/cors-proxy`:
### Setting up your own proxy
1. Navigate to the proxy folder and install dependencies:
```bash
npm install # From root directory, installs all workspaces
```
2. Login to Cloudflare and deploy:
```bash
npx wrangler login
npm run deploy:proxy
```
3. Set the `VITE_PROXY_URL` environment variable during build:
```bash
VITE_PROXY_URL=https://your-worker.your-subdomain.workers.dev npm run build
```
For GitHub Actions deployment, add `VITE_PROXY_URL` as an environment variable in your build step.
See the proxy folder (`packages/cors-proxy`) for more details on configuration and allowed origins.
## License
This project is open source and available under the [MIT License](LICENSE).
---
**Built with ❤️ and AI assistance**
Inspired by the classic NetVibes • Powered by modern web technologies