Aha AI Exam2

Requirements

Front-End Frameworks

React + Typescript + Next.js

CSS Frameworks

MUI + Tailwind

Coding Styles

https://github.com/airbnb/javascript

Hosting

https://aha-ai-exam2.vercel.app/

Pixel-Perfect Side-by-Side Testing

https://www.figma.com/file/ToWLoNDLlE7hY6Uyatu4Pq/Pixel-Perfect-Side-by-Side-Testing?type=design&node-id=0-1&mode=design&t=8ar3S9hVgkyaPqKU-0

Assessment

Page Layout

• Nav Bar [10 web/mobile]
• Home [20 web/mobile]
• Results [30 web/mobile]
• Followers/Following [20 web/mobile]
• Tags [20 web/mobile]

Routing

• Home page → Tag page → (back)
• Home page → Search page → (back)

API Connections (use https://avl-frontend-exam.herokuapp.com)

• Friends
  • Following
  • Followers
• Search
  • Empty Content
• Tags

Advanced Effects

• Skeleton loading screen
  • Results
  • Tags
  • Friends
• Infinite loading
  • Results in xs screen
  • Results in large screen - using virtualized grid, need click More button
  • Friends

Other (If it is required or have enough time)

• Unit test with Jest
• E2E test with Cypress