PixelGram

Table of Contents

1. Introduction
2. Tech Stack
3. Features
4. Quick Start

Introduction

PixelGram is a social media with user-friendly platform. Easily create and explore posts, and enjoy a robust authentication system and quick data fetching using React Query.

Tech Stack

• React.js
• Appwrite
• React Query
• TypeScript
• Shadcn
• Tailwind CSS
• Socket.io

Features

• Authentication System: Ensures security and user privacy
• Explore Page: Homepage for users to explore posts
• Like and Save Functionality: Manage liked and saved content
• Detailed Post Page: Display content and related posts
• Profile Page: Showcase liked posts and edit profile
• Browse Other Users: Explore other users' profiles and posts
• Create Post Page: User-friendly post creation with file management
• Edit Post Functionality: Edit post content anytime
• Responsive UI with Bottom Bar: Enhance mobile app feel
• React Query Integration: Efficient data fetching with auto caching
• Backend as a Service (BaaS) - Appwrite: Streamlined backend development
• Real-Time Functionality (Socket.io): Enables real-time updates and communication features

Quick Start

Prerequisites

• Git
• Node.js
• npm Installation

npm install

Set Up Environment Variables

Create a .env file in the root of your project:

VITE_APPWRITE_URL=
VITE_APPWRITE_PROJECT_ID=
VITE_APPWRITE_DATABASE_ID=
VITE_APPWRITE_STORAGE_ID=
VITE_APPWRITE_USER_COLLECTION_ID=
VITE_APPWRITE_POST_COLLECTION_ID=
VITE_APPWRITE_SAVES_COLLECTION_ID=

Replace the placeholder values with your actual Appwrite credentials.

Running the Project

npm start

Open http://localhost:3000 in your browser.