QTwitterClone (q_twitter_clone)

Quasar + Vue 3 “Twitter-like” timeline clone.

The app lets you create short posts (“Qweets”), renders them in a timeline, and supports real-time updates backed by Firebase Cloud Firestore.

Demo

• https://quasar-twitter-clone.mnfprofile.com

Screenshots

Home

About

Features

• Create a Qweet (up to 280 chars)
• Real-time timeline updates (Firestore onSnapshot)
• Like/unlike a Qweet (toggle liked)
• Delete a Qweet
• Basic navigation: Home + About + 404 page
• Electron wrapper support (Quasar Electron mode)

Tech stack

• Quasar Framework v2 (UI components + app CLI)
• Vue 3 + Vue Router
• Vite (via @quasar/app-vite)
• Firebase (Firestore)
• date-fns (human-friendly “time ago” formatting)
• Electron (optional desktop builds)

Project structure

High-level layout of the app:

src/
	App.vue                     # root component (renders router-view)
	boot/
		firebase.js                # Firebase init + Firestore DB export
	layouts/
		MainLayout.vue             # header + left/right drawers + router-view
	pages/
		PageHome.vue               # Qweet composer + timeline, Firestore integration
		PageAbout.vue              # About page content
		ErrorNotFound.vue          # 404 page
	router/
		index.js                   # router instance
		routes.js                  # route table
src-electron/
	electron-main.js             # Electron main process window creation
	electron-preload.js          # (currently template / no APIs exposed)

How it works

Routing

Routes are defined in src/router/routes.js and mounted with MainLayout.vue:

• / → Home (src/pages/PageHome.vue)
• /about → About (src/pages/PageAbout.vue)
• /:catchAll(.*)* → 404 (src/pages/ErrorNotFound.vue)

The project uses hash-based routing by default (see quasar.config.js: build.vueRouterMode = 'hash').

UI layout

src/layouts/MainLayout.vue provides:

• A top header that shows the current route name
• A left drawer with navigation links (Home, About)
• A right drawer with a search input + placeholder “trends/news” list

Firestore data model

The timeline is backed by a Firestore collection named qweets.

Each document is expected to look like:

{
	content: string,   // the qweet text
	date: number,      // epoch milliseconds (Date.now())
	liked: boolean     // whether the qweet is liked
}

Notes:

• Author name/handle and avatar are currently hard-coded in the UI.
• No pagination/limits are applied yet; the page listens to the whole collection.

Real-time updates

src/pages/PageHome.vue subscribes to the qweets collection with:

• query(collection(db, 'qweets'), orderBy('date'))
• onSnapshot(...docChanges()) to react to:
  • added → inserts into the UI list
  • modified → updates the matching item
  • removed → removes the item

The UI inserts new items with unshift() so the newest items appear at the top.

Local development

Prerequisites

• Node.js: this repo is configured to work with Node ^22 || ^20 || ^18 || ^16 || ^14.19
• Yarn Classic (v1) is supported (the repo currently uses Yarn v1)
• Quasar CLI: you can run it via npx quasar or install globally if you prefer

Install dependencies

yarn install

If you see a warning about an unmet peer dependency under firebase, it’s typically safe to ignore for this web-only project.

Run the app (web)

npx quasar dev

Build the app (web)

npx quasar build

Firebase / Firestore setup

The Firestore connection is initialized in src/boot/firebase.js.

By default, the repository contains a Firebase project configuration object. If you fork this project, you should:

1. Create your own Firebase project
2. Enable Cloud Firestore
3. Update src/boot/firebase.js with your Firebase config
4. Create a qweets collection (or just let the app create it when you post)

Suggested Firestore security rules (example)

This is a minimal example to get started. You should adapt it to your needs:

rules_version = '2';
service cloud.firestore {
	match /databases/{database}/documents {
		match /qweets/{docId} {
			allow read: if true;
			allow create, update, delete: if true;
		}
	}
}

Electron (desktop)

This project includes Electron entry points under src-electron/.

To run in Electron dev mode (Quasar CLI):

npx quasar dev -m electron

To build an Electron bundle:

npx quasar build -m electron

src-electron/electron-preload.js is currently only a template (no APIs are exposed to the renderer).

Configuration

• Quasar config: quasar.config.js
• Theme variables: src/css/quasar.variables.sass

Quasar config reference:

• https://v2.quasar.dev/quasar-cli-vite/quasar-config-js

Troubleshooting

yarn install fails with “engine node is incompatible”

• This happens when package.json engines don’t include your Node version.
• Ensure you’re on a supported Node version (see Prerequisites), then re-run yarn install.

Timeline is empty

• Verify Firestore is enabled in your Firebase project
• Ensure the Firebase config in src/boot/firebase.js points to your project
• Check browser console for Firestore permission errors (security rules)