Skip to content

README.md

Latest commit

 

History

History
220 lines (165 loc) · 6.59 KB

README.md

File metadata and controls

220 lines (165 loc) · 6.59 KB

StackIt Knowledge Flow 🧠💡

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

TypeScript React Supabase Vite Tailwind CSS

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

📞 Support

If you have any questions or need help, please:

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

Built with ❤️ by EmoBot208