gw3i / capstone-project

⚡️ About Me

Hey, I'm Vlady! 👋

const name = 'Vlady';  
let age = 28;
const loving = ['coding', 'food', 'travelling', 'surfing', 'snowboarding', 'skateboarding'];
const techStack = ['HTML', 'CSS/SASS', 'JavaScript', 'Angular', 'React', 'Node.js', 'Next.js', 'SQL', 'NoSQL', 'Jest', 'Testing-Library', 'Tailwind', 'Bootstrap', 'Agile Workflow'];

LinkedIn 🚀

💻 Tech Stack:

📊 GitHub Stats:

🏆 GitHub Trophies

✍️ Random Dev Quote

---

capstone-project's Issues

#10 Add categories to edit form

Value Proposition

As a user
I want to edit the category of the video
So that I can change the category, if it was chosen falsely

Description

Acceptance Criteria

• A dropdown is showing all categories
• The edit form has a dropdown to choose the category
• The changed category is displayed on the edited video

Tasks

• Add dropdown to the edit form
• Add the changed category to the edited video

Complexity

S

#20 Responsive Design

Value Proposition

As a user
I want to have a great visual experience on different devices
So that I can use the app more with more visual pleasure

Description

The app will have a pleasurable appearance on all devices

Acceptance Criteria

• The app is looking good on different devices

Tasks

• Add media queries at breakpoints (375px, 576px, 768px, 992px, 1200px)
• Change styling at breakpoints

Complexity

L

#5 Edit video card title

Value Proposition

As a user
I want to edit the video card title
So that I can change the title, if there is a typo or misunderstandings

Description

Acceptance Criteria

• Each card has an edit button on the top-right corner
• Clicking on the button opens an edit page
• On the edit page is a form and a headline("Edit video title")
• The edit form includes an input field for the video card's title
• The field is filled with the respective value of this video card
• Add validation to the input field
• There is a cancel button that redirects back to the home page
• After submitting the form, the updated video card title is saved persistently
• After submitting the form, the user is redirected to home page

Tasks

• Add a edit icon at top-right of every video card
• Add OnClick function redirecting to edit page
• Add edit page with a form and headline
• Add Cancel and Submit button
• Handle state of the input field to show previous value
• Write tests to check if the the buttons redirecting to home page
• Write tests to check if the previous value is shown in the input fiel
• Write tests to check if the video title was updated

Complexity

XL

#7 Bookmark videos

Value Proposition

As a user
I want to bookmark videos
So that I can rewatch them later

Description

Acceptance Criteria

• Bookmark icon is on each video
• Clicking on bookmark button shows filled bookmark icon
• Bookmarks page with all bookmarked videos
• Clicking on bookmark button shows the video on the bookmarks page
• Clicking on bookmarked a video the video is no longer bookmarked and is removed from bookmarks page

Tasks

• Add bookmark icon to each video
• Reposition the delete, edit and bookmark icons
• Add bookmark page
• Add bookmark icon to navbar and link to bookmarks page
• Create function to show bookmarked videos on bookmarks page
• Add more dummy data to Store to display more videos for more variety

Complexity

L

#15 Add confirmation message after added video

Value Proposition

As a user
I want to have a visual feedback after clicking on the Add button
So that I can be sure, the video was added

Description

Acceptance Criteria

• Confirmation text is shown after clicking on the Add button
• After clicking on the Add button, the button for that videos is disabled
• After a few seconds, the text box disappears

Tasks

• Add text box with confirmation text
• Add function that the text box disappears after a few seconds
• Add function to disable the button

Complexity

XS

#22 Add components to Storybook

Value Proposition

As a developer
I want to I want to see the variate of components in Storybook
So that I can quickly see which components to use

Description

The components are in Storybook visible

Acceptance Criteria

• Component variates are visible in Storybook

Tasks

• Add styled components to Storybook

Complexity

L

#1 Create a new Video Card

Value Proposition

As a user
I want to add a new video card to the feed
So that I can increase the variety of videos for my kid

Description

Acceptance Criteria

• An input field for the YouTube video link is displayed (label: "YouTube link")
• An input field for the video title is displayed (label: "Video title")
• A submit button is displayed
• All form fields are required
• After submitting the form, the title and link are displayed at the end list of all entries

Tasks

• Create a Form component with two input fields
• Add a submit button to the form
• Create a StyledForm component
• Create a StyledInput component
• Create a StyledButton component
• Add state handling (with zustand.js)
• Add submitted input to stored data variable in zustand
• Add event.preventDefault() to the form submit
• Create form validation
• Write tests to check the form validation
• Write tests to check if the video was added to the list

Complexity

XL

#18 Redesign Channel playlists

Value Proposition

As a user
I want to have a user friendly experience while searching for a channel playlist
So that I can more easily choose playlists and add videos

Description

Acceptance Criteria

• Another channel page with all playlists
• The playlists are horizontally scrollable
• When adding a video a module pops up to ask for a category the video should assigned to
• When module pops up, the background gets darker
• The number of playlists is displayed

Tasks

• Create a new page for a channel and it's playlists
• Add horizontal scroll to playlists
• Create module to ask for category
• Assign category to related video
• Add overlay while category module is visible
• Count number of playlists and display them
• Add back button

Complexity

XL

#3 Add navigation

Value Proposition

As a user
I want to see a navigation
So that I can switch between the create page and the home page

Description

Acceptance Criteria

• When clicking on a nav button, change the page belonging to the button
• When clicking on a nav button, the icon is filled and the other is unfilled
• The navbar sticks to the bottom of the viewport
• The titles of the respective pages are at the top

Tasks

• Create a Navbar component
• Add icons and titles to navbar
• Fix the navbar at the bottom of the viewport
• Add onClick function to toggle between filled and unfilled
• Add function to switch between pages
• Add page titles
• Write test to check if onClick the respective page is shown
• Write test to check if onClick the icon is filled and other unfilled

Complexity

L

#21 Add tests

Value Proposition

As a developer
I want to i want to test components
So that I can be sure that they are working properly

Description

Test components like, buttons, confirmation messages, modals, forms and video rendering

Acceptance Criteria

• The tests are passing

Tasks

• Test buttons
• Test forms
• Test modals
• Test video rendering

Complexity

XL

#16 Create fake login for parents

Value Proposition

As a user
I want to have a login for parents
So that only parents can add, delete and edit videos

Description

Acceptance Criteria

• A login form
• If Username and Password are correct the user will be logged in
• A create account form
• User can only create account if is 18 or older
• After a new account was created, will be redirected and can log in
• After creating an account, the user will be redirected to login page
• After creating an account, a confirmation message pops up
• After login, the user will be redirected to the Create Page
• Just logged-in user can add, edit and delete videos

Tasks

• Create Create Account Page
• Create Login Page
• Create Login component
• Create Login form
• Create Create Account form
• Validate Forms
• Create Store for user data
• Check if user is logged in
• Add conditions if user is logged-in, he can add, edit or delete videos

Complexity

XXL

#11 Explore categories

Value Proposition

As a user
I want to browse through categories
So that I can see all videos related to a category

Description

Acceptance Criteria

• Explore page shows all categories
• The navbar has an explore icon linked to the explore page
• Videos belonging to each related category are shown on the explore page
• The videos are a smaller version showing just the title
• For each category, the videos can be scrolled horizontally
• Clicking on a video, the user will be redirected to a feed with all videos related to the category and showing the clicked video at the top

Tasks

• Create an explore page
• Add explore icon to the navbar and link to the explore page
• Show all categories on the explore page
• Create a Categories component
• Filter videos to show in the related category on explore page
• Create horizontal scroll for categorized videos
• Create a category feed page ([id].js) to show all videos related to the category like in the home feed

Complexity

XXL

#8 Add cancel button to edit form

Value Proposition

As a user
I want to cancel the edit form
So that I can go back to the home page if I changed my mind about editing

Description

Acceptance Criteria

• Cancel button on edit form
• On click redirects back to home page

Tasks

• Add cancel button to edit form
• Add function to redirect back to home page
• Position cancel and delete buttons

Complexity

S

#14 Redesign Playlist component

Value Proposition

As a user
I want to see a playlist displaying all related videos with thumbnails, titles and URLs
So that I can see the difference between the videos

Description

Acceptance Criteria

• The playlist displays all videos of the selected playlist
• The video details are shown at each video

Tasks

• Create PlaylistVideoCard component
• Display PlaylistVideoCard for each video in the playlist
• Display details of the videos in PlaylistVideoCard

Complexity

M

#2 Display video cards

Value Proposition

As a user
I want to see all my submitted videos in my feed
So that I can watch a variety of videos in one place

Description

Acceptance Criteria

• The video card is displayed
• The video starts playing when the play button is clicked
• The video stops playing when clicking on the video or using the video player controls
• The video's title is displayed
• A link on the home page is displayed redirecting to the create page
• A link on the create page is displayed redirecting to the home page

Tasks

• Create VideoCard component
• Render the VideoCard component on the index page
• Take the submitted data from form and render it in the card component
• Render YouTube link to show in the card
• Render the title to show in the bottom left of the card
• Add links to pages
• Write tests to check if the video is rendered on the index page
• Write tests to check if the video is playing
• Write tests to check if the video's title is showing

Complexity

L

#17 Add category tags to explore page

Value Proposition

As a user
I want to see all category at a glance
So that I can choose the category that I want see videos to

Description

Acceptance Criteria

• All categories are displayed as tags
• The categories can be scrolled horizontally
• Clicking on a category to all videos of the category

Tasks

• Add container for scrolling tags horizontally
• Map through all tags and display them
• On click redirect to feed with videos related to the category

Complexity

M

#4 Delete video card

Value Proposition

As a user
I want to delete videos in my feed
So that I won't see them in my feed anymore

Description

Acceptance Criteria

• On click on the delete button, a popup is displayed to confirm the delete
• The data for the video card will be deleted as well

Tasks

• Add a delete icon at top-right of every video card
• Add onClick function to delete the video card
• Add popup with question text, cancel button and delete button
• Write test to check if the video card is deleted after clicking on delete button
• Write test to check if the popup is showing after clicking on delete button

Complexity

L

#14 Add playlist video to feed

Value Proposition

As a user
I want to to add a video from the playlist to the feed
So that watch them in the feed

Description

Acceptance Criteria

• Each video in the playlist has a category dropdown and an Add button
• The category is required
• On Add button click the video is displayed in the feed

Tasks

• Add category dropdown to each PlaylistVideoCard
• Add Add button to each PlaylistVideoCard
• Validate the form
• Add onSubmit function to submit data to Store and display in feed

Complexity

M

#19 Add styling

Value Proposition

As a user
I want to have a great visual experience
So that I can use the app more with more visual pleasure

Description

The app will have a pleasurable appearance.

Acceptance Criteria

• The app is looking good

Tasks

• Add styling
• Add Typography component
• Add Global Styling
• Add transitions to playlist videos

Complexity

XL

#9 Add categories

Value Proposition

As a user
I want to have videos categories
So that I can differentiate them by category

Description

Acceptance Criteria

• The form has a dropdown to choose the category
• The category is displayed on each video

Tasks

• Add dropdown to form
• Add category to each VideoCard

Complexity

S

#6 Add confirmation text after submit

Value Proposition

As a user
I want to have a visual feedback after submitting my form
So that I can be sure, the video was added

Description

Acceptance Criteria

• Confirmation text is shown after submitting the form
• After a few seconds, the text box disappears

Tasks

• Add text box with confirmation text
• Write function that the text box disappears after a few seconds
• Delete list showing title and url

Complexity

S

#12 Add confirmation text after submit of edit form

Value Proposition

As a user
I want to have a visual feedback after submitting my edit form
So that I can be sure, the video was edited

Description

Acceptance Criteria

• Confirmation text is shown after submitting the edit form
• After a few seconds, the text box disappears

Tasks

• Add text box with confirmation text
• Add function that the text box disappears after a few seconds

Complexity

XS

#13 Search for YouTube playlist

Value Proposition

As a user
I want to search for a YouTube channel to get its playlists
So that I can see each playlist and the titles and URLs of the videos in a playlist

Description

Acceptance Criteria

• Input field with search bar
• Clicking on the Search button, all playlists of a specific channel are shown
• The URLs and titles of the videos in the playlist are shown as a list

Tasks

• Create a new form with input field and search button
• Fetch YouTube Data API v3
• onSubmit search for channel and retrieve channel ID
• Fetch with the channel ID for playlists
• Fetch with the playlist ID for all playlist videos
• Get all video IDs
• Interpolate video IDs into YouTube embed link
• Create YouTubePlaylists component
• Display interpolated links and video titles in YouTubePlaylists
• Show YouTubePlaylists on the create page after submitting on the Search button

Complexity

XXL