Skip to content

project.md

Latest commit

 

History

History
638 lines (410 loc) · 17.7 KB

project.md

File metadata and controls

638 lines (410 loc) · 17.7 KB

Instylo - Social Media Application: Comprehensive Project Documentation

Table of Contents

  1. Project Overview
  2. Tech Stack
  3. Architecture
  4. Project Structure
  5. Key Features
  6. Core Components
  7. Pages and Routing
  8. State Management
  9. Authentication
  10. API Integration
  11. Deployment
  12. Future Enhancements

Project Overview

Instylo is a feature-rich social media application that combines traditional social networking functionality with innovative educational and community features. The project aims to create a platform where users can connect, share content, study together, explore communities, access news, play games, and more.

This web application is built using modern web technologies, focusing on a responsive and engaging user experience. It leverages Appwrite as a Backend-as-a-Service (BaaS) solution, React for the frontend, and incorporates various third-party APIs to provide a comprehensive set of features.

The platform is designed for users who want more than just a conventional social media experience, offering specialized tools for education, community building, e-commerce, and entertainment.

Tech Stack

Frontend

  • React: JavaScript library for building user interfaces
  • TypeScript: Superset of JavaScript adding static types
  • Vite: Next-generation frontend build tool
  • Tailwind CSS: Utility-first CSS framework
  • Framer Motion: Animation library for React
  • Shadcn/ui: Component library for building consistent UI
  • Lucide React: Icon library

Backend

  • Appwrite: Backend-as-a-Service (BaaS) platform
  • Vercel Serverless Functions: For handling API requests

State Management & Data Fetching

  • React Query: Data-fetching and state management library
  • React Context API: For global state management

External APIs

  • NewsAPI: For fetching news content
  • RapidAPI/FreeToGame: For games data
  • Jitsi Meet: For video conferencing

DevOps

  • Vercel: For hosting and deployment

Architecture

The application follows a modern front-end architecture with the following key aspects:

Client-Side Architecture

  • Component-Based Structure: The UI is built using reusable React components
  • Page-Based Routing: React Router manages navigation between different sections
  • Global State Management: Uses React Context API for app-wide state
  • Data Fetching: React Query handles API calls and server state

Backend Integration

  • BaaS Integration: Appwrite provides authentication, database, and storage services
  • Serverless Functions: Vercel serverless functions act as API proxies for third-party services

Design Patterns

  • Container/Presentation Pattern: Separates logic from UI components
  • Custom Hooks: Encapsulates reusable logic
  • Context Providers: Manages global state across components

Project Structure

Root Directory

/
├── api/                  # Vercel serverless functions
├── public/               # Static assets (icons, images)
├── src/                  # Source code
├── dist/                 # Build output (generated)
├── .env                  # Environment variables
├── vite.config.ts        # Vite configuration
├── tailwind.config.js    # Tailwind CSS configuration
├── tsconfig.json         # TypeScript configuration
└── package.json          # Project dependencies and scripts

Source Code Organization (/src)

src/
├── _auth/                # Authentication-related components and pages
├── _root/                # Main application pages and layouts
├── components/           # Reusable UI components
│   ├── chatbot/          # AI chatbot components
│   ├── forms/            # Form components
│   ├── shared/           # Common components used across the app
│   └── ui/               # Basic UI building blocks
├── constants/            # Application constants
├── context/              # React context providers
├── hooks/                # Custom React hooks
├── lib/                  # Utility functions and API clients
├── types/                # TypeScript type definitions
├── App.tsx               # Main application component
├── globals.css           # Global CSS styles
└── main.tsx              # Application entry point

API Directory (/api)

api/
└── news.js               # Serverless function for proxying NewsAPI requests

Key Features

1. Social Networking

  • Post Creation & Sharing: Users can create, edit, and share posts
  • Interactions: Like, comment, and save posts
  • User Profiles: Customizable profiles with avatar and bio
  • Explore Feed: Discover content from other users

2. Video Conferencing

  • Video Call Sessions: Create or join video calls
  • Screen Sharing: Share screen during video calls
  • Room Management: Generate unique room IDs for private sessions

3. Study Buddy System

  • AI Study Companions: Virtual study partners powered by AI
  • Subject Progress Tracking: Monitor learning progress
  • Scheduled Study Sessions: Plan and join study sessions

4. Communities

  • Thematic Groups: Join communities based on interests
  • Community Interaction: Engage with community content
  • Community Discovery: Find new communities to join

5. News Feed

  • Categorized News: Browse news by categories
  • Article Saving: Save articles for later reading
  • Search Functionality: Search for specific news topics

6. Games Center

  • Game Collection: Access a variety of free-to-play games
  • Game Categories: Filter games by genre and platform
  • External Game Launch: Launch games on their original platforms

7. Marketplace

  • Product Listings: Browse products for sale
  • Point-Based Rewards: Earn and spend reward points
  • Discount Coupons: Access special offers and coupons

8. Services

  • Service Opportunities: Discover volunteer and paid service opportunities
  • Point System: Earn points through service activities
  • Service Tracking: Monitor completed service activities

Core Components

1. Layout Components

RootLayout.tsx

This component defines the main application layout including navigation elements.

Key Features:

  • Responsive layout with sidebar, content area, and optional study buddy sidebar
  • Navigation components (Topbar, LeftSidebar, Bottombar)
  • Conditionally renders different layouts based on screen size
  • Manages sidebar visibility state

Topbar.tsx

Header component that appears at the top of the application.

Key Features:

  • App logo and navigation
  • User profile menu
  • Search functionality
  • Notification indicators

LeftSidebar.tsx

Main navigation sidebar that provides access to different sections.

Key Features:

  • Navigation links to main sections
  • Current user profile summary
  • Sign out functionality
  • Responsive design (collapsible on smaller screens)

2. Authentication Components

SigninForm.tsx & SignupForm.tsx

Forms for user authentication.

Key Features:

  • Input validation
  • Error handling
  • OAuth integration
  • Form submission handling

3. Post Components

PostCard.tsx

Displays a single post in the feed.

Key Features:

  • Post content rendering (text, images)
  • User information display
  • Interaction buttons (like, comment, save)
  • Timestamp formatting

CreatePost.tsx

Form for creating new posts.

Key Features:

  • Rich text editor
  • Image upload functionality
  • Location tagging
  • Privacy settings

4. Study Tools

StudyBuddySidebar.tsx

Sidebar component for study-related features.

Key Features:

  • Study buddy list
  • Subject progress tracking
  • Upcoming session reminders
  • Quick action buttons for study activities

Implementation Details:

  • Manages multiple tab views (Study, Communities, Services, Marketplace, News, Games)
  • Uses Framer Motion for smooth animations
  • Implements responsive design principles
  • Provides navigation to specialized feature pages

5. Utility Components

Loader.tsx

Loading indicator component.

Key Features:

  • Visual feedback during data loading
  • Customizable size and appearance
  • Animation effects

FileUploader.tsx

Component for handling file uploads.

Key Features:

  • Drag-and-drop functionality
  • File type validation
  • Upload progress indication
  • Error handling

Pages and Routing

The application uses React Router for navigation between different pages. Below are the main pages and their purposes:

Authentication Pages

  • /sign-in: User login page
  • /sign-up: New user registration

Core Social Features

  • /: Home feed with recent posts
  • /explore: Discover new content and users
  • /all-users: Browse all users on the platform
  • /saved: View saved posts
  • /create-post: Create new content
  • /posts/:id: View detailed post
  • /profile/:id: View user profiles
  • /update-profile/:id: Edit user profile

Study Features

  • /study-buddy: Find and interact with study companions
  • /study-session/:id: Join specific study sessions
  • /study-session/new: Create new study sessions

Community Features

  • /communities: Browse available communities
  • /communities/:id: View specific community

Service Features

  • /services: Browse service opportunities

Marketplace

  • /marketplace: Browse products and offers

Video Call

  • /video-call: Start or join video calls
  • /video-call/:roomId: Join specific video call room

News

  • /news: Browse news articles
  • /news/saved: View saved news articles

Games

  • /games: Browse and play games

State Management

Global State (React Context)

The application uses React Context API for managing global state:

AuthContext

Manages user authentication state.

Key Features:

  • Current user information
  • Authentication status
  • Login/logout functions
  • Token management

Server State (React Query)

React Query is used for managing server state:

Key Query Hooks

  • useGetPosts: Fetches posts for the feed
  • useGetUserById: Retrieves specific user information
  • useLikePost: Handles post liking functionality
  • useGetCurrentUser: Fetches current user data
  • useGetRecentPosts: Fetches most recent posts

Local Component State

Individual components manage their own state using React's useState and useReducer hooks.

Authentication

The application uses Appwrite for authentication services:

Authentication Flow

  1. User submits credentials via SigninForm or SignupForm
  2. Credentials are validated and sent to Appwrite
  3. Appwrite returns user information and session token
  4. Token is stored (via AuthContext)
  5. Authenticated user can access protected routes

Protected Routes

Routes that require authentication are wrapped in a protection layer that redirects unauthenticated users to the login page.

API Integration

1. Appwrite API

Appwrite serves as the backend for core functionality:

appwriteConfig.ts

Configuration file that initializes Appwrite services.

Services Used:

  • Authentication: User management and sessions
  • Database: Storing posts, comments, and other data
  • Storage: Handling media uploads (images)

2. NewsAPI Integration

The application fetches news content from NewsAPI:

Direct Integration (Development)

In development mode, the frontend directly calls NewsAPI endpoints.

Serverless Proxy (Production)

In production, requests are routed through a Vercel serverless function (/api/news) to avoid CORS issues and work around NewsAPI's domain restrictions.

3. FreeToGame API via RapidAPI

The Games feature uses the FreeToGame API through RapidAPI:

Games.tsx

Implements fetching and displaying game data from the RapidAPI-hosted FreeToGame API.

Implementation Details:

  • Uses environment variables for API keys
  • Implements filtering and searching functionality
  • Handles loading and error states

4. Jitsi Meet Integration

The Video Call feature integrates with Jitsi Meet for video conferencing:

VideoCall.tsx

Implements a video call interface using Jitsi Meet iframe integration.

Key Features:

  • Room creation and joining
  • Invitation link sharing
  • Simple interface for video calls

Deployment

The application is deployed using Vercel:

Deployment Configuration

  • vercel.json: Configuration file for Vercel deployment
  • Environment Variables: Sensitive keys and configuration stored in Vercel's environment variables

Serverless Functions

Vercel serverless functions are used to:

  • Proxy API requests (e.g., NewsAPI)
  • Perform server-side operations without a dedicated backend

Feature Deep Dive

1. News Feature

The News component provides users with the latest news from various categories through the NewsAPI integration.

Component: News.tsx

Functionality:

  • Fetches news articles from different categories (business, technology, health, etc.)
  • Allows users to search for specific news topics
  • Enables saving articles for later reading
  • Implements pagination for browsing more articles
  • Handles loading and error states

Technical Details:

  • Uses React Query for data fetching and caching
  • Implements a Vercel serverless function proxy for production environment
  • Stores saved articles in localStorage for persistence
  • Uses responsive design for mobile and desktop

User Experience:

  • Category filtering with visual indicators
  • Search functionality with instant results
  • Saved articles accessible via a dedicated tab
  • Loading indicators and error messages

2. Games Feature

The Games component offers a collection of free-to-play games sourced from the FreeToGame API via RapidAPI.

Component: Games.tsx

Functionality:

  • Displays a collection of free games with details
  • Allows filtering by genre and platform
  • Features a search function for finding specific games
  • Shows detailed game information including description, platform, and publisher

Technical Details:

  • Integrates with RapidAPI's FreeToGame endpoint
  • Uses environment variables for API key management
  • Implements client-side filtering and searching
  • Handles API errors and loading states

User Experience:

  • Featured game section highlights popular titles
  • Visual filtering options for platforms and genres
  • Game cards with thumbnails and quick information
  • External links to play games on their original platforms

3. Video Call Feature

The VideoCall component enables users to create and join video conferencing sessions using Jitsi Meet integration.

Component: VideoCall.tsx

Functionality:

  • Creates unique meeting rooms with custom identifiers
  • Joins existing rooms via URL parameters
  • Provides a copy link function for inviting others
  • Embeds the Jitsi Meet interface for video conferencing

Technical Details:

  • Uses iframe integration with Jitsi Meet
  • Manages room state and URL parameters
  • Implements clipboard functionality for sharing
  • Provides fallback UI for setup and errors

User Experience:

  • Simple interface for creating or joining calls
  • Meeting room information displayed prominently
  • Copy invite link functionality with visual feedback
  • Full-screen video conferencing experience

4. Study Buddy Sidebar

The StudyBuddySidebar provides a comprehensive interface for accessing educational and community features.

Component: StudyBuddySidebar.tsx

Functionality:

  • Displays study progress and upcoming sessions
  • Shows study buddies (both AI and human)
  • Provides quick access to communities, services, marketplace, news, and games
  • Enables focus tracking and goal setting

Technical Details:

  • Uses Framer Motion for smooth animations and transitions
  • Implements tab-based navigation between different features
  • Uses context and state for personalized content
  • Supports collapsible interface for space efficiency

User Experience:

  • Animated transitions between different feature tabs
  • Visual progress tracking for study goals
  • Quick access to all major platform features
  • Responsive design that adapts to screen size

Future Enhancements

The application has potential for several enhancements:

1. Real-time Features

  • Live Chat: Implement real-time messaging
  • Notifications: Real-time notification system
  • Collaborative Editing: Real-time document collaboration

2. AI Enhancements

  • Personalized Content: AI-driven content recommendations
  • Advanced Study Assistant: Enhanced AI study companions
  • Content Moderation: Automated content filtering

3. Mobile Applications

  • Native Mobile Apps: Develop iOS and Android versions
  • Push Notifications: Mobile notification system
  • Offline Mode: Support for offline content access

4. Enhanced Analytics

  • Learning Analytics: Detailed study progress tracking
  • Usage Statistics: Personal usage insights
  • Community Metrics: Analytics for community engagement

Conclusion

Instylo represents a comprehensive social platform that goes beyond traditional social networking by incorporating educational tools, community features, news, games, and more. Its modular architecture allows for easy extension and enhancement, while its user-centered design provides an engaging experience across devices.

The combination of modern frontend technologies with Backend-as-a-Service solutions demonstrates an effective approach to building feature-rich applications without the complexity of managing a custom backend infrastructure.