ManSangSin/Rhythm-Code - Githubissues

Rhythm Code

A Joint project with Deirdre Malloy to showcase the origins of rhythms and the African Atlantic Diaspora
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

About The Project
- Built With
Getting Started
- Prerequisites
- Installation
Usage
Roadmap
Contributing
License
Contact
Acknowledgments

About The Project

We are building a unique and interactive multimedia map website that serves as a visual representation of the diverse and complex rhythms originating from various geographical locations. This innovative website aims to cater to both curious listeners and experienced rhythm enthusiasts by providing a user-friendly platform to explore, interact with, and learn about the various rhythms from around the world.

To ensure the website's technical functionality, we will employ the following technologies:

Frontend: React for building a dynamic and responsive user interface. Backend: Node.js and Express for implementing a robust and efficient server-side framework. Database: PostgreSQL for securely storing and managing the website's data. Hosting: Render for seamlessly deploying and hosting the website on the cloud.

By leveraging these cutting-edge technologies, the Our Rhythms team will be able to create a captivating and engaging online experience that caters to the specific needs and interests of rhythm aficionados worldwide. Users will be able to interact with the website in a variety of ways, such as:

Exploring an interactive multimedia map that visualizes the origins of different rhythms. Clicking on markers/pins on the map to view a list of related rhythms. Clicking on individual rhythms to access a modal that displays relevant media content and additional information. With a responsive design that works seamlessly on both mobile and desktop layouts, the Our Rhythms website will cater to a diverse audience and ensure an optimal user experience, regardless of the device or platform being used.

By harnessing the power of the internet and the wealth of knowledge available online, the Our Rhythms team aims to create a truly revolutionary website that serves as a dynamic and comprehensive platform for exploring, learning about, and appreciating the diverse and fascinating world of rhythms

(back to top)

Built With

(back to top)

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

The following list of things are required to use the software:

npm
```
npm install npm@latest -g
```
Docker

Installation

Clone the repo

git clone https://github.com/ManSangSin/Rhythm-Code.git

Install NPM packages
```
npm install
```
Create .env at the root of repo
Enter database url in .env

DB_URL = "postgres://postgres:opensesame@localhost:5432/cyf"

You are ready to run the project locally

Running the project locally

To Start:

Start Docker Desktop (or Docker Engine)
Run npm startup script

   npm run dev

Open your browser and go to localhost

  http://localhost:3000/

To Stop:

Send SIGINT signal

  ctrl + c

Run npm shutdown script for Docker (Docker needs to be stopped seperately)

  npm run docker:stop

(back to top)

Usage

The seed file, "build-rhythms.sql", will contain the data necessary to populate the PostgreSQL database with information on each rhythm code. The data will be stored in a table named "rhythms" with columns for id, title, url, and location.

To deploy the local SQL database, we will use a standalone Docker container. Docker Desktop will be required to run the Docker container.

To add a new marker location to the map, the x and y data for the desired location must be obtained. This data is relative to the SVG map plane and will be used to plot the new marker.

The process of finding the id of a specific dot on the map will involve inspecting the website's source code using the browser's developer tools. The id is then used to populate the "map_id" field in the rhythm_codes table. The following set of instructions will walk you through the process.

Adding a new marker location to the map:

The markers are plotted inside a svg therefore the x and y data required to plot the markers needs to be relative to the svg map plane
Each dot on the map is an individual element and holds its own x and y data which is relative to the map (and also holds other data such as id)
We will use this data to plot the new marker
A query selector is used with the id to get the data of the specific dot we want our marker to be placed on, which is then parsed using a regex to retrieve the relevent data (x and y)
This is already setup provided a map_id (id of the dot) is stated.

Finding id of specific dot:

Open the website homepage and use inspect on your chosen browser
Use the select element tool and click over the map area
A transparent overlay will be selected called "foreignObject" (the layer which the markers are placed on)
This needs to be removed so that the dots under the transparent layer can be selected
To remove the layer, right clicking on the elements panel and select "delete element"
This is not permenant and the overlay will be reloaded when the page is refreshed
Use the select element tool again and now select the dot which you wish to place the new marker on
This will show the dot details including the id

Adding id to database:

The id is used inside the rhythm_codes table
when adding a new row of data, map_id will be set to the id of the dot we want

(back to top)

Roadmap

[ ] Add migration arrows
[ ] Make map responsive
[ ] Add more Data
[ ] Deployment issues

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!