This project uses Next.js and Mantine to create a functional web application for cat profile display. Below you'll find all the necessary information to get started with the project, including the libraries used and how to set up your environment.
Libraries and Technologies Used
- Next.js: A React framework that provides a hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more.
- Mantine: A React component library with support for theming, accessibility, and a wide range of customizable components.
- TypeScript: A strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
- React Query: A data-fetching library that provides caching, synchronization, and more for managing server state in React applications.
- Placeiholder: Placeholder image techniques and libraries for providing default images while actual images are loading or if they fail to load.
Prerequisites
Ensure you have the following installed on your development machine:
- Node.js (version 14 or later)
- npm or yarn
Installation
1- Clone the repository:
git clone https://github.com/your-username/cat-land.git
cd cat-land
2- Install dependencies:
Using npm:
npm install
Or using yarn:
yarn install
Setting Up Environment Variables
To run the project, you need to set up environment variables. Create a .env.local file in the root of your project and add your API key:
NEXT_PUBLIC_API_KEY=your_api_key_here
Replace your_api_key_here with your actual API key.
Running the Project To start the development server, run the following:
Using npm:
npm run dev
Or using yarn:
yarn dev
Open http://localhost:3000 with your browser to see the result.
The deployed version is available at the following link: Cat Land 😼
Thank you for checking out Cat Land! If you have any questions or feedback, feel free to open an issue or reach out to me. Enjoy exploring the world of cats! 😻
