feat/opening and closing soon

.github/workflows/ci.yaml

@@ -0,0 +1,29 @@
+name: Push Docker Images
+
+on:
+  push:
+    branches: ["master"]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build and push frontend image
+        uses: docker/build-push-action@v5
+        with:
+          context: ./frontend
+          file: frontend/Dockerfile
+          push: true
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.DOCKERHUB_REPO }}:latest

.gitignore

@@ -0,0 +1 @@
+docker-compose.dev.test.yaml

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Akshar Barot
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,8 +1,13 @@
+<p align="center">
+  <img src="https://github.com/jaypyles/open-spots/blob/master/frontend/public/logo.png?raw=true" alt="Open Spots Logo"/>
+</p>
+
+
 # Open Spots
 
-**Open Spots** is a fork of [Spots](https://github.com/notAkki/spots) that is designed to help organization deliver real-time building availability data to staff, employees, customers, or students. Developers can create an API to deliver their own data to the Open Spots platform. This data can be visualized on an interactive map, and displayed available spots (rooms with time slots).
+**Open Spots** is a fork of [Spots](https://github.com/notAkki/spots) that is designed to help organizations deliver real-time building availability data to staff, employees, customers, or students. Developers can create an API to deliver their own data to the Open Spots platform. This data can be visualized on an interactive map, and display available spots (rooms with time slots).
 
-![alt text](SpotsDemoImage.png)
+![alt text](/docs/spots.png)
 
 ## Features
 
@@ -29,14 +34,16 @@
 
 ## API
 
-There are a few different variables that can be set in the `.env` file to customize Open Spots.
+There are a few different variables that can be set in the `/frontend/.env` file to customize Open Spots.
 
--   `API_URL`: The URL of the API that will be used to fetch spot data. **Required**
+-   `API_URL`: The URL of the API (with the endpoint) that will be used to fetch spot data. **Required**
 -   `NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN`: The Mapbox access token to be used for the map. **Required**
 -   `NEXT_PUBLIC_MAPBOX_STYLE_URL`: The Mapbox style URL to be used for the map. **Required**
 -   `NEXT_PUBLIC_STARTING_CENTER_COORDS`: The starting center coordinates to be used for the map. 
 -   `NEXT_PUBLIC_STARTING_ZOOM`: The starting zoom level to be used for the map. 
 -   `NEXT_PUBLIC_STARTING_PITCH`: The starting pitch level to be used for the map.
+-   `NEXT_PUBLIC_SITE_TITLE`: The title of the site to be used in the header.
+-   `NEXT_PUBLIC_SITE_DESCRIPTION`: The description of the site to be used in the header.
 
 Your API should return a JSON object with the following fields:
 
@@ -59,9 +66,16 @@ The slots data has the following fields:
 -   `EndTime`: The end time of the time slot.
 -   `Status`: The status of the time slot.  
 
-An example API response can be found in `backend/docs/example_api_response.json`.
+An example API response can be found in `docs/example_api_response.json`.
+
+The Open Spots API sends a POST (if the user has geolocation enabled) or GET request to the API URL set in the `/frontend/.env` file.
+
+The post request body is a JSON object with the following fields:
+
+-   `lat`: The latitude of the user's current location.
+-   `lng`: The longitude of the user's current location.
 
 ## Local Setup
 
 1. Install Docker and Docker Compose.
-2. Run `make build up` to start the frontend and backend services.
+2. Run `make up` to start Open Spots.

docker-compose.dev.yaml

@@ -1,7 +1,5 @@
 services:
   frontend:
-    ports:
-      - 3001:3000
     command: npm run dev
     volumes:
       - ./frontend/app:/app/app

docker-compose.yaml

@@ -1,9 +1,12 @@
 services:
   frontend:
-    container_name: spots-frontend
+    container_name: open-spots
     restart: unless-stopped 
     env_file: ./frontend/.env
+    image: jpyles0524/open-spots
     build:
       context: ./frontend
       dockerfile: Dockerfile
-    command: npm run start
+    command: npm run start
+    ports:
+      - 3000:3000

docs/example_api_response.json

@@ -0,0 +1,22 @@
+[
+  {
+    "building": "Your Building Name",
+    "building_code": "Your Building Code",
+    "building_status": "available",
+    "coords": [0, 0],
+    "distance": 0,
+    "distance_unit": "mi",
+    "rooms": [
+      {
+        "roomNumber": "Your Room Number",
+        "slots": [
+          {
+            "EndTime": "Your End Time",
+            "StartTime": "Your Start Time",
+            "Status": "Your Status"
+          }
+        ]
+      }
+    ]
+  }
+]

frontend/.env.template

@@ -1,3 +1,8 @@
-NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=
-NEXT_PUBLIC_MAPBOX_STYLE_URL=
-API_URL=
+NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=<YOUR_MAPBOX_ACCESS_TOKEN>
+NEXT_PUBLIC_MAPBOX_STYLE_URL=mapbox://styles/jpyles0524/cm2qof1hq00cp01qi2cd69r16
+NEXT_PUBLIC_STARTING_CENTER_COORDS=<YOUR_LONGITUDE>,<YOUR_LATITUDE>
+NEXT_PUBLIC_STARTING_ZOOM=<YOUR_ZOOM_LEVEL>
+NEXT_PUBLIC_STARTING_PITCH=<YOUR_PITCH_LEVEL>
+API_URL=<YOUR_API_URL>/<YOUR_API_ENDPOINT> # this will be the endpoint to receive data from your backend
+NEXT_PUBLIC_SITE_TITLE=<YOUR_SITE_TITLE>
+NEXT_PUBLIC_SITE_DESCRIPTION=<YOUR_SITE_DESCRIPTION>

frontend/README.md

@@ -3,14 +3,10 @@
 ## Local Development
 
 1. Install Docker and Docker Compose.
-2. Run `make build up-dev` to start the frontend and backend services.
+2. Run `make build up-dev` to start the frontend for local development. 
 
 ### Environment Variables
 
-- `NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN`: Mapbox access token.
-- `NEXT_PUBLIC_MAPBOX_STYLE_URL`: Mapbox style URL.
-- `API_URL`: API URL.
-
 Copy these into a `.env` file in the frontend directory using `.env.example` as a template.
 
 ```bash

frontend/app/page.tsx

@@ -95,7 +95,7 @@ export default function OpenSpots() {
             height={20}
             alt="Github"
           />
-          <a href="https://github.com/jaypyles/spots">Github</a>
+          <a href="https://github.com/jaypyles/open-spots">Github</a>
         </div>
       </div>
       <div className="h-[60vh] basis-3/5 sm:h-screen">