https://github.com/labibahmed10/dummy-comments
Showing comments of posts of users using the JsonPlaceholders dummy api
https://github.com/labibahmed10/dummy-comments
nextjs14 shadcn-ui tailwindcss tanstack-query typescript
Last synced: 2 months ago
JSON representation
Showing comments of posts of users using the JsonPlaceholders dummy api
- Host: GitHub
- URL: https://github.com/labibahmed10/dummy-comments
- Owner: labibahmed10
- Created: 2024-05-28T11:34:56.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-09-13T05:56:10.000Z (8 months ago)
- Last Synced: 2024-09-13T17:06:14.134Z (8 months ago)
- Topics: nextjs14, shadcn-ui, tailwindcss, tanstack-query, typescript
- Language: TypeScript
- Homepage: https://dummy-comments.vercel.app/
- Size: 232 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### _This Web application was made with Next Js latest version._
Tech Stack User -
- Next Js
- Typescript
- Tanstack Query
- Shadcn UI
- Tailwind CSS
Description:
1. All the posts showed in a timeline.
2. Posts includes the name of the person who wrote the post.
3. `show comments` button to toggle view comments.
4. Comments include who commented on the post.
5. Tried to show skeleton while loading the posts.
## How to run this project ?
- git clone `https://github.com/labibahmed10/dummy-comments.git` on your local machine
- `cd dummy-comments` and run `npm install`
- Create a `.env.local` on your root file and copy paste the given env variables below.
- Type `npm run dev` to run the application on your local machine.
```javascript
env variables
NEXT_PUBLIC_POSTS_DATA="https://jsonplaceholder.typicode.com/posts"
NEXT_PUBLIC_USERS_DATA="https://jsonplaceholder.typicode.com/users"
NEXT_PUBLIC_COMMENTS_DATA="https://jsonplaceholder.typicode.com/comments"
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.