Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/emrecancorapci/react-query-blog
A infinite scrolling blog application that uses DummyJSON as backend and React Query for data fetching.
https://github.com/emrecancorapci/react-query-blog
react react-hook-form tailwindcss tanstack-react-query typescript vite zustand
Last synced: about 6 hours ago
JSON representation
A infinite scrolling blog application that uses DummyJSON as backend and React Query for data fetching.
- Host: GitHub
- URL: https://github.com/emrecancorapci/react-query-blog
- Owner: emrecancorapci
- Created: 2023-07-03T15:33:28.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-14T10:07:46.000Z (6 months ago)
- Last Synced: 2024-05-14T11:28:44.695Z (6 months ago)
- Topics: react, react-hook-form, tailwindcss, tanstack-react-query, typescript, vite, zustand
- Language: TypeScript
- Homepage:
- Size: 604 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Query Blog Project
## About The Project
This project is a simple blog that uses [DummyJSON](https://dummyjson.com/) as **backend**. It uses [React Query](https://react-query.tanstack.com/) for **data fetching** and [Zustand](https://zustand.surge.sh/) for **state management**. It also uses [React Hook Form](https://react-hook-form.com/) for **form handling**, built with [Vite](https://vitejs.dev/) and uses [Tailwind CSS](https://tailwindcss.com/) for styling.
## Table of Contents
- [React Query Blog Project](#react-query-blog-project)
- [About The Project](#about-the-project)
- [Table of Contents](#table-of-contents)
- [Built With](#built-with)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Project Roadmap](#project-roadmap)
## Built With
- [React](https://reactjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Vite](https://vitejs.dev/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Axios](https://axios-http.com/)
- [React Query](https://react-query.tanstack.com/)
- [Zustand](https://zustand.surge.sh/)
- [React Hook Form](https://react-hook-form.com/)
- [React Router](https://reactrouter.com/)
## Getting Started
### Prerequisites
- [Node.js](https://nodejs.org/en/)
### Installation
1. **Clone the repo**
```sh
git clone
```
2. **Install NPM packages**
```sh
npm i
```
or
```sh
yarn install
```
or
```sh
pnpm i
```
3. **Start the development server**
```sh
npm run dev
```
or
```sh
yarn dev
```
or
```sh
pnpm dev
```
4. **Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.**
## Project Roadmap
- [x] Create the project
- [x] Fetch blog posts from the API
- [x] Create single blog post page
- [x] Fetch comments from the API
- [x] Create simple user profile page
- [x] Create new blog post page
- [x] Create simple navigation bar
- [x] Implement authentication and authorization
- [x] Implement pagination and infinite scroll
- [ ] Redesign the profile page
- [ ] Create tag pages
- [ ] Implement dark mode
- [ ] Create add comment form
- [ ] Create edit post page
- [ ] Create edit comment form
- [ ] Implement slug for blog posts
- [ ] Implement search
- [ ] Complete design overhaul