Podium is a social podcast app helping you to find interesting episodes by user votes
Home Page: https://ncbecker-podium.herokuapp.com/
License: MIT License
I am Nico, currently working as a Software Engineer in Cologne, Germany. My last big, personal project was Podium, my final project as a Web Development Trainee at neuefische.
Create Menu Page (NOT logged in) and necessary components
As a user
I want to have a menu when I did not log in with Spotify on the starting page
so that I can log in at a later stage whenever I want.
As a user
I want to see the episodes sorted descending by likes/votes
so that I can get inspiration and listen to the "hottest" episodes.
Make inputs on filter page to separate components and create stories
https://developer.mozilla.org/en-US/docs/Web/API/Response/ok
Create Episode Details Page and necessary components
https://usehooks.com/
https://usehooks.com/useDebounce/
As a user
I want to have a menu when logged in with Spotify
so that I can view my liked episodes and log out when needed.
a)
As a user
I want to be able to log in with Spotify
so that I can save favorites and add podcasts to playlists on Spotify.
b)
As a user
I want to be able to skip "log in with Spotify"
so that I can use the app anonymously / without a Spotify account.
Reduce amount of Wrapper Components and extract similar wrappers to separate component for reuse
clamp() for wrappers:
https://piccalil.li/quick-tip/use-css-clamp-to-create-a-more-flexible-wrapper-utility
overflow auto:
https://kilianvalkhof.com/2021/css-html/you-want-overflow-auto-not-overflow-scroll/
Create a repository with some general (dev)Dependencies and settings, as a template for this and other Create-React-App-Projects
As a user
I want to get a details episode view when I click on an episode card
so that I can get more information on this episode, add it to a Spotify playlist, like or unlike it, write and read comments.
https://www.joshwcomeau.com/react/boop/
Set up all requests to Spotify API
As a user
I want to like/upvote an episode I have listened to
so that I can share my favorites with others.
More infos:
https://developer.spotify.com/documentation/general/guides/authorization-guide/#authorization-code-flow
https://tools.ietf.org/html/rfc6749#section-4.1.1
https://tools.ietf.org/html/rfc6749#section-10.12
Create Menu Page (logged in) and necessary components
https://www.freecodecamp.org/news/technical-dive-into-owasp/
Allow search not only by episode title but also by name of podcast show
As a user
I want to be able to search episodes by keywords included in episode titles or the show name
so that I can find my favorite episodes to vote for.
As a user
I want to filter voting results by time and category
so that I can get more specific episode suggestions.
Create the app's prototype design in Adobe XD
Set global styles
Create Filter Overlay Page and necessary components
Create Login / Start Page and necessary components
https://styled-components.com/docs/advanced#theming
https://www.joshwcomeau.com/react/boop/
Set up mongoDB, requests to database, and associated data structure to store like count, user favorites and comments
Create Voting Interface Page and necessary components
https://lottiefiles.com/8821-like-button?lang=de
https://www.joshwcomeau.com/react/boop/
Set up deployment of main and pull requests
As a user
I want to be able to choose a light or dark theme
so that I can adjust app colors to my preference.
Uninstall react-lottie, install and implement react-lottie-player
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html
chenqingspring/react-lottie#100
https://github.com/mifi/react-lottie-player
Setup the initial project plan with issues, user stories, milestones and labels
Route pages, overlays etc.
React Router?
React Helmet?
Routing with external log in on Spotify?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
