https://github.com/apfirebolt/document-viewer-in-react-and-django
A Document viewer full-stack application in React and Django
https://github.com/apfirebolt/document-viewer-in-react-and-django
django django-rest-framework document-viewer headlessui react tailwindcss
Last synced: 3 months ago
JSON representation
A Document viewer full-stack application in React and Django
- Host: GitHub
- URL: https://github.com/apfirebolt/document-viewer-in-react-and-django
- Owner: Apfirebolt
- License: mit
- Created: 2024-12-15T03:06:57.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-16T20:58:26.000Z (over 1 year ago)
- Last Synced: 2025-02-14T06:35:42.833Z (over 1 year ago)
- Topics: django, django-rest-framework, document-viewer, headlessui, react, tailwindcss
- Language: JavaScript
- Homepage:
- Size: 941 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://reactjs.org/)
# Document Viewer App in Django and React
This 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.
http://localhost:8000/api-docs/
The 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'.
## Getting Started - Backend (Python and Django)
* Create a new virtual environment and install packages specified in the requirements.txt file.
* 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.
* Make migrations when you're done with the database settings and migrate.
* Run python manage.py runserver, and the application should be running on port 8000 by default.
## Getting Started - Frontend (React, Tailwind and Javascript)
* Make sure Node and npm is installed on your system.
* Install the packages using
```
npm i
```
* Run in the development mode
```
npm run dev
```
* 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.
## Built With
* [Python Django](https://www.djangoproject.com/)
* [Django Rest Framework](https://www.django-rest-framework.org/)
* [Swagger Docs](https://swagger.io/)
* [Tailwind CSS](https://tailwindcss.com/)
## React and Django integration
I had to add static/assets.. to the build index.html generated by VITE.
```
Quiz App - WWTBAM
```
Modifications in the config file for React using Vite.
```
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
base: 'static',
server: {
port: 3000,
proxy: {
'/api': {
target: 'http://localhost:8000',
changeOrigin: true,
},
},
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
build: {
outDir: '../static/dist', // Output directory relative to Django's static directory
manifest: true, // Generate a manifest.json file for Django
assetsDir: 'static/assets',
emptyOutDir: true, // Clean the output directory before building
rollupOptions: {
input: {
main: './src/main.jsx', // Entry point of your React app
},
},
},
})
```
## Features
- User Registration
- Users can upload documents like txt, doc and images and share it with other users.
- Admin Panel is available.
- Security: The application implements authentication and authorization mechanisms to ensure secure access to user data and prevent unauthorized actions.
- Responsive Design: The application is designed to be responsive and accessible on different devices, including desktops, tablets, and mobile phones.