melggit / capstone-project

PodPal

Final project for neuefische web dev bootcamp

Description

An app for listening, finding and enjoying your favorite podcasts

This app gives you the opportunity to listen to your favorite podcasts. It also alleviates the process of finding new inspiring ones. You can search through the whole catalog by specific categories or specify your own search. Enjoy each podcast with an easy to use audio player.

Demo

You can find the hosted version on vercel: This demo is optimized for mobile screens. Demo Version

Tech Stack

• React
• React Hooks
• React Router
• Axios
• Vercel
  • Authentication
  • Serverless Functions
  • Hosting
• PropTypes
• Styled Components
• Storybook
• React Testing Library
• Jest
• Cypress Component Tests
• Recoil
• Node.js
• Web Audio Api

Project setup

1. Clone this repository.

2. Install all npm dependencies

   npm install

3. To run the app in development mode npm start, then open http://localhost:3000 to view it in the browser

4. To run Storybook npm run storybook

5. To run unit and component tests npm test

6. To run Cypress tests npm run cypress

7. Create a build ready for deployment to firebase npm run build

capstone-project's Issues

Create Serverless Rest Api

Acceptance criteria

• you can get data from api call

Tasks

• create rest api

nav bar

As a user
I want to be able to switch conveniently between pages
so that i can see search and favorites

Description (Text, Scribble, Wireframe, Design)

Acceptance criteria

• should have active and inactive states
• depending on the page the user is on that page gets disabled in the menu

Tasks

• navigation
• create logic

Size

medium

Podcast List (User Sory)

Value statement - a requirement, not a solution

As a user
I need to be able to see a list of podcasts about space
so that i get a nice overview about what is available.

Description (Text, Scribble, Wireframe, Design)

Acceptance criteria

• implement test data from json
• image and title of a card should be clearly visible

Tasks

• create Card component with img and title parameter
• add Card to App component
• fetch in App component
• render as many cards as there are podcasts json resulting from the fetch
• write test for Card component
• style Card component
• style App component

Size

(small)

(User-Story) Main Menu

As a user
I want to be able to see the top podcasts on one view so that i can inspire myself.

Description (Text, Scribble, Wireframe, Design)

Acceptance criteria

• navigation has main page as new route
• the top podcasts get fetched by api
• when clicking on a podcast it gets expanded like the others on the search result page
• when clicking on anything but the expanded podcast it shrinks
• should be horizontally scollable

Tasks

• navigtion
• create new component for curatedPodcasts
• implement logic for router and podcast
• implement side scoll

Size

medium

Template

Value statement - a requirement, not a solution

As a (role)
I need (an action)
so that (a benefit)

Description (Text, Scribble, Wireframe, Design)

Acceptance criteria

• (functional descriptions)

Tasks

• (todos for the team)

Size

(small, medium, large)

Get more Information for a podcast on click (User Story)

As a user
I want to get more information to a specific podcast
so that i can determine if it fits my needs.

Description (Text, Scribble, Wireframe, Design)

Acceptance criteria

• the podcast Card should expand on Click
• the card should shrink back when clicking on it
• the tags should be the categories delivered by the fetch

Tasks

• update Card with an onClick event to expand
• update Card to incorporate description categories and author
• set those new addiitons to be hidden by default
• onClick those additions should be visible
• when clicking on the openend Card the card should shrink

Size

medium

Template

---

name: User Story
about: A default user story
title: "(Short name)"
labels: ''
assignees: ''

---

Value statement - a requirement, not a solution

As a (role)
I need (an action)
so that (a benefit)

Description (Text, Scribble, Wireframe, Design)

Acceptance criteria

• (functional descriptions)

Tasks

• (todos for the team)

Size

(small, medium, large)

favorite Podcast

As a user
I want to be able to favorite podcasts
so that i know to which to listen to next

Description (Text, Scribble, Wireframe, Design)

Acceptance criteria

• the bookmarks should be able to toggle between active and inactive
• when active the podcast should get listed in the favorites
• when inactive the podcast should not get listed in favorites
• the button Search should not be visible on favorites page

Tasks

• creating two pages
• one Page SearchResult which renders the available space podcasts
• one Page Favorites
• create Buttons to switch between those stages
• create bookmark
• crate logic for bookmark

Size

medium

Header

Value statement - a requirement, not a solution

As a user
I need to be able to see where i am and what the current search term is
so that i can navigate myself.

Description (Text, Scribble, Wireframe, Design)

Acceptance criteria

• no header on details page
• on details page only back arrow
• decide on whether with or without different background color

Tasks

• header component
• implement header in app

Size

medium