Skip to content

Latest commit

 

History

History
118 lines (83 loc) · 3.37 KB

README.md

File metadata and controls

118 lines (83 loc) · 3.37 KB
Raw

TechTrendz 🚀

TechTrendz is a sleek blogging platform for tech enthusiasts to create, share, and discover articles. Users can enjoy a modern interface, intuitive editing, and personalized theme options.

Table of Contents

✨ Features

  • 🔐 User Authentication: Secure sign-up, sign-in, and log out.
  • 🏠 Home Feed: Explore tech blogs viewable by all users.
  • 📑 Your Posts: Manage your posts with visibility settings.
  • ✍️ Write Posts: Rich text editor with TinyMCE for formatting, images, and code.
  • 🌗 Theme Toggle: Dark, light, or system theme for a custom experience.

🛠️ Tech Stack

  • Frontend: ReactJS, Redux, TailwindCSS, Shadcn
  • Backend as a Service: Appwrite (auth, database, storage)

⚙️ Setup and Installation

Prerequisites

  • Node.js (>=14.x), Appwrite setup

Steps

  1. Clone the Repository:

    git clone https://github.com/Subrat29/TechTrendz
cd techtrendz

  2. Install Dependencies:

    npm install

  3. Configure Appwrite:

    • Setup .env with your Appwrite credentials: 
      VITE_APPWRITE_URL=""
VITE_APPWRITE_PROJECT_ID=""
VITE_APPWRITE_COLLECTION_ID=""
VITE_APPWRITE_DATABASE_ID=""
VITE_APPWRITE_BUCKET_ID=""
VITE_APPWRITE_API_KEY=""

  4. Run the App:

    npm start

📱 Screens and Functionalities

  1. Auth (🔐): Secure sign in, sign up, and logout with Appwrite.
  2. Home Feed (🏠): Discover all active blogs.
  3. Your Posts (📑): Manage your authored blogs.
  4. Write Post (✍️): Editor for rich content with TinyMCE.
  5. Theme Toggle (🌗): Choose dark, light, or system theme.

🖼️ Screenshots

Desktop View

  1. Home Feed: Home Feed
  2. Single Post: Home Feed
  3. Single Post in Light Mode: Home Feed
  4. Write Post: Write Post

Mobile View

  1. Home Feed: Home Feed
  2. Mobile Header: Home Feed
  3. Single Post: Home Feed
  4. Single Post in Light Mode: Home Feed
  5. Write Post: Write Post

📊 Architecture and Data Flow Diagram

Overview

  • Frontend: React, Redux for state, TinyMCE for text editor
  • Backend (Appwrite): Manages auth, storage, database

Data Flow

Data Flow

🤝 Contributing

  1. Fork and create a new branch.
  2. Commit your changes.
  3. Push to your branch.
  4. Open a Pull Request.

📄 License

Distributed under the MIT License. See LICENSE for more information.

Created with ❤️ by Subrat Yadav