/prismify-community

Prismify: Connect, Share, Discover - Your vibrant social media experience awaits!🎭📬

Primary LanguageTypeScript

Prismify is a cutting-edge social media web application developed using React.js and TypeScript, enhanced with Tailwind CSS. Users can effortlessly share moments, connect with friends, and explore content on any device thanks to its full responsiveness.

🧩Features

User Authentication

  • User registration and login with Appwrite.
  • Secure authentication mechanism using Appwrite's verified email users.

Profile Management

  • User profile creation and customization.
  • Profile picture upload and editing, bio and other profile information management.

Social Features

  • Like and save posts.
  • Explore page to discover new content and users.

Post Management

  • Create, edit, and delete posts.
  • Upload images with captions.
  • Drag and drop uploading of images for posts.
  • Ability to add hashtags to a post.

Explore Content

  • Explore page to discover trending and popular posts.
  • Discover new users and trending hashtags.
  • Customized content recommendations based on user interactions.

Search Functionality

  • Search posts by username, name, or content.

👨‍💻Technologies Used

  • ReactJS
  • TypeScript
  • React Router
  • React query
  • Vite
  • appwrite
  • Tailwind CSS

📝 Development Process

Began with establishing the backend infrastructure using Appwrite, creating essential functionalities such as user authentication, database management for user profiles and posts, and storage for media files.

Moving to the frontend development phase, I started by crafting user authentication flows, including sign-in and sign-up pages, leveraging Appwrite's authentication services.As I progressed, I designed and implemented the layout structure comprising the sidebar, Home Feed, Explore, Creat Post ensuring consistent navigation throughout the application. With these elements in place, users could easily navigate between different sections of the app.

I developed the functionality for creating posts, incorporating advanced features such as drag-and-drop image uploading.The home page was meticulously crafted to display user-specific posts and curated content from other users. Users gained the ability to interact with posts, including editing and deleting their own posts, fostering a dynamic and engaging user experience.

Throughout the development process, rigorous testing and debugging were conducted to ensure a seamless and error-free user experience. Finally, the deployment phase involved deploying the application to a hosting service and configuring production settings for optimal performance and reliability.

💭 How Can It Be Improved?

  • Follow Feature: Allow users to follow each other, enabling them to stay updated on each other's activities and posts.
  • Comment Section: Enable users to leave comments on posts, allowing them to engage in conversations and share their thoughts about the content.

🚦 Running the Project

To run the project in your local environment, follow these steps:

  1. Clone the repository to your local machine.
  2. Run npm install or yarn in the project directory to install the required dependencies.
  3. Run npm run start or yarn start to get the project started.
  4. Open http://localhost:5173 (or the address shown in your console) in your web browser to view the app.