Postify

Postify is a cutting-edge social media platform designed to provide users with a seamless and engaging experience. It features secure file management, optimized API performance, and a stunning UI with a native mobile feel. The platform incorporates an infinite scroll feature, special text stack, and delivers amazing performance.

Features

• User Authentication: Secure account creation, sign-in, and sign-out functionalities.
• Post Management: Create, edit, and delete posts with text and images.
• Like and Save Posts: Interact with posts by liking and saving them to your profile.
• Search Functionality: Discover posts by searching for keywords.
• Recent Posts: Stay updated with the latest posts on the platform.
• Infinite Scroll: Smooth infinite scrolling for an uninterrupted user experience.
• Optimized Performance: Enhanced API performance and efficient data handling.
• Stunning UI: A robust and visually appealing UI with a native mobile feel.

Technologies Used

• Frontend:
  • React.js
  • TypeScript
  • Tailwind CSS
  • Shadcnui
  • React Context API
  • React Router with outlets and conditional rendering
• Backend:
  • Appwrite (Backend as a Service)
• Data Fetching:
  • React Query (TanStack Query) (v5.0) for auto caching, refetching, parallel queries, first-class mutations, and loading state management.

Getting Started

1. Clone the repository:

   git clone https://github.com/your-username/postify.git

2. Install dependencies:

   cd postify
   npm install

3. Set up environment variables:

   Create a .env file in the root directory and add the following variables:

   REACT_APP_API_BASE_URL=http://localhost:5000/api  # Replace with your backend API URL
   REACT_APP_APPWRITE_PROJECT_ID=your-appwrite-project-id  # Replace with your Appwrite Project ID
   REACT_APP_APPWRITE_ENDPOINT=your-appwrite-endpoint  # Replace with your Appwrite Endpoint
   

4. Run the application:

   npm start

5. Visit the application:

   Open http://localhost:3000 in your browser to view the application.

Folder Structure

• src
  • components: Reusable UI components
  • contexts: React Context for state management
  • hooks: Custom hooks for data fetching and other utilities
  • pages: Different page components for the application
  • services: API service functions
  • styles: Global and component-specific styles
  • utils: Utility functions and constants

Acknowledgements

• Appwrite
• React.js
• Tailwind CSS
• Shadcnui
• React Query
• React Router

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list