arashnrim / sonar

🎵 The website for a fictitious music streaming app, completed as a school project.

👋 Hello world, I'm Arash!

I'm a student developer ardent about creating designed, intuitive, and practical products using technology. I find that to be a rather ambitious statement, and rightfully so; I have a long way to go before getting there, but every step towards it counts!

I find joy in seeing the code I write come alive in one way or another — whether it's seeing it visually or just a command-line interface, most things I do are pretty interesting to me. I mostly deal with front-end web development at the moment, but would also like to have a go at any other parts of development.

---

🛠 I'm using...

• JavaScript (in 8 projects)
• Python (in 8 projects)
• HTML (in 4 projects)
• Swift (in 3 projects)
• C# (in 3 projects)
• MDX (in 2 projects)
• Jupyter Notebook (in 2 projects)
• Java (in 2 projects)
• Go (in 1 project)
• TypeScript (in 1 project)
• Shell (in 1 project)
• Astro (in 1 project)
• Kotlin (in 1 project)

_{Last updated: 25 August 2024 — curious about this?}

---

I'm slowly trying to grow out of my comfort zone from time to time, and one way I do so is by reaching out to people I find inspiring. I'll also be glad to hear from you if you'd like to turn the tables and say hi instead!

We're all learners in one way or another, and I hope your stop here has been helpful. Thank you for stopping by; go on and create awesome things!

sonar's Issues

Create navigational components

The navigational components in this instance mainly refers to the header and the footer, the two of which will be used by the users to navigate throughout the website.

The header should fundamentally have a link back to the home page, alongside the common links to the other hard pages. The footer is placed at the bottom and may have more links (perhaps hypothetical ones too!).

Add wireframe

Since a requirement for this project is to also include a wireframe, it's suggested in the brief to include the wireframe in the project. Therefore, when possible, add your wireframe.

The wireframe should minimally include the skeletal layout on both desktop and mobile.

Complete experience page

The experience page outlines what the user can expect when they use Sonar as a service. Some things I think are apt to include as part of the page:

• Lyrics and background feature
• Advanced sound formats (surround sound and high quality sound formats!), probably inspired by TIDAL
• A masonry grid (similar to Apple's bento presentation style) that summarises what Sonar brings to the table

Complete pricing page

The pricing page lists out information about how much the cost is to use Sonar. Of course, since this is a fictitious product, I can go crazy with the prices. It's best to be realistic and keep it as such. Some ideas of what to include in the pricing page:

• An upfront and direct deck of cards displaying the plans
• A table of sorts showing the differences between the plans
• A form to contact for additional information or queries regarding pricing
• Frequently asked questions that are answerable with a short answer

Complete home page

The home page gives the user a brief introduction to what Sonar is as a service and entices them to learn more about the product while trying to engage them to sign up for the service. There are a few ideas that I thought of that can be implemented or looked at further:

• Giving rough snippets or summaries of the other pages (i.e., experiences and pricing)
• Giving interesting features or data about music that pulls the potential users' attention in

I can't remember much about my train of thought when designing the rough wireframe, unfortunately! I hope I'll be able to track down more ideas and update this issue when I do.