-
Notifications
You must be signed in to change notification settings - Fork 0
/
ActionPlan.txt
124 lines (102 loc) · 4.24 KB
/
ActionPlan.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
=> download a good design from dribble
=> Get all the required assets (logo, images, etc)
=> plan the components
=> Setup react dom router
=> Setup tailwind css
=> Setup redux toolkit
=> Setup redux rtk query
=> Setup redux logger
=> Setup redux songQueue slice
=> Setup redux user slice
=> Setup firebase
=> Setup firebase auth
=> Setup firebase fireStore
Decisions:
=> For the design I fond lot of good ones on dribble, I m not finalizing on any one particular design I will be using bits and pieces of whatever I like and seems doable form each of the design. For now I see that aside looks good and provides a good user experience of music player applications.
so first building that, but before that I think I should setup react router and the pages that I will be using.
=> first I think I should setup the router and page structure, decide on the core features and start working on them one by one.
ok now so lets think of features now.
hm.. so what does a music player app have as features?
=> it plays music
=> it has a library of songs
=> it has a queue of songs
=> it has a playlist of songs
=> it has a search feature
=> it has a user profile
=> it has a user settings
=> it has a user library
=> it has a user playlist
=> it has a user queue
=> it has a user search history
=> it has a user recently played
=> it has a user liked songs
ok now lets think in terms of pages
=> home page
=> library page
=> queue aside on right
=> playlist page
=> album page
=> individual artist page
=> search page
=> user profile page
=> user settings page
Links I need to have on the navbar
=> user profile
=> user profile
=> user settings
=> Discover
=> home
=> search
=> Your collection
=> library
=> Recent
=> favorites
=> playlists
=> general
=> settings
=> logout (if logged in show this else show login)
ok now phase1 router setup done now need to test the router
then setup the redux store slice and redux RTK query apiSlice for napster api and firebase, also learn how to test redux slice.
and other react component also if possible. learn to setup
storyBook and how to make the components reusable and testable.
from webDev simplified youtube channel.
Task done:
router setup:
✅ => home page
✅ => playlist page
✅ => individual album page
✅ => individual artist page
✅ => search page
✅ => user profile page
✅ => user settings page
✅ => user recently played page
✅ => user liked songs page
@today 7 Aug 2023
Now lets proceed with the redux setup and the redux RTK query setup.
also setup the firebase auth and firestore setup.
ok now lets think in terms on data and state what change will effect what
first for RTK query setup I need to setup
the napster api slice and the
get popular albums,
get recently added songs
get popular artists
get specific artist songs
get specific album songs
get specific song
get popular playlists
get search results,
firebase slice. this slice contains
user data,
user recently played,
user liked songs,
user playlists,
user queue,
user current song,
user settings
learn how to test stuff in react with vite test
also setup the storybook for the components and learn how to make them reusable and testable.
also setup the apiSlice for napsater api learn how to test it.
@today 8 Aug 2023
What should I do? hmm..
I have already setup the slice for napster api tho haven't tested it I think I have also setup it for appData only the auth slice is remaining, the previously mentioned all are incomplete lets first complete the bare minimum store setup and then jump on to the aside coding with tailwind css. and the the navbar and the the Albums. loading convert it to a suspend loading and see if its working correctly.
aslo if possible uild the retractable