TravelNet is a full-stack social networking platform built for travelers. It enables users to connect with friends, share travel experiences through posts, join groups, chat in real-time, and receive notifications. Whether you're planning a trip or sharing memories from one, TravelNet brings the global community of travelers together.
- Sign up, login, and password reset via email
- Secure JWT-based authentication flow
- Role-based access control (guest, user, admin)
- Create, edit, and delete posts
- Upload and display images using Cloudinary
- Like, comment, share and save posts
- Send and manage friend requests
- Create and join public/private groups
- Extended controls for the group creator
- Real-time notifications (likes, comments, friend requests, group actions)
- Live chat between friends using Socket.io
- Search users by name, age, or location
- Search groups by name, description, or privacy type (public/private)
- Search posts by content, author, or creation date
- Manage users, posts, and groups
- Visual statistics using D3.js
travel-social-network/
├── Backend/
│ ├── src/
│ │ ├── config/ # Configuration files (DB, cloudinary, etc.)
│ │ ├── controllers/ # Route logic handlers
│ │ ├── middlewares/ # Custom Express middlewares
│ │ ├── models/ # Mongoose schema definitions
│ │ ├── routes/ # API route declarations
│ │ ├── services/ # Business logic and utilities
│ │ ├── sockets/ # Socket.io handlers
│ │ └── app.js # Express app setup
│ ├── server.js # App entry point
│ ├── package.json # Backend metadata and dependencies
│ └── .env # Environment variables (not committed)
│
├── Frontend/
│ ├── public/ # Static assets
│ ├── src/
│ │ ├── components/ # Reusable React components
│ │ ├── contexts/ # React context providers
│ │ ├── css/ # Global styles
│ │ ├── layouts/ # Page layout wrappers
│ │ ├── pages/ # Main pages (Profile, Home, etc.)
│ │ ├── services/ # Axios/jQuery API functions
│ │ ├── App.js # Main App component
│ │ ├── AppRouter.js # Routing configuration
│ │ └── index.js # Entry point
│ └── package.json # Frontend metadata and dependencies
│
├── README.md # Project documentation
- Node.js + Express – Backend runtime and server framework
- MongoDB – NoSQL database
- Socket.io – Real-time features (chat, notifications)
- Cloudinary – Image storage
- Gmail SMTP – Email sending (password resets, summaries)
- React – UI components and logic
- React Router – Navigation
- jQuery (AJAX) – API communication
- CSS – Styling and layout
- dotenv – Loads environment variables from
.env - D3.js – Data visualization (graphs)
git clone <repository-url>
cd travel-social-network# === 🌐 Server ===
PORT=4000
# === 🗄️ Database ===
MONGO_URI=mongodb+srv://<username>:<password>@<cluster-name>.mongodb.net/travelnet_db?retryWrites=true&w=majority
# === 🔐 Auth ===
JWT_SECRET=your_custom_jwt_secret_here
# === 📩 Email ===
EMAIL_USER=your_email_address@gmail.com
EMAIL_PASS=your_app_password_here
# === ☁️ Cloudinary ===
CLOUDINARY_CLOUD_NAME=your_cloud_name_here
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret
⚠️ Important: Do NOT commit the.envfile to Git. Keep it private.
To generate a secure secret key for token encryption, run:
node -e "console.log(require('crypto').randomBytes(64).toString('hex'))"Copy the generated value and paste it in JWT_SECRET.
- Go to https://cloud.mongodb.com and log in or sign up
- Create a new project and cluster (you can use the free tier)
- Go to Database > Connect > Drivers, and copy the connection string:
mongodb+srv://<username>:<password>@<cluster-name>.mongodb.net/travelnet_db?retryWrites=true&w=majority
- Replace
<username>,<password>, and<cluster-name>with your actual credentials - Paste the result into
MONGO_URI
- Go to Google My Account
- Enable 2-Step Verification if not already enabled
- Under Security, go to App Passwords
- Generate a new app password for "Other" app:
TravelNet - Paste the 16-digit code into
EMAIL_PASS - Use your Gmail address in
EMAIL_USER
-
Go to https://cloudinary.com/console and log in
-
Under the Dashboard, locate:
- Cloud name →
CLOUDINARY_CLOUD_NAME - API Key →
CLOUDINARY_API_KEY - API Secret →
CLOUDINARY_API_SECRET
- Cloud name →
- 🖥️ Start Backend
cd Backend
npm install
npm start- 🌐 In a new terminal, start Frontend
cd Frontend
npm install
npm startThis will start:
✅ Backend (Express) - http://localhost:4000
✅ Frontend (React) - http://localhost:3000
TravelNet empowers travelers to share, connect, and explore through a modern social platform tailored for adventurers. Whether you're looking to join a travel group, post unforgettable memories, or chat with fellow explorers – TravelNet provides a seamless experience to enhance your travel journey.
Feel free to contribute, report issues, or suggest new features to improve the platform for everyone. 🌍
Built by Lian Cohen ❤️