kelzzzcodes / monter-frontend-assignment

Monter.one Frontend Assignment - Dialogue Box with Pagination

Introduction

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.

Project Overview

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.

Features

• 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.

Technologies Used

• 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.

Project Structure

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.

Getting Started

To run the project locally, follow these steps:

1. Clone the repository to your local machine:

   git clone https://github.com/kelzzzcodes/monter-frontend-assignment.git
   

2. Navigate to the project directory:

   cd monter-frontend-Assignment

3. Install dependencies using npm or yarn:

   npm install

   or

   yarn install

4. Start the development server:

   npm run dev

   or

   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/.