Scribd
Upload
12 views2 pages

Frontend Assignment Task

nm

Uploaded by

Md Sarfaraz
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
12 views2 pages

Frontend Assignment Task

nm

Uploaded by

Md Sarfaraz
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 2

Frontend Assignment: Create a Dynamic Web Application

Design Reference:
Your task is to create a web application following the design pattern provided in this
Figma design:
https://www.figma.com/file/nW2wYRzRxCMQlVXolkCZgZ/Frontend-and-App-Assignme
nt?type=design&node-id=0%3A1&mode=design&t=yqjtM765PgRJ9APK-1

Pages to Develop:
● `/` (Home Page)
● `/signup` (Sign Up Page)
● `/login` (Login Page)
● `/posts` (All Posts - Authentication Required)
● `/posts/:postID` (Details of a Single Post - 'postID' is a dynamic parameter)

Assignment Levels:

Level 1: Basic Functionality


● Develop a login page as per the provided design.
● Implement Firebase for Login and Signup functionality.
● Maintain the color palette and design consistency with the Figma reference.
● Use Tailwind/CSS/SCSS for styling (no component library).
● Implement a secret page (`/posts`) accessible post-login, fetching data from
https://jsonplaceholder.typicode.com/ .
○ Display 100 posts using: https://jsonplaceholder.typicode.com/posts
○ Fetch single post details from:
https://jsonplaceholder.typicode.com/posts/1
○ Implement pagination if possible.
● Ensure login functionality to view posts and a logout feature.

Level 2: State Management and Advanced Routing


● Use a state management library (Redux, Zustand, Jotai, etc.) for user state.
● Implement Higher Order Components (HOC) for authenticated routes.
● Continue using Tailwind for styling.
Level 3: Advanced Features and Best Practices
● Implement proper validation and error handling.
● Display toast notifications for errors.
● Use Next.js 13, specifically the app directory structure.
● Implement server components.
● Incorporate Tailwind with subtle animations.
● Utilize Next.js built-in features like Image, Link, Fonts.
● Aim to write code in TypeScript if possible.

Submission Guidelines:
● Your code should be well-organized and commented.
● Push your code to a GitHub repository and provide the link in your submission.
● Ensure the application is deployed on Vercel
● Provide instructions for deployment in a README file.

You might also like