ThirdPlace

ThirdPlace is an app dedicated to solving the loneliness epidemic. By offering a space for users to locate, share, and review third places, people can connect with their local communities in third places outside their homes and offices.

Tech Stack

• React
• JavaScript
• Java
• Spring / Spring Boot
• MySQL
• Bootstrap
• Google Maps API

Features

• External API Usage: Google Maps API provides address validation to prevent false address creation. The app also populates a Google Map displayed on listings to help interested users locate a space.
• Search and filter locations with custom parameters to find a third place near you.
• Autocomplete behavior on search fields for better user experience.

How to Use

Clone the repository

        https://github.com/ALLHUBS-Jan-2024-Liftoff/Cherry-Systems.git

In your terminal install npm dependencies

        npm install

Google Maps API Key Setup

A Google Maps API key is required.

On Google Cloud Console:

1. Acquire a key on your Google Cloud platform
2. Under Credentials, set your application restriction to "Websites" and add a website restriction of http://localhost:5173/*
3. Set API restriction to "Don't restrict key" and save your settings
4. Enable the following API libraries under APIs & Services:
   • Maps JavaScript API
   • Places API
   • Address Validation API

     In your local repo:

5. In ThirdPlace-UI (the front end code's directory), create a file with the name .env. Make sure you don't place this in the src directory.
6. Inside .env, paste this: VITE_GOOGLE_MAPS_API_KEY=value
7. Replace value with your API key from Google Maps API.

8. Open your .gitignore file. Insert a line for .env

   How to initialize SQL Database

   1. Create the database:
      • Open MySQL and initialize the database with the following commands:

   CREATE DATABASE IF NOT EXISTS ThirdPlace_db; USE ThirdPlace_db;

   2. Configure Application Properties:

      • Navigate to ThirdPlace-Backend/src/main/resources/application.properties

   3. Initialize the Schema and Seed Data:

      • Locate line 15, which reads spring.sql.init.mode=never.
      • Change it to spring.sql.init.mode=always to automatically initialize the schema and seed data when the backend application starts.

   4. Revert Initialization Setting:

      • After first initialization, change (spring.sql.init.mode=always) back to (spring.sql.init.mode=never).
      • You will only need to do this upon the initial setup, or when you want a fresh reset of your database.

   5. Execute Triggers

      • Navigate to ThirdPlace-Backend/src/main/resources/triggers.sql
      • Copy-and-paste the entire file into a new SQL tab in MySQL and execute it. This is necessary for back-end calculations of ratings and cherry points.

Register and Login a User

1. From the home page, click on the Sign Up Button to get to the Registration form and create a new user

2. Register a new user	3. After a new user is created, you will be directed to the Login page to login

4. After login, you will be directed back to the Home page where you have access to the Submit Location and Profile pages along with Logout button

User Profile

• See your Cherry Score on your Profile Info Card, when you engage with locations you receive points that accumulate here. Receive 10 points for submitting a new Location, 5 points for reviewing an existing location, and 1 point for giving a existing submission a thumbs up or down.

Without Points	With Points