Louligram

Overview

Louligram is a feature-rich social media application inspired by Instagram, allowing users to share, like, save, and explore posts. It provides a beautiful dark & light theme, smooth UI, and secure authentication. Powered by Next.js, React, Hono.js, and Appwrite, Louligram ensures a modern and scalable experience.

Features

✅ User Authentication – Secure sign-up and sign-in with Appwrite.
✅ Post Interaction – Create, like, save, and explore posts easily.
✅ Follow System – Follow and connect with other users.
✅ User Profiles – View personal and public profiles with followers.
✅ Dynamic Theming – Switch between light and dark mode.
✅ Full Responsiveness – Works seamlessly on mobile and desktop.

Tech Stack

• Frontend: React, Tailwind CSS, React Context React Query
• Backend, Database & Auth: Appwrite

Installation & Setup

Prerequisites

Ensure you have Node.js, npm, and an Appwrite instance set up.

1. Clone the Repository

git clone https://github.com/Louai-Zokerburg/louligram-social-media-app.git
cd louligram-social-media-app

2. Install Dependencies

npm install

3. Configure Appwrite

1. Log in to Appwrite Console and create a new project.

2. Set up the database and collections:

   • Database Name: louligram-db
   • Collections:
     • users
     • posts
     • saves

3. Define Collection Attributes:

   Saves Collection:

   Property	Type
   user	Relationship (User)
   post	Relationship (Post)

   Posts Collection:

   Property	Type
   creator	Relationship (User)
   likes	Relationship (Users)
   caption	String
   tags	Array (String)
   imageUrl	URL
   imageId	String
   location	String
   saves	Relationship (Saves)

   Indexes for Efficient Search:

   Key	Type	Attributes	Order
   caption	Fulltext	caption	DESC

4. Set Up Environment Variables

Create a .env.local file and add the following:

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

5. Start the Development Server

npm run dev

6. Open the App

Visit http://localhost:5173 in your browser.

Usage Guide

1. Sign Up or Log In – Create an account or log in.
2. Explore Posts – Browse posts from other users.
3. Follow Users – Connect with people by following them.
4. Create & Like Posts – Share content and interact with posts.
5. Save Posts – Bookmark posts for later viewing.

Enjoy using Louligram – A modern, open-source social media experience! 🚀