https://github.com/srijan-d/news-app-master

News web app with live data built with Next13.3,TypeScript, Tailwind. Dark/Light mode using next-themes. GraphQL for batching multiple api calls. StepZen for generating TypeScript definitions automatically. Live data pulled via Mediastash Api. Revalidation and prebuilding pages with generateStaticParams reducing wait time.
https://github.com/srijan-d/news-app-master

cache gql graphql mediastack next-theme next13 nextjs react seo stepzen tailwindcss typescript

Last synced: about 8 hours ago
JSON representation

News web app with live data built with Next13.3,TypeScript, Tailwind. Dark/Light mode using next-themes. GraphQL for batching multiple api calls. StepZen for generating TypeScript definitions automatically. Live data pulled via Mediastash Api. Revalidation and prebuilding pages with generateStaticParams reducing wait time.

• Host: GitHub
• URL: https://github.com/srijan-d/news-app-master
• Owner: Srijan-D
• Created: 2023-04-22T10:22:59.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-05-11T17:00:45.000Z (almost 2 years ago)
• Last Synced: 2024-12-18T19:15:16.329Z (about 2 months ago)
• Topics: cache, gql, graphql, mediastack, next-theme, next13, nextjs, react, seo, stepzen, tailwindcss, typescript
• Language: TypeScript
• Homepage: https://srijan-live-news-app.vercel.app/
• Size: 375 KB
• Stars: 6
• Watchers: 1
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Currecntly: fixing few bugs in production related to caching and read the more ts file 
 

preview of the app can be found below

![image](https://user-images.githubusercontent.com/87586713/234116248-eb3b070d-20e8-4f02-bddc-6c395b68b338.png)

![image](https://user-images.githubusercontent.com/87586713/234116401-3a704320-11a1-4aef-98a0-1b76b007198a.png)

![image](https://user-images.githubusercontent.com/87586713/234117078-13ce184f-9783-49dc-a7d2-4cacea8eb0a4.png)

News Web Application with Live Data

This is a web application built with Next13.3, TypeScript, and GraphQL, utilizing StepZen for generating TypeScript definitions automatically. Live data is pulled via the Mediastash API with revalidation of stale data every 20 seconds using next revalidate, prebuilt pages along with instant caching to reduce wait time and pulling dynamic data at each request. The application also includes a dark/light mode feature using next-themes and tailwindcss.

Technologies Used



  
Next13.3

  
TypeScript

  
GraphQL

  
StepZen

  
Mediastash API

  
Next-Themes

  
TailwindCSS



Features



  
Live data from the Mediastash API with revalidation

  
GraphQL for efficient batching of multiple API calls

  
Automatic TypeScript definition generation with StepZen

  
Prebuilt pages to reduce wait time

  
Streaming SSR for incremental rendering parts of UI to the client.

  
Custom svg loader using React Suspense under the hood.

  
Dark/light mode feature with next-themes and tailwindcss



Installation and Usage



  
Clone the repository: git clone https://github.com/your-username/news-web-app.git



  
Install dependencies: npm install or yarn or pnpm install



  
Start the development server: npm run dev or yarn run dev or pnpm run dev



  
Open http://localhost:3000 in your browser to view the app.



Contributing

Contributions are welcome! Please feel free to open issues or pull requests.