This content originally appeared on DEV Community and was authored by Devin Ford
I've been looking for a reason to try out React Query and Tailwind for a while, but nothing really stuck out as a good way to try them in a fun way. That was until I discovered that DEV had a consumable API, and inspiration struck! I wanted to use their "rising" parameter to display the recent articles on the rise from DEV!
Disclaimer: This is not a full tutorial, more of an overview. Let me know in the comments if you want a full breakdown of how I set this project up
Things I wanted to accomplish:
- Spin up a Next app with TypeScript
- Try Tailwind for the first time
- Try React Query for the first time
Setup:
I began with your standard next app using:
npx create-next-app or yarn create next-app depending on which you prefer. Once I had my base next app, I installed all the following dependencies I was going to use in the project:
"dependencies": {
"next": "10.0.9",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-loading": "^2.0.3",
"react-query": "^3.13.0",
"uuid": "^8.3.2"
},
"devDependencies": {
"@types/next": "^9.0.0",
"@types/node": "^14.14.36",
"@types/react": "^17.0.3",
"@types/uuid": "^8.3.0",
"autoprefixer": "^10.2.5",
"postcss": "^8.2.8",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-preset-env": "^6.7.0",
"react-ga": "^3.3.0",
"tailwindcss": "^2.0.4",
"typescript": "^4.2.3"
}
Now that all the pesky install stuff was out of the way, I created my tsconfig.json file and converted all the .js and .jsx files to .ts and .tsx to utilize TypeScript. Next makes this process seamless.
I followed the documentation from Tailwind to get everything up and running for that.
React Query has great documentation but got a little hairy for me at some points. The base setup is fairly straight forward, don't forget if you're going to use the useQuery() hook, amateur tip ?: don't forget to add the option {staleTime: Infinity,} to the end of the function to avoid a re-render every time the page becomes focused or a link is clicked.
I was off to the races, I was pulling in data from the DEV API using https://dev.to/api/articles?state=rising&per_page=30 to get 30 rising articles, and now I needed a way to display them.
Now it was time to set up some components and render out cards that included some of the information being returned from the API. I pulled the following information from the API:
- User Name
- Social Image for the article
- The article URL and Title
- Twitter username and URL
- GitHub username and URL
- Users profile picture
- Tag list for each article
- Comment and Reaction counts
Once we had all that information, we needed to map over the returned array of articles and put that information into a consumable card. I displayed the social image with the article title (as a link to said article) under it. Then followed those with the author's user name, their profile image, and links if they had them. Then we wrapped it up with the article's tags, and lastly, the comment and reaction count, as you can see below.
I then deep dove into the docs for tailwind and started styling the cards and the rest of the site. I found it super intuitive to pass something like className='rounded-full w-12' to the profile images to make an easy round avatar. The entire site has no actual CSS written. Everything was formatted using className and tailwind classes. It took a little getting used to, but once I got the hang of it, tailwind cut down a lot of time. Plus, making changes on the fly is super useful. Be sure to pass purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"], pointing to your directories of course. This will remove any repeated or unnecessary CSS classNames that have been passed.
Add on features:
Over the course of the next week, after getting the initial app up and running, I began to add some features. First was article sorting, and you can now sort articles in ascending and descending order based on the number of reactions to an article.
Next, I added the ability to search articles by tag names. You can type any tag name, and the app will automatically filter the articles that match that tag and return them as you change your input. As a challenge to myself, I think I will in the future set up a multi-select dropdown that allows you to filter for multiple tags at once.
Conclusion:
I had a lot of fun getting this up and running. It was a great way to learn. DEV's documentation on their API was awesome, as was the documentation for all the technologies used to build dev.to rising! I have plans to add more and more features as time goes on. I will be using this site as my sandbox to try different things.
If you'd like to check out the site, it is live here: dev.to Rising and you can view the source code here on GitHub. Feel free to raise any issues or put anything you'd like to see added to the site! I appreciate you all checking out the site, and I hope you enjoy a fun, easy way to find rising articles from the DEV community!
This content originally appeared on DEV Community and was authored by Devin Ford
Devin Ford | Sciencx (2021-04-07T07:54:46+00:00) Consuming the DEV API with Next and React Query!. Retrieved from https://www.scien.cx/2021/04/07/consuming-the-dev-api-with-next-and-react-query/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.