{"id":23383078,"url":"https://github.com/apfirebolt/document-viewer-in-react-and-django","last_synced_at":"2026-04-02T18:53:51.480Z","repository":{"id":268201446,"uuid":"903600743","full_name":"Apfirebolt/document-viewer-in-react-and-django","owner":"Apfirebolt","description":"A Document viewer full-stack application in React and Django","archived":false,"fork":false,"pushed_at":"2024-12-16T20:58:26.000Z","size":964,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-14T06:35:42.833Z","etag":null,"topics":["django","django-rest-framework","document-viewer","headlessui","react","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Apfirebolt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-15T03:06:57.000Z","updated_at":"2024-12-16T20:58:29.000Z","dependencies_parsed_at":"2024-12-15T06:23:24.616Z","dependency_job_id":"14352515-9d26-45a8-8a28-726394512273","html_url":"https://github.com/Apfirebolt/document-viewer-in-react-and-django","commit_stats":null,"previous_names":["apfirebolt/document-viewer-in-react-and-django"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2Fdocument-viewer-in-react-and-django","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2Fdocument-viewer-in-react-and-django/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2Fdocument-viewer-in-react-and-django/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2Fdocument-viewer-in-react-and-django/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Apfirebolt","download_url":"https://codeload.github.com/Apfirebolt/document-viewer-in-react-and-django/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247812984,"owners_count":21000406,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["django","django-rest-framework","document-viewer","headlessui","react","tailwindcss"],"created_at":"2024-12-21T22:17:08.185Z","updated_at":"2025-12-30T23:05:30.696Z","avatar_url":"https://github.com/Apfirebolt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Python](https://img.shields.io/badge/python-3670A0?style=for-the-badge\u0026logo=python\u0026logoColor=ffdd54)\n![Django](https://img.shields.io/badge/Django-092E20?style=for-the-badge\u0026logo=django\u0026logoColor=green)\n![Django Rest Framework](https://img.shields.io/badge/django%20rest-ff1709?style=for-the-badge\u0026logo=django\u0026logoColor=white)\n[![React](https://img.shields.io/badge/-React-%2361DAFB?style=for-the-badge\u0026logo=react\u0026logoColor=white)](https://reactjs.org/)\n![JavaScript](https://img.shields.io/badge/javascript-F7DF1E?style=for-the-badge\u0026logo=javascript\u0026logoColor=black)\n![Swagger](https://img.shields.io/badge/-Swagger-%23Clojure?style=for-the-badge\u0026logo=swagger\u0026logoColor=white)\n![Tailwind CSS](https://img.shields.io/badge/-Tailwind%20CSS-%2338B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white)\n\n# Document Viewer App in Django and React\n\nThis is a document viewer app which supports multiple types of documents and has a user authentication system built with some security features and also include feature to share documents with other users.\n\nhttp://localhost:8000/api-docs/\n\nThe API docs can be viewed using the above link. Swagger is used to generate API docs under the hood using a package called 'drf_spectacular'.\n\n## Getting Started - Backend (Python and Django)\n\n* Create a new virtual environment and install packages specified in the requirements.txt file.\n\n* Hook in your database of choice, make necessary database changes in the settings.py file inside the project folder. Obviously, some familiarity with Django folder structures is required for this. By default this project uses MySQL as database.\n\n* Make migrations when you're done with the database settings and migrate.\n* Run python manage.py runserver, and the application should be running on port 8000 by default.\n\n## Getting Started - Frontend (React, Tailwind and Javascript)\n\n* Make sure Node and npm is installed on your system.\n\n* Install the packages using \n\n```\nnpm i\n```\n\n* Run in the development mode \n\n```\nnpm run dev\n```\n\n* The project uses Vite as the bundler instead of web-pack. Configure Tailwind CSS and Headless UI which are used to power UI components used in this application like sidebar for mobile view, modals and more.\n\n## Built With\n\n* [Python Django](https://www.djangoproject.com/)\n* [Django Rest Framework](https://www.django-rest-framework.org/)\n* [Swagger Docs](https://swagger.io/)\n* [Tailwind CSS](https://tailwindcss.com/)\n\n## React and Django integration\n\nI had to add static/assets.. to the build index.html generated by VITE.\n\n```\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003clink rel=\"icon\" type=\"image/svg+xml\" href=\"/vite.svg\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003eQuiz App - WWTBAM\u003c/title\u003e\n    \u003cscript type=\"module\" crossorigin src=\"static/assets/index-2hhwCVwV.js\"\u003e\u003c/script\u003e\n    \u003clink rel=\"stylesheet\" crossorigin href=\"static/assets/index-WC5UIqtt.css\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n\n```\n\nModifications in the config file for React using Vite.\n\n```\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [react()],\n  base: 'static', \n  server: {\n    port: 3000,\n    proxy: {\n      '/api': {\n        target: 'http://localhost:8000',\n        changeOrigin: true,\n      },\n    },\n  },\n  resolve: {\n    extensions: ['.js', '.jsx', '.ts', '.tsx'],\n  },\n  build: {\n    outDir: '../static/dist', // Output directory relative to Django's static directory\n    manifest: true, // Generate a manifest.json file for Django\n    assetsDir: 'static/assets',\n    emptyOutDir: true, // Clean the output directory before building\n    rollupOptions: {\n      input: {\n        main: './src/main.jsx', // Entry point of your React app\n      },\n    },\n  },\n})\n\n```\n\n\n## Features \n\n- User Registration\n\n- Users can upload documents like txt, doc and images and share it with other users.\n\n- Admin Panel is available.\n\n- Security: The application implements authentication and authorization mechanisms to ensure secure access to user data and prevent unauthorized actions.\n\n- Responsive Design: The application is designed to be responsive and accessible on different devices, including desktops, tablets, and mobile phones.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapfirebolt%2Fdocument-viewer-in-react-and-django","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapfirebolt%2Fdocument-viewer-in-react-and-django","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapfirebolt%2Fdocument-viewer-in-react-and-django/lists"}