In this challenge, You will create a post blog app using api that you guys can check the API DOCUMENTATION HERE and then implement it to this UI DESIGN
You don't need to do all the pages, all you have to do is:
- Home page
- Search page
- Detail Page
The goal of this challenge is to assess your ability to:
- Interpret a design from Figma.
- Structure a webpage with Next JS.
- Apply styles using Tailwind CSS.
- Create a responsive layout.
- Integrate your app with provided API
- Deploy your app to vercel
Don't forget to run npm install for this project first (this project already installed libraries that you need, such as Axios, React Query)
Study the Figma Design: Open the Figma link and thoroughly examine the design. Understand the layout, spacing, colors, typography, and responsive behavior.
Start to code using all structured files that provided (you can also add what you need)
The evaluation for this assignment will be based on the following criteria:
-
Project Structure & App Router Conventions: How you structure your project using the Next.js App Router conventions (e.g., proper use of page.js, layout.js, loading.js, not-found.js, etc.).
-
Routing & Data Fetching: Your ability to implement routing, including dynamic routes ([slug]), and efficiently fetch data from a local API using the appropriate rendering strategies (Server Components for data fetching, Client Components for interactivity).
-
Next.js Feature Utilization: How effectively you use Next.js-specific features for optimization and user experience, such as using the
component for images and implementing custom error handling.
-
Code Clarity & Best Practices: The overall quality and readability of your code. This includes clean code, clear naming for variables and components, and following general React and Next.js best practices.
-
Deployment: Whether the application is successfully deployed to a hosting platform (like Vercel or Netlify) and is fully functional in the live environment.
Check this module: click this
🎉 Congratulations on working on this assignment! Utilize the playground feature in Figma to help you understand how the design should look on various devices. Keep experimenting and don't hesitate to look for references if you encounter difficulties. You can definitely produce great work! 🚀 Keep up the spirit, cheers!! 🎈