StackIt Knowledge Flow 🧠💡

A modern Q&A platform for developers and knowledge enthusiasts, built with React, TypeScript, and Supabase.

Demo Link

🌟 Features

• 🔐 Authentication: Secure user registration and login with Supabase Auth
• ❓ Ask Questions: Create detailed questions with rich text formatting
• 💬 Answer & Comment: Provide answers and engage in discussions
• ⬆️ Voting System: Upvote/downvote questions and answers
• 🏷️ Tagging: Organize content with custom tags
• 🔍 Search: Find questions and answers quickly
• 👤 User Profiles: Personalized user profiles with bio and avatar
• 📱 Responsive Design: Optimized for desktop and mobile devices
• 🌓 Theme Support: Dark and light mode toggle
• 🔔 Notifications: Real-time notifications for user interactions

🚀 Quick Start

Prerequisites

• Node.js 16+ and npm/yarn/bun
• A Supabase account and project

Installation

1. Clone the repository

   git clone https://github.com/EmoBot208/stackit-knowledge-flow.git
   cd stackit-knowledge-flow

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   bun install

3. Set up environment variables

   cp .env.example .env.local

   Add your Supabase credentials:

   VITE_SUPABASE_URL=your_supabase_url
   VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Start the development server

   npm run dev

5. Open your browser Navigate to http://localhost:5173

🏗️ Tech Stack

Frontend

• React 18 - Modern React with hooks and concurrent features
• TypeScript - Type-safe development
• Vite - Lightning-fast build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• shadcn/ui - Beautiful and accessible React components
• React Router - Client-side routing
• TanStack Query - Server state management
• Lucide React - Beautiful icon library

Backend & Database

• Supabase - Backend-as-a-Service
  • PostgreSQL database
  • Real-time subscriptions
  • Authentication & authorization
  • Row Level Security (RLS)
  • Edge Functions

Key Libraries

• @supabase/supabase-js - Supabase client
• react-hook-form - Form management
• date-fns - Date manipulation
• class-variance-authority - Component variants
• cmdk - Command menu

📁 Project Structure

src/
├── components/          # Reusable UI components
│   ├── ui/             # shadcn/ui components
│   ├── QuestionCard.tsx
│   ├── AnswerCard.tsx
│   ├── Navbar.tsx
│   └── RichEditor.tsx
├── contexts/           # React contexts
│   ├── AuthContext.tsx
│   └── ThemeContext.tsx
├── hooks/              # Custom React hooks
├── integrations/       # External service integrations
│   └── supabase/
├── lib/                # Utility functions
├── pages/              # Page components
│   ├── HomePage.tsx
│   ├── AskQuestionPage.tsx
│   ├── QuestionDetailPage.tsx
│   ├── ProfilePage.tsx
│   └── ...
└── assets/             # Static assets

🗄️ Database Schema

The application is backed by the following primary tables:

profiles - Stores user profile details and metadata

questions - Contains questions created by users

answers - Stores user-submitted answers to questions

comments - Nested discussion under answers

votes - Upvote/downvote tracking for questions and answers

notifications - Real-time alerts for user activity

🎨 UI Components

Crafted using shadcn/ui components for a polished interface:

Forms & Inputs - With validation using react-hook-form

Cards & Tables - For clean data display

Navigation & Menus - Sidebar, dropdowns, and breadcrumbs

Modals & Dialogs - For interactions and confirmations

Toast Notifications - Non-intrusive user feedback

Dark Mode Toggle - Seamless theme switching experience

🔧 Development

Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run build:dev    # Build for development
npm run lint         # Run ESLint
npm run preview      # Preview production build

Code Style

• ESLint - Code linting
• TypeScript - Static type checking
• Prettier - Code formatting (recommended)

🚀 Deployment

Option 1: Lovable Platform

Simply open Lovable and click on Share → Publish.

Option 2: Vercel/Netlify

1. Build the project: npm run build
2. Deploy the dist folder to your preferred hosting platform
3. Set up environment variables on your hosting platform

Option 3: Docker

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 5173
CMD ["npm", "run", "preview"]

🤝 Contributing

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

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• shadcn/ui - For the amazing component library
• Supabase - For the backend infrastructure
• Lucide - For the beautiful icons
• Tailwind CSS - For the utility-first CSS framework

📞 Support

If you have any questions or need help, please:

• Open an issue on GitHub
• Contact the maintainer: EmoBot208

---

Built with ❤️ by EmoBot208