search

Journey-Into-Javascript / clerk-hashnode-hackathon-app

1 stars 1 forks source link

Designing the Project #3

Open BrianSpencerDev opened 2 years ago

BrianSpencerDev commented 2 years ago

As mentioned in #1 Friday will be our initial design deadline and no one person has to do all the designing unless they are up to the task.

Feel free to discuss design ideas whether it be front end or back end. You can also share your work in progress here for feedback.

madCakes commented 2 years ago

I should have some wireframes up this evening. Was thinking we'll need one for the following:

  1. Landing Page
  2. User Profile
  3. Feed
  4. Search
  5. Library

I've also got a list of core features and secondary features. I'll post them with the wireframes so we can see what we do and don't want.

madCakes commented 2 years ago

https://www.figma.com/file/89QANMOLB1UuNpIzIb47K4/Journey-into-JavaScript-Playlist-App?node-id=0%3A1

This is what I've played around with so far, it's only a landing page, but I haven't been keeping on top of Figma so I'm a bit slow. Nothing is concrete, typography, colour scheme etc. I'm open to any and all criticism :D

Edit: I also saw a video on a Spotify clone so I'll be looking at that this evening to see if there's anything relevant we can use

BrianSpencerDev commented 2 years ago

Not too worried about the details right now as long as we have a rough idea of what to build towards we should be good.

We can always figure out Typography and colors later.

The only comment I have is I think the welcome banner and sign up button are a bit big

madCakes commented 2 years ago

any recommendations on what to fill the space with? I didn't have many ideas for the landing page

madCakes commented 2 years ago

Core Features

Second Phase Features

Wanted to weigh in on features as I'm a bit slow this week so the ui stuff isn't flowing well

BrianSpencerDev commented 2 years ago

any recommendations on what to fill the space with? I didn't have many ideas for the landing page

I do like the having some sort of photo on the landing page idea you got going. I also really like the profile design so far

Another core feature would be the main dashboard/feed. Where you would see what others are sharing and would be ranked by votes. I think the "upvote" button should be the flame emoji so the feed is ranked by how "fire" something is lol

BrianSpencerDev commented 2 years ago

Second Phase Features

* Social Sign in - Users can use Twitter, Facebook and Google plus to login

Wanted to weigh in on features as I'm a bit slow this week so the ui stuff isn't flowing well

I don't think we need to worry too much about social sign ins with clerk though im not 100% sure on that. One thing we definitely should have though is spotify/applemusic/etc etc integration. People can connect there profiles to there favorite music platforms.

madCakes commented 2 years ago

I really like the flame idea, I'm pretty bad at coming up with things like that loool. I'll have a look around for icons. I'm trying to do one thing a day at least but I have no idea how long it would take to build something like this :s

BrianSpencerDev commented 2 years ago

As long as we have a decent idea of the general skeleton/structure so we can start coding by Monday we should be fine. We can refine things and small ideas like the flame emoji along the way.

Given the fact that this is a few week long hackathon and not some full app blown app we are developing, we don't need to have a robust map of each and every user flow but we should get our mvp down. So some user flows we should focus on are.

BrianSpencerDev commented 2 years ago

Lucky for us clerk provides the ui for signing up/logging in

BrianSpencerDev commented 2 years ago

These are some sketches I've done for some ideas for the dashboard

Sketch 1 image

Sketch 2 image

madCakes commented 2 years ago

I think I like Sketch 2 a little more, I'll get it done in Figma after I finish coaching tonight.

madCakes commented 2 years ago

I've done some of your suggestions, just need to move the navbar to the side and a few other things