Repository files navigation

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

• 🔐 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

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.

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

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

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

NEXT_PUBLIC_APPWRITE_HOST_URL=your_appwrite_host_urlNEXT_PUBLIC_APPWRITE_PROJECT_ID=your_project_idAPPWRITE_API_KEY=your_api_key

1. Clone the repository

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

2. Install dependencies

npm install# oryarn install

3. Run the development server

npm run dev# oryarn dev

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

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

The live version of this application is deployed on Vercel:

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

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

• 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

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

• Email:aryanak9163@gmail.com

• GitHub Issues: Create anissue 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}