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.

🕹️ Stack

• Frontend : React Vite
• Backend : Django

Prerequisites

💻 Set up Virtual Environment

Using env (preferred)

• To create virtual environment:

  $ python3 -m venv env

• To activate virtual environment (Linux/Mac OS):

  $ 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)

⚛️ Test the Web Application

You can check whether everything is working by running both React and Django concurrently at your local development server:

$ npm start
$ python manage.py runserver

Applying tests

• Below is a separate preview for testing:

💻 Setting up Frontend part

• Install dependencies

pnpm install

• Start Development Server

pnpm dev

• Building the chrome extension for production

pnpm build

🚀 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.

⚛️ Preview of the app

• Here's a preview of different parts of the application: