- Used the Mantine + Next.js template for this project and removed the Storybook references. I chose to do this taking into consideration this is a small technical assessment. If this were a larger project meant for production, I would have added the dependencies as needed, allowing for greater control over project structure and configuration. For a larger project with more dependencies, I would document why each dependency is used in the README.
- Kept the components outside of /app to let other engineers know the app directory includes only page components. If there's too many folders in /app, then it will be hard for other engineers to know what routes actually exist inside the application. This separation keeps the codebase cleaner
- Used an environment variable to secure the API key
- Used a server component for the API fetch for better performance
- Each component has its own folder to keep each components organized
- For interactivity with each article, I added a 'View Snippet" button to toggle the snippet text
- Search feature repopulates articles based on search input value
- Added default image in case no article image exists
- Implemented the very popular light/dark modes
- Tested for accessibility compliance according to WCAG best practices and ensured standards like color contrasts and keyboard navigation
- Error handling when no results needs to be adjusted. Once the user submits a query that has no results and then submits a new query that does have results, a message returns to the user that the new query does not have results right before loading the new results
- Load time of images/articles take awhile. This could probably be resolved by adding the functionality and Search component import in page.tsx to ArticleList.
- My unit tests need to be re-worked as they're failing at the moment. This is my first attempt using Jest.
This is a template for Next.js app router + Mantine.
This template comes with the following features:
- PostCSS with mantine-postcss-preset
- TypeScript
- Jest setup with React Testing Library
- ESLint setup with eslint-config-mantine
dev– start dev serverbuild– bundle application for productionanalyze– analyzes application bundle with @next/bundle-analyzer
typecheck– checks TypeScript typeslint– runs ESLintprettier:check– checks files with Prettierjest– runs jest testsjest:watch– starts jest watchtest– runsjest,prettier:check,lintandtypecheckscripts
prettier:write– formats all files with Prettier