Skip to content

sepetowski/kivi

Repository files navigation

Kivi - soclial app for gamers! 🎮

Kivi is a full resposnive social media application designed for gamers. Users can fully customize their profiles, where they can change their name, description, background image, and avatar. Additionally, users can follow other users and browse their profiles. On the profile page, you can find information about the user's added posts, liked posts, and their memberships in communities and games they play.

When it comes to games, Kivi offers an extensive database of titles from which users can browse and add them to their collection. This enables them to share their gaming preferences with other players. Each user can also create their own communities or join existing ones, where they can post content. Community founders have complete control over their content, including the ability to change the community's image, name, and description, or delete the community entirely.

Every post in the Kivi app can be rated by other users, who can like or dislike it, as well as leave comments. While creating posts in the Kivi app, users can also add photos, which adds visual appeal to their content. The post's author has the option to delete or edit their entry, and editing will display information about the edit. The comment system works similarly, with users able to react with "like" or "dislike" to each comment and respond to them. Comment authors can edit or delete their comments as well.

In addition to these features, Kivi also allows real-time messaging, enabling users to chat with each other in real-time. Furthermore, users can set their preferred theme from a palette of 12 different colors, giving them the freedom to customize their app experience according to their preferences.

Kivi also features a real-time notification system, allowing users to stay updated on interactions and messages. Users can search for other players through the "Explore" tab and manage their search history, deciding whether to delete individual queries or the entire history.

Furthermore, users have the option to save posts of interest in the "Saved" section, where they can store their favorite content. The Kivi app efficiently utilizes data fetching while scrolling, ensuring smooth usage of its features. Kivi is the perfect platform for gamers to share their passions, gain inspiration, and build communities.

Also Kivi allows you to choose between a dark or light theme and adapts seamlessly to your system settings.

Live 🌐

Create an account and start using Kivi - social app for gamers. Join now!

Features 🎇

Authentication

  • You can sing in with credentials, google, github
  • JWT

User Profile Customization:

  • Changing the username.
  • Modifying the profile description.
  • Changing the background image.
  • Changing the avatar.

Profile Page Information:

  • Displaying added posts.
  • Displaying liked posts.
  • Membership in communities and games.
  • Extensive game database for browsing and adding to one's collection.
  • Ability to follow other users

Creating and joining user communities:

  • Posting content within communities.
  • Full control for community founders over its content.

Posts:

  • Liking and disliking posts.
  • Commenting on posts.
  • Editing and deleting one's own posts.
  • Ability to add images to posts.
  • Ability to save posts

Messages:

  • Real-time conversations.
  • Selection of a preferred theme from a palette of 12 different colors.

Notifications:

  • Real-time notifications system

Searching for other users in the "Explore" tab:

  • Managing search history.

Infinite scroll:

  • Fetching new data only if needed

Responsive design

  • RWD
  • The application seamlessly adjusts to various screen sizes, ensuring optimal user experience on both small, medium and large screens.

Theme system

  • You can choose beetwen light and dark theme. Deafult one is your system theme

I built it with ⚙️

  • Next 13 (app dir)
  • React
  • TypeScript
  • Prisma
  • Supabase
  • NextAuth
  • Pusher
  • TanStack Query (React Query)
  • Tailwindcss
  • Shadcn/ui

Viedos 🎥

Real time conversations

conversation.mp4

Real time notifications

real-time.notifications.mp4

Screenshots 🎮

Large screens

cookies singin home home-white comment comment-edit profle profile-edit profile-communities profile-games explore explore-2 other-user-profile communities created-communities new-community messages conversation conversation-2 notifications notifications-read games pagination new-post loading

Small screens