https://github.com/kumaranhk/urlshortner
A simple URL Shortener application built with React, Material-UI, Axios, Node js, ExpressJS, MongoDB. Users can shorten URLs, copy them, and manage their links with ease.
https://github.com/kumaranhk/urlshortner
axios expressjs mongodb mongoose mui nodejs passportjs reactjs rest-api
Last synced: 3 months ago
JSON representation
A simple URL Shortener application built with React, Material-UI, Axios, Node js, ExpressJS, MongoDB. Users can shorten URLs, copy them, and manage their links with ease.
- Host: GitHub
- URL: https://github.com/kumaranhk/urlshortner
- Owner: kumaranhk
- Created: 2025-03-02T13:05:18.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-03T05:38:18.000Z (over 1 year ago)
- Last Synced: 2026-01-03T14:32:52.472Z (6 months ago)
- Topics: axios, expressjs, mongodb, mongoose, mui, nodejs, passportjs, reactjs, rest-api
- Language: JavaScript
- Homepage: https://tiny-gaufre-1f5cce.netlify.app/
- Size: 287 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# URL Shortener
This is a full-stack URL Shortener application built using the MERN (MongoDB, Express.js, React, Node.js) stack. It allows users to shorten long URLs, manage their shortened links, and authenticate using Google SSO.
## Features
- Shorten long URLs
- Redirect to original URL using the shortened version
- Copy shortened URLs to clipboard
- Google Sign-In for authentication
- View and delete previously shortened URLs
## Screenshots
### Login Page
### Home Page
## Technologies Used
### Frontend
- React
- Material-UI
- React Router
- Axios
### Backend
- Node.js
- Express.js
- MongoDB & Mongoose
- Passport.js (Google OAuth)
- Cors & Cookie-Session
## Setup
### Prerequisites
- Node.js & npm
- MongoDB (local or cloud)
### Installation
#### 1. Clone the repository
```sh
git clone https://github.com/kumaranhk/urlShortner.git
```
#### 2. Backend Setup
```sh
cd url-shortener/server
npm install
```
Create a `.env` file in the `backend` directory:
```sh
touch .env
nano .env
```
Add the following variables:
```env
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
SESSION_SECRET=your_session_secret
FRONTEND_URL=your_frontend_url
GOOGLE_CALLBACK_URL=your_google_callback_url
PORT=4000
SERVER_URL=backend_url
NODE_ENV=production || dev
MONGOOSE_URI=mongodb://127.0.0.1:27017/your_db_name
```
Start the backend server:
```sh
npm start
```
#### 3. Frontend Setup
```sh
cd ../client
npm install
```
Create a `.env` file in the `frontend` directory:
```sh
touch .env
nano .env
```
Add the following:
```env
VITE_BACKEND_URL=http://localhost:4000
```
Start the frontend server:
```sh
npm run dev
```