A showcase website demonstrating front-end development skills for Aha's assessment.
Visit live site: https://aha-frontend-assessment.web.app/
This project follows these instructions and is built according to this Figma design to complete the assessment tasks.
For a detailed side-by-side comparison of the design and implementation, click here. The differences between the design and implementation are explained in the comments.
- Build with React and TypeScript.
- Adopt the Vitamin template, which utilizes Vite as a build tool and incorporates best practices for React projects.
- Ensure code consistency and formatting with ESLint and Prettier, and integrate them into the workflow via Husky and lint-staged.
- Utilize TanStack Query for efficient data fetching, caching, and synchronization.
- Use React Router for code-splitting and lazy-loaded routes.
- Style using the atomic approach with Tailwind CSS, alongside clsx and tailwind-merge, to prevent style conflicts and enhance readability.
- Leverage Material UI for ready-to-use components.
- Implement grid layout using CSS Grid.
- Automate deployment to Firebase Hosting through GitHub Actions for continuous integration.
- Adopt an atomic approach to state management with Jotai.
- Generate realistic images and avatars with Faker.
- Use react-intersection-observer to achieve infinite loading and lazy load images.
- Implement self-hosted fonts using Fontsource.
- Code-splitting and lazy-loaded routes
- Dynamic document title
- Error handling
- Testing