Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sarwirr/react-django-extension
Developed a Chrome extension called "TaskMaster" that helps users manage their tasks and time in a fun way, inspired by role-playing game (RPG) mechanics.
https://github.com/sarwirr/react-django-extension
api django django-rest-framework dockerfile extension-chrome react vite
Last synced: 10 days ago
JSON representation
Developed a Chrome extension called "TaskMaster" that helps users manage their tasks and time in a fun way, inspired by role-playing game (RPG) mechanics.
- Host: GitHub
- URL: https://github.com/sarwirr/react-django-extension
- Owner: sarwirr
- Created: 2024-11-03T23:28:25.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2024-12-10T12:58:36.000Z (2 months ago)
- Last Synced: 2024-12-10T13:41:45.698Z (2 months ago)
- Topics: api, django, django-rest-framework, dockerfile, extension-chrome, react, vite
- Language: Python
- Homepage:
- Size: 17.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-django-extension
## 🎮 Description
- Developed a Chrome extension called "TaskMaster" that helps users manage their tasks and time in a fun way, inspired by role-playing game (RPG) mechanics.
## :joystick: Stack
- Frontend : React Vite
- Backend : Django
## Prerequisites
### :computer: Set up Virtual Environment
Using **env** (preferred)
- To **create** virtual environment:
```Shell
$ python3 -m venv env
```
- To **activate** virtual environment (Linux/Mac OS):
```Shell
$ source env/bin/activate
```
## Setting up the Backend
### Install dependencies
Run the following command inside your virtual environment:
```
- Using **env**:
```Shell
$ pip install -r requirements.txt # (Python 2)
$ pip3 install -r requirements.txt # (Python 3)
```
### :atom_symbol: Test the Web Application
You can check whether everything is working by **running both React and Django concurrently** at your local development server:
```Shell
$ npm start
$ python manage.py runserver
```
## Applying tests
- Below is a separate preview for testing:
## :computer: Setting up Frontend part
- Install dependencies
```
pnpm install
```
- Start Development Server
```
pnpm dev
```
- Building the chrome extension for production
```
pnpm build
```
## :rocket: Usage
- You can find the chrome extension contents in the `dist` folder
- Open `chrome://extension` and turn on Developer Mode.
- Click the `Load unpacked extension` button.
- Now, select the `dist` folder.
- Your extension is ready to use.
## :atom_symbol: Preview of the app
- Here's a preview of different parts of the application:
