Podcast Application

Overview

This project is a web-based podcast application developed at Wundermålig AB. The application allows users to browse and listen to podcasts with a simple and accessible interface.

Features

• List and play podcasts: Browse a library of podcasts and listen directly in the app.
• Responsive design: Optimized for both desktop and mobile devices.
• Accessibility-first: Built to ensure compatibility with screen readers and keyboard navigation.
• TypeScript and Sass: Modern technologies for scalable and maintainable code.

Screenshots

Technologies Used

Build Tools

Styling and Preprocessing

Programming and Code Quality

Dependencies and APIs

Hosting and Deployment

Utilities

Getting Started

Prerequisites

• Node.js v20.11.0
• npm installed

Installation

1. Clone the repository:

git clone https://github.com/Medieinstitutet/fed24d-arbetsmetodik-inl-1-OmarAlawi16
cd repo-name

2. Install dependencies:

npm install

Running the Project

npm run dev

Building for Production

npm run build

Environment Variables

This project uses environment variables to store API URLs. The actual API URLs are not included in this repository for security reasons.

Setup Instructions

1. Create a .env file in the project root (or copy .env.example and rename it to .env).
2. Add the required environment variables:

   VITE_PROGRAMS_API=<your-api-url>
   VITE_EPISODES_API=<your-api-url>
   

checklist

G Requirements

• Get the project running: Debug and fix startup issues.
• Convert CSS to Sass: Transform all CSS files into Sass.
• Consistent naming in CSS: Use consistent naming conventions for classes and IDs.
• Convert to TypeScript: Migrate all JavaScript files to TypeScript for improved code quality.
• Consistent code quality: Ensure code standards are followed (using ESLint).
• Mobile view: Adjust the layout for mobile users.
• Language: Fix language-related issues (e.g., lang attribute in HTML).
• Remove unnecessary logging: Eliminate redundant console logs.
• Documentation: Complete the README file and include screenshots.
• Accessibility (images): Add alt-text and optimize images for better accessibility.
• Refactor functions: Improve code structure by breaking down complex logic.
• Eliminate unused code: Remove redundant or unused code.
• Remove irrelevant files: Ensure only necessary files are included in the project.

VG Requirements

• Right code in the right place: Restructure files and folders to follow best practices.
• Handle logging effectively: Implement a logging system to collect and filter logs efficiently.
• Conduct an accessibility review of the site: Analyze the site using tools like Lighthouse and WCAG standards.
• Utilize Sass features in CSS: Leverage mixins, variables, and inheritance for optimized styling.
• Remove unused packages: Eliminate unnecessary dependencies from package.json.
• Handle API errors: Implement robust error handling for all API calls.
• Conduct a Lighthouse analysis: Run a Lighthouse report and improve performance, SEO, and accessibility.
• Review development environment: Document or visualize how the development environment is configured.
• Ensure consistent CSS syntax: Standardize syntax and formatting based on specific guidelines (e.g., BEM methodology).
• Publish the site on GitHub Pages: Build and deploy the site using GitHub Pages.

License

This project is licensed under the MIT License - see the LICENSE file for details.