# Team ARLANDAR: DP4 High-fidelity Prototyping

## Table of contents

- [POV](#POV)
- [Target Users](#Target-Users)
- [Tasks](#Tasks)
- [Prototype](#Prototype)
- [Link to](#Link-to)
- [Libraries and Frameworks](#Libraries-and-Frameworks)
- [Representative screenshots](#Representative-screenshots)
- [Instructions](#Instructions)
- [Individual Reflections](#Individual-Reflections)
- [Mukhtar Kussaiynbekov](#Mukhtar-Kussaiynbekov)
- [Aidyn Aluadin](#Aidyn-Aluadin)
- [Nurlykhan Kopenov](#Nurlykhan-Kopenov)
- [Nurlykhan Kairly](#Nurlykhan-Kairly)
- [Studio Reflection](#Studio-Reflection)
- [Summary](#Summary)
- [Addressing](#Addressing)

## POV

**Aspiring Musicians** who are willing to showcase their talent **need** an effective method of reaching out to nearby people **because** that could ultimately promote their music, help communicate with their potential fans, and enable collaboration with other musicians as well

## Target Users

Musicians who need to share and advertise their events to nearby people (fans or potentially other musicians) in an easy and affordable way.

## Tasks
1. Create a new live performance on some date specifying its description and location in the form
1. Modify your playlist of any of your event (i.e: add or remove songs) and checkout whether there are music suggestions from others
1. Search for existing performances of other musicians and select one, and then ask the creator of event to collaborate

## Implementation Notes

### Link to
- Website:
- https://aeuen-deb1e.web.app/
- http://aeuen-deploy.s3-website.ap-northeast-2.amazonaws.com/ [Alternative]
- Github: https://github.com/IamNoPro/Aeuen

### Libraries and Frameworks
- Mapbox
- Google Places Autocomplete
- Bootstrap
- Material UI
- React
- Firebase
- React icons
- React Styled Components
- Create React App

### Representative screenshots
*Figure 1: Homepage of Aeuen*

*Figure 2: Sign Up Page*

*Figure 3: Process of creating a new event*

*Figure 4: Modifying your playlist*

*Figure 5: Sending a collaboration request to other performances*

### Instructions

- If you are new to the website, first register by going to sign-up page using "get started" button.
- After finishing each task go to the homepage by clicking "Aeuen" button on the top left corner, and start next task

- Task 1: Create a new live performance with some description and location
1) Go to "My Events" page or either click "Get Started button" in the homepage
3) Click "Create" button on the left side
4) Fill out the form
5) End of the Task 1, too see your event in the "My Events list" you should reload the page (due to the firebase problem)
- Task 2: Modify your playlist of any of your event (i.e: add or remove songs) and checkout whether there are music suggestions from others
1) First go to "My Events" page and you should see the list of your upcoming events
2) Click on the event that you want to modify personal playlist (any event that you see, for example: the event that you created in first task)
3) Click "Playlist" button to see your playlist and to modify it.
4) If you want, you can add songs or delete it.
5) After modifying playlist, see suggested music from other musicians. To do it, click "suggested" button on the left side
6) End of Task 2

- Task 3: Search for existing performances of other musicians and select one, and then ask the creator of event to collaborate
1. Click "Other Events" button and you should see events list of other musicians
2. See detailed view of other event created by other musician (For example "Tempo" by Elon Musk)
3. Ask for collaboration by clicking "Request" button
4. You can also try to suggest some songs to this event by clicking "Suggest song" button
5. End of the last task!

## Individual Reflections
### Mukhtar Kussaiynbekov
1. At the beginning, I implemented preview of user's events and event details. Afterwards, I worked on log in and sign up forms. Moreover, I contributed to UI interaction in suggesting a song, creating a playlist and adding suggested songs to the playlist.
2. After realizing that my teammate Aidyn worked on the same UI for other users' events and details, we decided to go with Aidyn's design since it was better suited for our needs. Hence, wasted effort and time were main repercussions. So, proper task allocation was challenging for me and my team.
3. The main implementation skill that I have acquired is not reinventing the wheel. Because I used my teammate's components, I achieved consistency in the design which I believe is crucial in developing a product. Furthermore, I learned about React Icons while working on this project which were used in my personal team project.

### Aidyn Aluadin
1. Mainly I was involved in the implementation of the display of the music events such as showing list of events and showing full information page about them. Also, I implemented the 'Request Collaboration' feature and designed the respective pop up windows and buttons
2. The main difficulty was to integrate Firebase into our project. Initially we only implemented the design and the general layout of website which was not so hard. However, when it came to the integration of Firebase I had to learn and use some Firebase APIs in order to fetch the data and show them correctly
3. I learned how to work with Firebase Firestore database and in particular how to [](https://)fetch them using Firestore's APIs as well as React's useEffect and useState hooks. Also, in some parts I had to use asynchronous functions which are Javascript's async/await features

### Nurlykhan Kopenov
1.  My part in this project was creating homepage for our website. For this, i have used react styled components,because it makes easier to change styling, and easy to implement
2.  One of the difficulties that i have faced, was to make dynamic homepage using Firebase auth function, so that when user logged-in the page,the homepage should show MyEvents button, whereas when logged-out "Get started" button
3.  I have learned how to connect to the Firebase, in particular fetching data,also how to use useState in more better way. In addition,i learned little bit more about styling using flexbox

### Nurlykhan Kairly
1. I mainly contributed to the Create Event, in particular, for DatePicker used Material UI, for the location show used Mapbox and also picture preview for the profile picture (sign up) and poster
2. The main difficulties was to choose between the style of the DatePicker as formats varied from Date range, Date&Time range, DateTime range. Also the alignment and loading of the picture preview. One of the final was to use Modals so as to provide pop-up and some optional views
3. I used Google Places Autocomplete to provide user suggestions for the location, React Modals, Firebase Firestore and Storage Upload of the Input Fields which were the most hardest parts

## Studio Reflection

### Summary
Overall, studio members liked that our web application has simple design, i.e. easy to learn and follow. Moreover, they complimented us for using various libraries to implement our app. Of course, there is still room for improvement and our studio members provided various suggestions on improving our implementation further.
- How to see events created by others? Is there a login function?
- I wish the user could view how it will be shown by others before uploading a new event.
- When user suggests a song, prevent suggesting an empty input.
- I wish the location picker could be a bit more specific(than google map which shows only broad location) because even though it shows the same location, it may be not seen well by the building, etc.
- I wish there are more functions or information in playlist.
- What about customizing a bit of used API to match ui with your style of your site(e.g. date picker).
- What if an artist has an urgent problem and wants to cancel it? I think it would be nice to have a delete or alarm to people who are interested in the concert.
- There are at least some mention about copyright of music.

### Addressing
- During live demo, I stated in the live demo that I have already signed in and can use the app's features. I have intentionally skipped authentication part since it is not the main task of our target users.
- Thanks for the wonderful suggestion. We would try to add the functionality in future iterations.
- We have already handled this edge case and user cannot submit unless he/she inputs something.
- We would try to reflect on your feedback.
- At the time of live demo presentation, we did not complete playlist feature. But we worked on the feature since then and added more functionalities.
- We would customize the design so that it is consistent throughout the page. We would likely consult our friends with design experience.
- Very thoughtful insight. We would consider adding this method in the future if we have time.
- Probably we would include a rule in app policy that would clearly specify that users of our app must provide reference to the songs they would perform.