https://github.com/programminginblood/atoztools

AtoZTools is a versatile tools website built with Next.js and enhanced with Framer Motion for smooth, responsive animations. This project offers a collection of essential utilities, including a QR Code Generator, Color Generator, and more. Each tool is designed with a user-friendly interface and optimized for performance.
https://github.com/programminginblood/atoztools

framer-motion nextjs react react-qr-code reactjs

Last synced: about 1 month ago
JSON representation

AtoZTools is a versatile tools website built with Next.js and enhanced with Framer Motion for smooth, responsive animations. This project offers a collection of essential utilities, including a QR Code Generator, Color Generator, and more. Each tool is designed with a user-friendly interface and optimized for performance.

• Host: GitHub
• URL: https://github.com/programminginblood/atoztools
• Owner: ProgrammingInBlood
• Created: 2024-09-04T00:30:10.000Z (4 months ago)
• Default Branch: master
• Last Pushed: 2024-09-22T03:50:49.000Z (3 months ago)
• Last Synced: 2024-10-20T03:53:16.730Z (2 months ago)
• Topics: framer-motion, nextjs, react, react-qr-code, reactjs
• Language: TypeScript
• Homepage: https://atoztools.vercel.app
• Size: 710 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# AtoZTools

**AtoZTools** is a web application that provides a collection of handy tools like a QR Code Generator, Color Generator, and more. Built with **Next.js** and animated with **Framer Motion**, this project aims to offer a smooth and responsive user experience with a modern design.

![AtoZTools Screenshot](https://i.ibb.co/s9ycTLF/image.png)

## Features

- **QR Code Generator**: Easily create customizable QR codes for various purposes.

- **Color Generator**: Explore and generate color palettes to use in your projects.

- **Responsive Design**: Built using Tailwind CSS, ensuring the site is fully responsive and looks great on any device.

- **Smooth Animations**: Enhanced with Framer Motion to provide engaging animations and transitions.

## Technologies Used

- [Next.js](https://nextjs.org/) - React Framework for server-rendered applications.

- [Framer Motion](https://www.framer.com/motion/) - Library for animations and transitions in React.

- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework for custom designs.

- [qrcode.react](https://github.com/zpao/qrcode.react) - React component for generating QR codes.

### Prerequisites

Ensure you have the following installed:

- Node.js

- npm or yarn

First, run the development server:

```bash

npm run dev

# or

yarn dev

# or

pnpm dev

# or

bun dev

```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.