🗺️ TravelGram — Explore & Share Beautiful Places

A social map-based photo-sharing platform where travelers connect, share experiences, and discover the world through each other's lens.

---

🚀 Project Overview

TravelGram blends social networking with travel exploration, creating an interactive platform where every photo tells a story and every location sparks wanderlust.

Users can authenticate with Google, upload stunning travel photos, and pin them to exact locations on an interactive world map. Each post becomes part of a global tapestry of experiences—viewable both as a dynamic feed and as markers on a Mapbox-powered map.

Whether you're sharing your latest adventure or discovering hidden gems through others' journeys, TravelGram transforms travel memories into an engaging, visual experience.

---

✨ Features

Feature	Description
🔐 Google Authentication	Seamless sign-in via Supabase Auth
🖼️ Photo Uploads	Secure storage with Supabase Storage
🗺️ Interactive Map	Clickable location markers powered by Mapbox GL JS
💬 Rich Posts	Captions, place tags, and geolocation data
❤️ Like System	Appreciate and engage with other travelers
🕓 Smart Timestamps	Relative time display (e.g., "5 minutes ago")
⚡ Blazing Fast	Next.js App Router with optimized performance
🌐 Production Ready	Fully deployable on Vercel

---

🧰 Tech Stack

Category	Technologies
Frontend	Next.js 15 (App Router), React, TypeScript, Tailwind CSS
Backend	Supabase (PostgreSQL, Auth, Storage, Realtime)
Map Integration	Mapbox GL JS, react-map-gl
State Management	SWR for data fetching & caching
Utilities	clsx, dayjs

---

⚙️ Setup Instructions

1️⃣ Clone the Repository

git clone https://github.com/nishatayub/Projecttttt.git
cd Projecttttt/trial-mode

2️⃣ Install Dependencies

npm install

3️⃣ Set Up Environment Variables

Create a .env.local file in the root directory:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
NEXT_PUBLIC_MAPBOX_TOKEN=your_mapbox_access_token

🔑 Obtain your keys:

• Supabase: Dashboard → Settings → API
• Mapbox: Account → Access tokens

4️⃣ Database Setup

Execute the following SQL in your Supabase SQL Editor:

-- Create profiles table
create table profiles (
  id uuid references auth.users on delete cascade primary key,
  username text,
  avatar_url text,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null
);

-- Create posts table
create table posts (
  id bigint generated by default as identity primary key,
  user_id uuid references auth.users not null,
  image_path text not null,
  image_url text not null,
  caption text,
  place_name text,
  lat double precision,
  lng double precision,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null
);

-- Create likes table
create table likes (
  id bigint generated by default as identity primary key,
  user_id uuid references auth.users on delete cascade,
  post_id bigint references posts on delete cascade,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null,
  unique (user_id, post_id)
);

-- Enable Row Level Security
alter table profiles enable row level security;
alter table posts enable row level security;
alter table likes enable row level security;

-- Policies
create policy "Public profiles are viewable by everyone"
  on profiles for select
  using ( true );

create policy "Users can update own profile"
  on profiles for update
  using ( auth.uid() = id );

create policy "Posts are viewable by everyone"
  on posts for select
  using ( true );

create policy "Users can create own posts"
  on posts for insert
  with check ( auth.uid() = user_id );

create policy "Users can delete own posts"
  on posts for delete
  using ( auth.uid() = user_id );

create policy "Likes are viewable by everyone"
  on likes for select
  using ( true );

create policy "Users can manage own likes"
  on likes for all
  using ( auth.uid() = user_id );

5️⃣ Configure Supabase Storage

1. Go to Storage in your Supabase dashboard
2. Create a new bucket called travel-photos
3. Set it to Public

6️⃣ Start Development Server

npm run dev

🎉 Visit: http://localhost:3000

---

📁 Folder Structure

trial-mode/
├── app/
│   ├── page.tsx              # Home page with post feed
│   ├── layout.tsx            # Root layout with auth provider
│   └── globals.css           # Global styles
├── components/
│   ├── AuthButtons.tsx       # Google sign-in/sign-out
│   ├── NewPostForm.tsx       # Photo upload form
│   ├── PostCard.tsx          # Individual post display
│   └── MapView.tsx           # Interactive Mapbox map
├── lib/
│   ├── supabaseClient.ts     # Client-side Supabase
│   └── supabaseAdmin.ts      # Server-side Supabase
├── public/
│   └── assets/               # Static images & icons
├── .env.local                # Environment variables
├── next.config.ts            # Next.js configuration
├── tailwind.config.ts        # Tailwind CSS config
└── tsconfig.json             # TypeScript config

---

🔮 Future Enhancements

• 🗨️ Comments System — Engage in conversations on posts
• 👥 Follow/Unfollow — Build your travel community
• 🧭 Location Search — Find posts by specific places
• 🕒 Realtime Updates — See new posts as they happen
• 📍 Trip Routes — Visualize complete travel journeys
• 🌈 User Profiles — Showcase personal travel history
• 🌙 Dark Mode — Eye-friendly theme options
• 📱 Mobile App — Native iOS & Android experience
• 🔔 Notifications — Stay updated on likes and comments
• 🏆 Achievements — Gamify travel experiences

---

🌍 Deployment

Deploy effortlessly on Vercel:

1. Push your code to GitHub
2. Import the repository in Vercel
3. Add environment variables in project settings
4. Deploy! 🚀

---

👩‍💻 Author

Nishat Ayub
Frontend Developer & UI/UX Designer

---

📄 License

This project is open source and available under the MIT License.

---

🙏 Acknowledgments

• Supabase for the incredible backend infrastructure
• Mapbox for stunning map visualizations
• Vercel for seamless deployment
• The open-source community for amazing tools and inspiration

---

Built with ❤️ and a passion for travel
Happy exploring! 🌍✈️📸