Full-stack-economic-website

Full stack website that predicts Water Quality at a given location in the Lower Mekong River Basin. Angular frontend and Django backend. User authentication, RESTful API usage, and database implementation. This website could be used to store, publish, and view WQ data in the designated area.

Implementation

Backend:
The backend is built using django (python) which contians three RESTful APIs for user interaction. This implements django rest framework and cors headers. Also, the backend uses an SQLite database to store user information and further used by the website.

Frontend:
The frontend is built using the Angular Framework which uses HTML, CSS, TypeScript, and other frontend languages. This website also makes use of bootstrap for frontend styling.

Firstly, the user is met with a login system and cookie acceptance message:


Next, the user is taken to the main page with information:


Then the user may use the simulator page to search through publicly accessible data or create a new dataset. This has an AJAX search method implemented using a data API.


Next, is the create page where users can input WQ variable levels to simulate water quality throughout the river. This has an interactive map using an SVG.


Once the template has been created it can be save publicly or privately


Finally, there is a profile page where users can view their private data that they saved and see their user information.

Here is a quick view of the backend RESTful API

Languages, frameworks, and Libraries used

• Angular
• HTML
• CSS
• TypeScript
• JavaScript
• JSON
• Bootstrap
• Django
• Python
• SQL
• django_rest_framework
• django_cors_headers