Aha Exam for Frontend Position

Take Home Exam for: Frontend Position at Aha AI Created by: Sergio Suramin, S.Kom

Tech Stacks

1. Languages and Libraries

• Next.js 14 (React.js)
• Typescript
• Material UI v5
• Tailwind CSS v3
• PWA Ready
• SEO Ready

2. Farewell to Inconsistent Coding Style!

• ✔️ Husky
• ✔️ Eslint
• ✔️ Prettier
• ✔️ VS Code formatter

What's in here

1. Exam 1 (UI/UX Component)
2. Exam 2 (Page Layout, Routing, API)
3. Bug finding (submitted via terraform)

Exam Reference

PWA Ready

Progressive Web App (PWA) ready for better experience.

PWA Tested on:

• Chrome (Desktop, Mac, Android)
• Firefox (Desktop)
• Safari (iOS)
• Kiwi Browser (Android)

*Note: Firefox needs a browser extension to enable PWA.

Browser Support

Getting Started

First, install the dependencies:

yarn install

Then, run the development server:

yarn dev

Then, open http://localhost:3000 with your browser to see the result.

Environment

Yes, I know we dont normally share environment in Readme, but this is an exam.

• If you don't see .env file in the project:

1. create .env file in root folder.
2. Then, add this variable(s): NEXT_PUBLIC_API_URL="https://avl-frontend-exam.herokuapp.com/api"

Deployment

This Project is deployed to Vercel Platform

Live Link here

Husky

In the case your husky is not running when you commit a file, please run this command before your next commit

yarn husky install

Commit Message

Please follow these message format to your commit message:

1. A new feature

   • feat: your_commit_message

2. A bug fix

   • fix: your_commit_message

3. Documentation only changes

   • docs: your_commit_message

4. Changes that do not affect the meaning of the code

   • style: your_commit_message

5. A code change that neither fixes a bug nor adds a feature

   • refactor: your_commit_message

6. A code change that improves performance

   • perf: your_commit_message

7. Adding or modifying tests

   • test: your_commit_message

8. Changes to the build process or auxiliary tools and libraries such as documentation generation

   • chore: your_commit_message

9. Revert to a previous commit

   • revert: your_commit_message

Components

Within the "components" directory, there are four subfolders:

1. ui

   • This serves as the designated space for crafting fundamental UI components such as textfields, datepickers, etc.

2. layout

   • This serves as the designated space for developing layout components like "Container" or any other layout components when necessary.

3. feature

   • This serves as the designated space for creating custom components, typically employed when there is a need for a component with a specific purpose.

4. form

   • This serves as the designated space for creating custom form components.

While reviewing the code, you'll observe that all components have a "Th" prefix. Why? Let's take a moment to reflect. How many times have we created a component with the same name as a component from a third-party library, leading to confusion? This is where the prefix becomes crucial. By assigning a prefix to our components, we ensure each one has a unique name, making it easier for other developers to discern and understand the code.

The same reason applied to the tailwind configuration in this repo.

Prefix naming convention:

1. "Th" in components

   • This can be any name, I chose "Th" which stands for "Take Home Exam" abbreviation.

2. "tw-" in tailwind

   • This can be any name, I chose "tw-" which stands for "Tailwind CSS" abbreviation.

Submission

• Code is available in this repository.

• A more detailed information in this repository:

  • Exam 1: Component (Password Input, Calendar, Advanced Effect)
    • datepicker variant.
    • A more comprehensive integration of the Material-UI text field component.
  • Exam 2: Page (Page Layout, Routing, API Connections, Advanced Effect)
    • Skeleton Loading Screen
    • Infinite Loading on Result Page and Friend List
    • Added a small feature: Users in Result List is interactive. (Click to view their detail)
    • Added a small feature: Follow/Following buttons in Friend list are interactive (but the data won't persist since there is no POST API to handle that).

• Editable Figma link here (For Exam 2: pixel perfect section)

• Feel Free to contact me on LinkedIn if you have any inquiries.

QnA

1. Why using Next instead of React.js itself?

   • Next.js is built on top of React.js, making it an extension of the React framework. The decision to use Next.js was primarily driven by its additional features and capabilities, such as server-side rendering and simplified routing, which significantly expedite the development process (this was my primary goal timewise).

2. Why not using axios / react-query for data fetching?

   • In my opinion, it appeared excessive to employ those libraries for managing three simple GET APIs.

3. Why all images are the same? Are you using a local asset?

   • Yes, as all of the images in the API response were not accessible, so I decided to substitute them with a local asset.

4. Why are you using next/link instead of history (router.push)?

   • Indeed, both can be used, but since this is a simple project without any specific need to handle routing programmatically, I chose next/link because of its prefetching feature.