Frontend Task

Frontend task

Uploaded by

pradyukandala01

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

17 views2 pages

Frontend Task

Frontend task

Uploaded by

pradyukandala01

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 2

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 [email protected] and [email protected] with the deliverables
above.