NoteWave

A full-stack blog platform where users can write, publish, edit, and delete blog posts with a rich-text editor. Built with React and Vite on the frontend, and Appwrite as the backend — handling auth, database, and file storage without a separate Node.js server.

What It Does

Users land on a clean reading interface showing published blog posts. After registering or logging in, they get access to a personal dashboard where they can create new posts using a rich-text editor, edit or delete their existing ones, and manage their content. Routes that require a logged-in user are protected — unauthenticated users get redirected to login automatically.

Project Structure

NoteWave/ ├── public/ # Static assets served as-is ├── src/ │ ├── appwrite/ # Appwrite service configs — auth, database, storage │ ├── components/ # Reusable UI components (Navbar, PostCard, Editor, etc.) │ ├── pages/ # Route-level components — Home, Login, Register, Post, Dashboard │ ├── store/ # Redux or Context state — auth state, user session │ └── main.jsx # App entry point, router setup ├── .env.sample # Environment variable template ├── index.html # HTML shell ├── vite.config.js # Vite configuration └── eslint.config.js # ESLint rules

Tech Stack

React · Vite · Appwrite (BaaS) · Rich Text Editor · React Router · Vercel

Why Appwrite? Instead of building and hosting a separate backend API, Appwrite runs as a BaaS — it provides authentication, a document database, and file storage out of the box, and exposes an SDK the React app talks to directly. This keeps the architecture simple: one frontend repo, one Appwrite project, and no Express server to maintain.

Getting Started

You'll need an Appwrite account and a project set up with a database collection for posts.

bash git clone https://github.com/Samadali123/NoteWave.git cd NoteWave npm install

Copy .env.sample to .env and fill in your Appwrite credentials:

env VITE_APPWRITE_URL=https://cloud.appwrite.io/v1 VITE_APPWRITE_PROJECT_ID=your_project_id VITE_APPWRITE_DATABASE_ID=your_database_id VITE_APPWRITE_COLLECTION_ID=your_collection_id VITE_APPWRITE_BUCKET_ID=your_storage_bucket_id

Then start the dev server:

bash npm run dev

Opens at http://localhost:5173.

Build for Production

bash npm run build

Output goes to dist/. Deploy to Vercel by connecting the repo — Vercel auto-detects Vite and sets up the build command for you.

Features

• User registration, login, and logout via Appwrite Auth
• Protected routes — only logged-in users can create or edit posts
• Rich-text post editor with formatting support
• Create, edit, update, and delete blog posts
• Posts stored in Appwrite database with author ownership
• Cover image upload stored in Appwrite Storage
• Production deployment on Vercel

Author

Syed Samad Ali — LinkedIn