Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/auriorajaa/link_shortener

A modern web application for shortening URLs built with Django REST Framework and React.js. This project provides a simple and efficient way to create shortened URLs with custom slugs, track click analytics, and manage your links through a clean user interface built with Chakra UI.
https://github.com/auriorajaa/link_shortener

auriorajaa chakra-ui django-rest-framework djangorestframework drf drf-jwt full-stack-web-development react reactjs sqlite

Last synced: 10 days ago
JSON representation

Host: GitHub
URL: https://github.com/auriorajaa/link_shortener
Owner: auriorajaa
License: mit
Created: 2025-01-15T03:51:24.000Z (13 days ago)
Default Branch: main
Last Pushed: 2025-01-15T06:13:47.000Z (12 days ago)
Last Synced: 2025-01-15T08:16:18.148Z (12 days ago)
Topics: auriorajaa, chakra-ui, django-rest-framework, djangorestframework, drf, drf-jwt, full-stack-web-development, react, reactjs, sqlite
Language: JavaScript
Homepage:
Size: 266 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Link Shortener

## OverView

## 🚀 Features

- User authentication with JWT (Simple JWT)
- Create shortened URLs with custom slugs
- Track link click analytics
- Responsive UI built with Chakra UI
- RESTful API with Django REST Framework
- SQLite database for easy setup

## 📋 Prerequisites

Before you begin, ensure you have the following installed:
- Python (3.8 or higher)
- Node.js (14.0 or higher)
- npm (6.0 or higher)
- Git

## 🛠 Installation

### Backend Setup

1. Clone the repository
```bash
git clone https://github.com/auriorajaa/link_shortener.git
cd link_shortener
```

2. Create and activate virtual environment
```bash
# Windows
python -m venv venv
venv\Scripts\activate

# Linux/MacOS
python3 -m venv venv
source venv/bin/activate
```

3. Install Python dependencies
```bash
cd backend
pip install -r requirements.txt
```

4. Setup database
```bash
cd main
python manage.py migrate
```

5. Create superuser (admin)
```bash
python manage.py createsuperuser
```

6. Start the Django development server
```bash
python manage.py runserver
```

The backend server will start at `http://localhost:8000`

### Frontend Setup

1. Navigate to the frontend directory from the project root
```bash
cd frontend
```

2. Install dependencies
```bash
npm install
```

3. Start the development server
```bash
npm start
```

The frontend application will start at `http://localhost:3000`

## 🏗 Project Structure

```
link_shortener/
├── backend/
│ └── main/
│ ├── main/
│ │ ├── settings.py
│ │ ├── urls.py
│ │ └── wsgi.py
│ ├── linkshortener/
│ │ ├── models.py
│ │ ├── views.py
│ │ ├── urls.py
│ │ └── serializers.py
│ ├── myuser/
│ │ ├── models.py
│ │ ├── views.py
│ │ ├── urls.py
│ │ └── serializers.py
│ └── manage.py
└── frontend/
├── package.json
├── public/
└── src/
```

## ⚙️ Backend Dependencies

The backend uses several key Django packages:
- Django REST Framework
- djangorestframework-simplejwt
- django-cors-headers

These are all included in the `requirements.txt` file.

## 🔧 Frontend Dependencies

Key frontend packages include:
- @chakra-ui/react: ^2.8.2
- react-router-dom: ^7.1.1
- jwt-decode: ^4.0.0
- framer-motion: ^6.5.1

## 🔒 Authentication

The application uses JWT (JSON Web Tokens) for authentication with the following configuration:
- Access token lifetime: 3 days
- Refresh token lifetime: 5 days
- Custom token serializer: `myuser.serializers.MyTokenObtainPairSerializer`

## 🌐 CORS Configuration

CORS is enabled for all origins in development mode. This is configured in `settings.py`:
```python
CORS_ALLOW_ALL_ORIGINS = True
```

## 💻 Development

### Running the Backend
```bash
cd backend/main
python manage.py runserver
```

### Running the Frontend
```bash
cd frontend
npm start
```

The application uses a proxy configuration to forward API requests to the backend:
```json
{
"proxy": "http://localhost:8000"
}
```

## ⚠️ Troubleshooting

1. **CORS Issues**
- Ensure the Django server is running on port 8000
- Check that `CORS_ALLOW_ALL_ORIGINS = True` is set in settings.py
- Verify the proxy setting in frontend's package.json

2. **JWT Authentication Issues**
- Check token expiration times in settings.py
- Ensure you're using the correct token format in requests
- Verify SIMPLE_JWT settings in Django settings

3. **Database Issues**
- Make sure all migrations are applied
- Check if db.sqlite3 file exists and has proper permissions

## 🤝 Contributing

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## 📝 License

This project is licensed under the MIT License.

## 👥 Author

- Aurio Raja - [GitHub](https://github.com/auriorajaa)