Full Stack Developer Task

Blog Task Email

Task: Build a Blog Application Using Next.js 14

Objective: Create a high-performance blog application using Next.js 14, inspired by the design and
functionality of the https://dub.co/blog blog. The application should prioritize speed, incorporate sleek
and modern styling, and support image integration.

Key Requirements:

Design and Layout:

● The blog's design should closely resemble the "Dub.co" blog. Pay special attention to
layout, color scheme, typography, and navigation elements.

● Ensure the user interface is sleek, modern, and responsive, adapting seamlessly to
different screen sizes.

Next.js 14 Features:

● Utilize Next.js 14 for the project. Leverage its latest features to ensure optimal
performance and developer experience.

● Implement partial pre-rendering to improve loading times. Static Generation

(getStaticProps, getStaticPaths) should be used for blog posts, with Server-Side
Rendering (getServerSideProps) for dynamic content.

Content Management:

● Integrate a headless CMS (like Contentlayer, Sanity, or Strapi) to manage blog posts.
● Ensure the system allows for easy addition, modification, and deletion of posts, as well
as image integration.

Image Handling:

● Incorporate an efficient method for handling images. This includes uploading, storing,
and displaying images within blog posts.

● Use Next.js image optimization features to ensure fast loading times without sacrificing
image quality.

Performance Optimization:

● The application must score highly on web performance metrics (use tools like
Lighthouse for assessment).

● Implement best practices for code splitting, lazy loading, and efficient resource
management.
 SEO and Accessibility:

● Ensure the blog is SEO-friendly with proper meta tags, structured data, and URL
structure.

● The application should adhere to accessibility standards, ensuring it is usable by as many

people as possible.

Testing and Documentation:

● Write unit and integration tests for major components and functionalities.
● Provide comprehensive documentation on the project setup, architecture, and how to
update/manage content.

Deployment:

● Deploy the application on a platform like Vercel or Netlify

Deliverables:

● A fully functional blog application deployed to a web server.

● Source code hosted on a repository (e.g., GitHub) with clear instructions in the README.
● A Demo Video with Loom.com
● A report on performance metrics and steps taken for optimization.
Send an email to pradyu@professiorai.co and abhay@professorai.co with the deliverables
above.