https://github.com/mudasarmajeed5/links-hub
Linkshub is a sleek and modern link management platform, built with TypeScript and powered by a MongoDB backend. It offers smooth API integration, making it an ideal alternative to platforms like Beacons.ai and Linktree.
https://github.com/mudasarmajeed5/links-hub
cloudinary mern mongoose monolithic-architecture nextjs15 pwa react19 zustand
Last synced: 3 months ago
JSON representation
Linkshub is a sleek and modern link management platform, built with TypeScript and powered by a MongoDB backend. It offers smooth API integration, making it an ideal alternative to platforms like Beacons.ai and Linktree.
- Host: GitHub
- URL: https://github.com/mudasarmajeed5/links-hub
- Owner: mudasarmajeed5
- License: other
- Created: 2025-01-27T21:42:50.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-05T17:02:14.000Z (10 months ago)
- Last Synced: 2025-08-05T19:05:36.192Z (10 months ago)
- Topics: cloudinary, mern, mongoose, monolithic-architecture, nextjs15, pwa, react19, zustand
- Language: TypeScript
- Homepage: https://linkshub.space
- Size: 9.32 MB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Links Hub
A **Next.js** application for managing and sharing links. This project uses **MongoDB**, **NextAuth**, and **Cloudinary** for authentication, database, and media storage.
## 🚀 Getting Started
### 1. Clone the Repository
```sh
git clone https://github.com/mudasarmajeed5/links-hub.git
cd links-hub
```
### 2. Install Dependencies
If you haven't installed dependencies, run:
```sh
npm install
```
### 3. Create the `.env.local` File
In your project's root directory (where `package.json` is located), create a new file named **.env.local** and add the following content:
```ini
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
GOOGLE_CLIENT_SECRET=your_google_client_secret
GOOGLE_CLIENT_ID=your_google_client_id
NEXTAUTH_SECRET=your_random_secret
MONGODB_URI=your_mongodb_atlas_connection_uri
NEXTAUTH_URL=http://localhost:3000
GITHUB_SECRET=your_github_client_secret
GITHUB_ID=your_github_client_id
```
#### How to Get These Keys:
- **Cloudinary:**
- Sign up at [Cloudinary](https://cloudinary.com/).
- Go to the **Dashboard** to find your **Cloud Name**.
- **Google OAuth (Google Client ID & Secret):**
- Go to [Google Cloud Console](https://console.cloud.google.com/).
- Create a new project and navigate to **APIs & Services > Credentials**.
- Create **OAuth 2.0 credentials** and get your **GOOGLE_CLIENT_ID** and **GOOGLE_CLIENT_SECRET**.
- Set the **Authorized redirect URIs** to:
```
http://localhost:3000/api/auth/callback/google
```
- Set the **Homepage URL** to:
```
http://localhost:3000
```
- **NextAuth Secret:**
- Use a strong, random string (e.g., from [RandomKeygen](https://randomkeygen.com)).
- **MongoDB URI:**
- Sign up at [MongoDB Atlas](https://www.mongodb.com/cloud/atlas).
- Create a new **cluster** and get the **connection string**, replacing `` and `` as needed.
- **GitHub OAuth (GitHub ID & Secret):**
- Go to [GitHub Developer Settings](https://github.com/settings/developers).
- Create a **new OAuth app** and set the **callback URL** to:
```
http://localhost:3000/api/auth/callback/github
```
- Set the **Homepage URL** to:
```
http://localhost:3000
```
- Copy the **Client ID** and **Client Secret**.
### 4. Start the Development Server
```sh
npm run dev
```
Open [localhost:3000](http://localhost:3000) in your browser.
## 🛠Technologies Used
- **Next.js** - React framework for server-side rendering
- **MongoDB Atlas** - NoSQL database
- **NextAuth.js** - Authentication with Google and GitHub
- **Cloudinary** - Image hosting and management
- **Tailwind CSS** - Styling framework
## 📜 License
This project is open-source and available under the **MIT License**.
---
Now you're all set to run the project! 🚀