🌊 Riverflow

A modern StackOverflow clone built with Next.js and Appwrite

Riverflow is a modern Q&A platform inspired by StackOverflow, where users can ask questions, provide answers, vote on content, and contribute to a knowledge-sharing community.

Live Demo • Report Bug • Request Feature

📑 Table of Contents

• ✨ Features
• 🔍 How It Works
• 🛠️ Tech Stack
• 🚀 Getting Started
  • Prerequisites
  • Environment Setup
  • Installation
• 📁 Project Structure
• 🚀 Deployment
  • Deployment Steps
• 💖 Acknowledgments
• 📬 Contact
• 👨‍💻 Meet the Author

✨ Features

• 🔐 User Authentication - Secure login/register functionality using Appwrite Auth
• ❓ Question Management - Create, edit, and delete questions with rich text editing
• ✅ Answer System - Post and manage answers to questions
• 👍 Voting System - Upvote or downvote questions and answers
• 💬 Comments - Add comments to questions and answers
• 👤 User Profiles - View user activity, questions, answers, and votes
• 📝 Rich Text Editor - Markdown support for writing questions and answers
• 📱 Responsive Design - Fully responsive UI that works on all devices
• 🌓 Dark/Light Mode - Theme toggle with next-themes
• ✨ Interactive UI - Beautiful animations and interactive elements with Framer Motion

🔍 How It Works

Riverflow provides a comprehensive platform for developers to exchange knowledge through a structured Q&A format:

1. User Registration & Authentication

   • Create an account using email/password
   • Secure authentication managed through Appwrite Auth
   • User profiles track reputation and activity

2. Asking Questions

   • Create questions with a title, detailed description using rich text editor
   • Add relevant tags to improve discoverability
   • Attach files or code snippets when needed
   • Edit questions as long as they haven't received answers

3. Community Interaction

   • Answer questions with markdown support for code formatting
   • Upvote or downvote content based on quality and helpfulness
   • Add comments to questions and answers for clarification
   • Earn reputation points through positive engagement

4. Knowledge Discovery

   • Search for questions using keywords or tags
   • Browse trending questions on the homepage
   • View user profiles to see their contributions
   • Filter questions by various criteria

The application leverages Appwrite's backend services for authentication, database operations, and file storage, while Next.js provides the responsive front-end interface.

🛠️ Tech Stack

Next.js 14	React 18	TypeScript	Tailwind CSS
Appwrite	Framer Motion	Radix UI	Zustand

🚀 Getting Started

Prerequisites

• Node.js 18.x or later
• npm or yarn
• Appwrite account and server setup

Environment Setup

Create a .env.local file in the root directory with the following variables:

NEXT_PUBLIC_APPWRITE_HOST_URL=your_appwrite_host_url
NEXT_PUBLIC_APPWRITE_PROJECT_ID=your_project_id
APPWRITE_API_KEY=your_api_key

Installation

1. Clone the repository

git clone https://github.com/dev-username/riverflow.git
cd riverflow

2. Install dependencies

npm install
# or
yarn install

3. Run the development server

npm run dev
# or
yarn dev

4. Open http://localhost:3000 with your browser to see the application.

📁 Project Structure

src/
  ├── app/              # Next.js App Router pages and API routes
  │   ├── (auth)/       # Authentication related pages (login/register)
  │   ├── api/          # API endpoints for questions, answers, votes
  │   ├── components/   # Page-specific components
  │   ├── questions/    # Question listing, details, and creation pages
  │   └── users/        # User profiles and activity pages
  ├── components/       # React components
  │   ├── magicui/      # UI animation and effect components
  │   └── ui/           # Basic UI components (buttons, inputs, etc.)
  ├── Models/           # Appwrite models and configurations
  │   ├── client/       # Client-side Appwrite configurations
  │   └── server/       # Server-side Appwrite configurations
  ├── store/            # Zustand state management
  ├── lib/              # Utility functions
  └── utils/            # Helper functions (slugify, time formatting)

The project follows a modular architecture with:

• App Router: Leveraging Next.js 14's app directory structure for routing
• Component Library: Reusable UI components with Tailwind CSS styling
• Server Components: Utilizing Next.js server components for data fetching
• Client Integration: Appwrite SDK for both client and server operations
• State Management: Zustand for lightweight and efficient state management

🚀 Deployment

The live version of this application is deployed on Vercel:

• Live Site: https://riverflows.vercel.app
• Status:

Deployment Steps

To deploy your own instance of Riverflow:

1. Set up Appwrite

   • Create an Appwrite project and configure the necessary collections:
     • Questions, Answers, Comments, Votes
   • Set up Appwrite storage buckets for file attachments
   • Create API keys with appropriate permissions

2. Configure Environment Variables

   • Add the required Appwrite environment variables to your deployment platform

3. Deploy to Vercel

   vercel

   Or connect your GitHub repository to Vercel for automatic deployments.

4. Alternative Deployment Options

   • Deploy to Netlify, Azure Static Web Apps, or any other platform that supports Next.js

💖 Acknowledgments

• Hitesh Chaudhary - For the exceptional guidance
• StackOverflow - For the inspiration
• Appwrite - For the amazing backend-as-a-service
• Next.js - For the incredible React framework
• Tabler Icons - For the beautiful icons
• Tailwind CSS - For the utility-first CSS framework

📬 Contact

Have questions, suggestions, or want to contribute? Reach out through:

• Email: [email protected]

• GitHub Issues: Create an issue for bug reports or feature requests

I'm always happy to connect with fellow developers and users of this project!

---

Meet the Author

Software Developer & Open Source Enthusiast

Passionate about building responsive web applications and sharing knowledge with the developer community.

_{Built with ❤️ by a passionate web developer}