Building a Social Media App Using Next.js, TypeScript, Tailwind, Axios based on JSONPlaceholder API
ฝัง
- เผยแพร่เมื่อ 7 ก.พ. 2025
- In this tutorial, we’ll build a fully functional social media app called SocialJSON using Next.js, TypeScript, Tailwind CSS, and Axios, powered by the JSONPlaceholder API. You'll learn how to fetch and display posts, users, and comments while designing a clean and responsive UI with Tailwind CSS. Whether you're a beginner or looking to sharpen your frontend skills, this project is a great hands-on experience!
🔹 What You'll Learn:
✅ Setting up a Next.js project with TypeScript
✅ Fetching and displaying data from a REST API using Axios
✅ Styling components efficiently with Tailwind CSS
✅ Working with API endpoints for posts, users, and comments
✅ Pagination, search and animations
✅ Defining types and interfaces in TypeScript
✅ Applying the best practices and structuring your projects
💻 Tech Stack:
✔️ Next.js
✔️ React
✔️ TypeScript
✔️ Tailwind CSS
✔️ Axios
✔️ JSONPlaceholder API
🔗 GitHub Repository:
👉 github.com/azi...
🔗 API Endpoints:
📌 Posts: jsonplaceholde...
📌 Users: jsonplaceholde...
📌 Comments: jsonplaceholde...
📌 User: jsonplaceholde...{user_id}
📌 User posts: jsonplaceholde...{user_id}/posts
📌 User todos: jsonplaceholde...{user_id}/todos
📌 Post comments: jsonplaceholde...{post_id}/comments
🚀 Connect with me:
My website: azizbecha.com
GitHub: github.com/azi...
LinkedIn: / azizbecha
Facebook: / azizbechaa
📢 Don’t forget to like, comment, and subscribe for more coding tutorials! 🚀
📢Enjoyed this tutorial? Let me know in the comments if you want another one! Your feedback helps me improve. Looking forward to hearing from you! 🚀
#NextJS #TypeScript #WebDevelopment #TailwindCSS #Axios #SocialJSON
keep going 👏👏
صحيت عزيز ❤
Gj🙌👏👏
👏👏👏👏
keep up the great work