This project is the web app version of Ogcisum made with ReactJS.

Overview

Ogcisum is a web app and a mobile app for a music and location based experience similar to Pokemon GO. This web app enables users to create music samples and share it to various locations.

Getting Started

Prerequisites

Make sure your machine has Docker installed and ready to use. Follow the documentation here to get started with Docker. Also, make sure to clone this repository into your local machine.

Since this project is only the front-end part, you have to set up the Haz API back-end app to try the features.

Running the App

Haz API local server

Before spinning up the web app, make sure to set up and run the Haz API back-end server.

Follow this documentation to start the local server.

Ogcisum Web App

To run the web app:

docker compose up -d

After the docker container status becomes running, you can access the app on http://localhost:3000.

To stop the web app:

docker compose down -v

Attention! Please delete the Docker Images generated by this project whenever there are changes in this project.

Features

1. See a list of samples that has been created.
2. Preview a sample in every page.
3. Create or edit a sample.
4. Share or unshare a sample with a location.
5. Dark mode according to the system's color scheme.
6. Support responsive layouts from mobile to desktop.

Pages

List of Samples page

Light mode
Dark mode
Responsive layout

• See a list of created samples.
• Go to Create page by clicking the Create button.
• Go to Edit page by clicking a sample's Edit button.
• Go to Share page by clicking a sample's Share button.
  • If a sample is shared to a location, the button text shows "Shared".
• Preview a sample by clicking its Preview button.

Create/Edit Sample page

Light mode
Dark mode
Responsive layout

• Create a sample by clicking the Bars.
• Give the sample a name by typing in the Text Input.
• Choose the instrument by clicking one of the instrument type Toggle Buttons.
• Preview the sample by clicking the Preview button.
• Save the sample by clicking the Save button.

Share / Unshare a sample

Light mode
Dark mode
Responsive layout

• Preview the sample by clicking the Preview button.
• Share / Unshare the sample by clicking the Toggle button.