Welcome to Flexpod, the podcast app!
- Browse a list of podcasts sorted alphabetically.
- View detailed information about each podcast.
- Add podcasts to your favorites.
- Filter podcasts by various criteria.
- Subscribe to a newsletter (feature in progress).
- Contact page for user inquiries.
-
Clone the repository:
git clone https://github.com/your-username/flexpod.git cd flexpod -
Install dependencies:
npm install
or
yarn install
-
Start the development server:
npm start
or
yarn start
The application will be available at
http://localhost:3000.
- Navigate to
http://localhost:3000to see the login page. - After logging in, you will be redirected to the home page where you can browse podcasts.
- Use the navigation links to access different sections like Favorites, About, Contact, and Subscribe.
src/
├── components/
│ ├── Header.js
│ ├── Footer.js
│ ├── PodcastCarousel.js
│ ├── PodcastList.js
├── context/
│ └── AuthContext.js
├── pages/
│ ├── Home.js
│ ├── Login.js
│ ├── Podcast.js
│ ├── Favorites.js
│ ├── Search.js
│ ├── About.js
│ ├── Contact.js
│ ├── Subscribe.js
├── App.js
├── AppRoutes.js
├── index.js
public/
├── favicon.ico
├── index.html/: Login page./home: Home page with featured podcasts./favorites: User's favorite podcasts./podcast/:id: Detailed view of a specific podcast./podcasts: List of all podcasts./search: Search page for finding podcasts./about: About page./contact: Contact page./subscribe: Subscribe to the newsletter (in progress).
Displays the navigation links to different sections of the application.
Footer section of the application.
Displays a carousel of featured podcasts.
Displays a list of all podcasts with filters and sorting options.
Provides information about the podcast platform.
Provides contact information for user inquiries.
Subscription page for the newsletter (feature in progress).
The application fetches podcast data from the following API:
- Base URL:
https://podcast-api.netlify.app/
The favicon and meta tags are added in the public/index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Welcome to our podcast platform! We offer a variety of podcasts from different genres.">
<meta name="keywords" content="podcasts, personal growth, comedy, journalism, history, entertainment">
<meta name="author" content="Hasan Rizvi">
<link rel="icon" href="%PUBLIC_URL%/favicon.ico">
<title>FlexPod</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>