Podcaster is a web application where you can search for the top 100 iTunes podcast artists and hear their content.
Navigate filtering by podcast title or artist name, select the card and check it content.
DEMO HERE: https://podcaster-delta.vercel.app
This project uses a layered architecture, you would have separate layers for presentation (UI components), business logic (services and hooks), and data access (API calls and database operations).
List the tools and technologies used in your project:
- TypeScript
- Nextjs (14)
- React
- React-query
- React-table
- Jest
- linkify-react
- Eslint
- AllOrigins
Overview of the project structure:
βββ πpodcast
βββ .eslintrc.json
βββ π.swc
βββ πplugins
βββ v7_windows_x86_64_0.104.30
βββ πdb
βββ allPodcast.ts
βββ data.ts
βββ jest.config.ts
βββ jest.setup.ts
βββ next-env.d.ts
βββ next.config.js
βββ package-lock.json
βββ package.json
βββ πpublic
βββ next.svg
βββ vercel.svg
βββ README.md
βββ πsrc
βββ πapp
βββ favicon.ico
βββ globals.css
βββ HomePage.tsx
βββ page.module.css
βββ page.tsx
βββ πpodcast
βββ π[podcastId]
βββ πepisode
βββ π[episodeId]
βββ page.tsx
βββ page.tsx
βββ Providers.tsx
βββ πcomponents
βββ ErrorComponent.tsx
βββ Loading.tsx
βββ navbar.tsx
βββ πPodcast
βββ DummyData.ts
βββ Filter.tsx
βββ PodcastCards.tsx
βββ PodcastTable.tsx
βββ Sidebar.tsx
βββ πhooks
βββ index.ts
βββ πuseQuery
βββ usePodcast.ts
βββ useQueryconfig.ts
βββ πinterface
βββ podcastDetail.ts
βββ podcasts.ts
βββ πlibs
βββ apiUrl.ts
βββ constans.ts
βββ defaultValues.ts
βββ πservices
βββ serviceFetcher.ts
βββ tsconfig.json
βββ π__test__
βββ filter.test.tsx
βββ navbar.test.tsx
βββ podcast.test.tsx
βββ podcastCard.test.tsx
βββ sidebar.test.tsx
βββ π__snapshots__
βββ podcastCard.test.tsx.snap
- Clone the project
- execute
npm install
oryarn
- Run
npm run dev
oryarn dev
Once in "dev mode" open http://localhost:3000 with your browser to see the result. To edit some values and add "dynamicity" go to the this path:
βββ HomePage.tsx
and in the usePodcast()
hook
const { data, isFetching, isLoading } = usePodcast(100); // β¬
οΈ You can change this number
This project uses Jest and to run the test just excecute the follow script:
npm run test
oryarn test
MIT