Welcome to the Monter.one Frontend Assignment repository! This project showcases a dialogue box with pagination, built using Next.js, Lucid icons, and Tailwind CSS. The assignment is part of the frontend developer role assessment at Monter.one.
The project focuses on implementing a dialogue box component with pagination functionality. It demonstrates your ability to work with Next.js for server-side rendering, Lucid icons for visual elements, and Tailwind CSS for styling.
- Dialogue Box Component: Includes a styled dialogue box to display information.
- Pagination: Allows users to navigate through multiple pages of data.
- Next.js Integration: Utilizes Next.js for efficient server-side rendering and routing.
- Lucid Icons: Uses Lucid icons for visual elements such as pagination arrows.
- Next.js: React framework for server-side rendering and routing.
- Lucid Icons: SVG icon library for visual elements.
- Tailwind CSS: Utility-first CSS framework for styling.
- JavaScript/React: Programming languages for frontend development.
The project follows a standard Next.js structure with additional components for the dialogue box and pagination:
- pages: Contains the main pages of the application.
- components: Includes reusable UI components such as the dialogue box and pagination.
- styles: Global styles and utility classes using Tailwind CSS.
- public: Static assets such as images and fonts.
To run the project locally, follow these steps:
-
Clone the repository to your local machine:
git clone https://github.com/kelzzzcodes/monter-frontend-assignment.git
-
Navigate to the project directory:
cd monter-frontend-Assignment
-
Install dependencies using npm or yarn:
npm install
yarn install
-
Start the development server:
npm run dev
yarn dev
Open your browser and go to http://localhost:3000 to view the application
Hosted URL The project is hosted online. You can access it at https://monter-frontend-assignment-six.vercel.app/.