This is a web application built with Next.js, React Query, Tailwind CSS, and deployed on Vercel. The purpose of this application is to browse Mweb's Fibre products and provide filtering options based on providers and price range.
- Fetches Fibre products from the API for all providers.
- Displays icons for each provider to easily identify them.
- Allows users to select multiple providers and filters the displayed products accordingly.
- Provides a price range filter to narrow down the product selection as well as a campaign filter.
The application is built using the following technologies:
- Next.js: A React framework for server-side rendering and building optimized web applications.
- React Query: A data-fetching library for managing API data and caching.
- Tailwind CSS: A utility-first CSS framework for building custom and responsive user interfaces.
- Vercel: A cloud platform for deploying and hosting web applications with ease.
To run the application locally, follow these steps:
- Clone the repository:
git clone git@github.com:Mik3y-F/mweb-assessment.git - Install the dependencies:
npm install - Start the development server:
npm run dev - Open your browser and navigate to
http://localhost:3000
The application is deployed on Vercel. You can access it using the following link: App Link
The application utilizes an API to fetch the Fibre products. You can find the API documentation and endpoints at API Documentation
Contributions are welcome! If you find any issues or have suggestions for improvement, please create a new issue or submit a pull request.
This project is licensed under the MIT License.
Note: Please be aware that comprehensive test suites were compromised on due to time constraints. If given more time, I would add thorough testing to ensure the application's reliability and stability.