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
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
To get a local copy up and running follow these simple steps.
The following list of things are required to use the software:
- npm
npm install npm@latest -g
- Docker
- 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
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:stopThe 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
- 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).
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!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE.txt for more information.
- Christina Mifsud - LinkdIn - [email protected]
- Delnia Alipour - LinkdIn - [email protected]
- Irianni Munoz - LinkdIn - [email protected]
- Man Sang Sin - LinkdIn - [email protected]
Project Link: https://github.com/ManSangSin/Rhythm-Code