https://github.com/luuuppi/quickchange

💱 QuickChange - simple currency converter
https://github.com/luuuppi/quickchange

currency-convertor framer-motion react scss typescript vite

Last synced: 9 days ago
JSON representation

💱 QuickChange - simple currency converter

• Host: GitHub
• URL: https://github.com/luuuppi/quickchange
• Owner: luuuppi
• License: mit
• Created: 2024-06-29T14:29:44.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-08-14T15:04:36.000Z (6 months ago)
• Last Synced: 2024-12-01T00:14:49.070Z (2 months ago)
• Topics: currency-convertor, framer-motion, react, scss, typescript, vite
• Language: TypeScript
• Homepage: https://quick-change-gules.vercel.app
• Size: 153 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# 💱 QuickChange - convert currencies

QuickChange is a simple currency converter thats provides easy way for currency conversion.

The application was created with the ability to scale, which is represented by a modular architecture and well defined reusable components.

### ⭐ Main features of the QuickChange:

- Search by currencies and choose one

- Enter the amount of money you want to convert

- See the converted value

- Smooth animations

### 📝‍ What i learned?

By creating the QuickChange, i learned in practice how to integrate a simple modular architecture into React applications, improved my practical skills in creating reusable UI components, learned how to link the application to the API via Tanstack Query (React Query), practiced creating an adaptive interface in pure CSS using the SCSS preprocessor and learned how to create smooth animations using Framer Motion.

## 🔧 Technologies

- TypeScript

- React

- SCSS

- Framer Motion

- Vite

## 🏃 Running the project locally

To tun the project on your computer, follow this steps:

- Clone the repo on your computer

- Run `npm i` in project folder to install required dependencies

- Get the API key [here](https://currencyapi.com/)

- Setup the `env.example` with your API key, then remove ".example" from file name

- Run `npm run dev` to run the dev mode or run `npm build && npm run preview` to run production-like app

- Go to the [localhost](http://localhost:5173) and enjoy!