https://github.com/bhiogade/jsonviewer

Web application built using Django, React & Postgres to login and upload & display JSON
https://github.com/bhiogade/jsonviewer

Last synced: 16 days ago
JSON representation

Web application built using Django, React & Postgres to login and upload & display JSON

• Host: GitHub
• URL: https://github.com/bhiogade/jsonviewer
• Owner: bhiogade
• Created: 2021-08-14T13:30:04.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-08-14T15:01:52.000Z (about 3 years ago)
• Last Synced: 2023-10-30T10:32:53.866Z (about 1 year ago)
• Language: JavaScript
• Size: 872 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# JsonViewer

Web application built using Django, React & Postgres to login and upload & display JSON

## Getting Started

### Setting Frontend

Navigate to frontend directory and run

1. Install dependencies `npm install`

2. Start frontend Server `npm start`. This will start frontend on the address [localhost:3000](http://localhost:3000)

### Setting Backend

Navigate to backend directory and run

1. Install dependencies `pip install -r requirements.txt`

2. Setting Postgres

   ![DB & USER CREATION](assets/db.png)

3. Django migrations `python manage.py makemigrations` and `python manage.py migrate`

4. Start backend Server `python manage.py runserver`

## Application Screenshots

Login Page.

![1](assets/sign_in_page.png)

SignUp Page. User can sign up using this page

![2](assets/sign_up_page.png)

Once the user login, the following page loads

![3](assets/page.png)

User clicks on `Upload Data` button, a popup comes up for uploading the file

![4](assets/upload.png)

Alert message: When file is uploaded

![5](assets/successfully_mess.png)

Alert message: When filetype is not Supported

![6](assets/file_type_not_supported_mess.png)

Alert message: When corrupt JSON is uploaded

![7](assets/bad_file.png)

Alert message: When Data is saved successfully to DB when user clicks on Sumbit button

![8](assets/data_save_mess.png)

User can view the data by clicking on `View Data` button. Users can also filter and sort table rows.

![9](assets/view_data.png)