UVA Water

Table of contents

• General Info
• Technologies
• Cloning
• Sample Images
• License

General Info

Website link: uvawater.net

UVA Water news article: https://dailyprogress.com/news/uva/new-student-developed-website-lets-you-review-uva-drinking-fountains/article_2a4e5730-a65b-11ed-9514-6f3450e7cd00.html

This website allows users to view ratings for water foutnains around grounds at UVA by clicking on markers displayed on a map. Users can also submit their own ratings via the rating form or any other kind of feedback via the contact form.

Technologies

Project created with:

• JavaScript
• HTML
• CSS
• Node.js
• Express.js
• MySQL
• PostgreSQL
• Google Maps API

Project hosted with:

• Netlify - Frontend hosting
• Cyclic - Backend hosting
• Render - Backend hosting
• PlanetScale - MySQL database hosting
• Neon - PostgreSQL database hosting

Cloning

1. Clone the repository
2. Download and install PostgreSQL on your machine with the default port of 5432
3. Create a database in PostgreSQL
4. Create a .env file in the server directory
5. Put the following into the .env file using your PostgreSQL credentials:

DATABASE_URL = "postgres://Your_PostgreSQL_username:Your_PostgreSQL_password@localhost:5432/Your_PostgreSQL_database_name"
PORT = "3000"

6. Create a file called env.js in the client directory
7. Put the following into env.js:

const BACKEND_URL = "https://localhost:3000"

8. Everything should be ready to work on your localhost!

Sample Images

Viewing ratings on the map

Submitting a water fountain rating

Giving feedback on the site

License

Distributed under the MIT License. See LICENSE for more information