This is a Next.js project bootstrapped with create-next-app.
First, install dependencies and run the development server:
npm install
npm run devOpen http://localhost:3000 with your browser to see the result.
This project is a demo webpage designed to help customers with information about various types of loss reports such as lost cards, IDs, and other documents. The primary goal is to provide a clear and user-friendly interface that retrieves and displays menus and content from specific API endpoints.
Implemented API calls using Next.js built-in API routing and fetch to retrieve menus and content from the given endpoints. Created separate functions to fetch data. Note: Due to time constraints, I prioritized content over functionality and some styling of the navigation and header.
Broke down the page into smaller, reusable components, inspired by file structure from bulletproof React Utilized the Radix.ui component library.
Most of the styling is based upon the preconfigured themes package from the Radix.ui library, sprinkled with a small amount of Tailwind CSS. Focused on creating a user-friendly layout with clear navigation and readable content. Strived for accessibility by following best practices in link naming, JSX structuring, color usage, sizing, and content division into sections with clear headings.
- Framework Next.js
- Language: TypeScript
- Styling: Tailwind CSS
- Component Library: Radix.ui https://www.radix-ui.com/
- Icons: https://www.radix-ui.com/icons https://docs.fontawesome.com/
Due to time constraints, I prioritized certain aspects of the project. The primary focus was on the content and ensuring the core functionality was present, with less emphasis on the navigation and header styling. Future improvements would include more detailed styling and additional functionality.