Currency converter

Hi! This is the most cozy converter ever 😊.

See demo

Here you can read how to run it, and how to use all components. Lets start 👇

This project was bootstrapped with Create React App.

How to run? 🏃‍♂️

Ready, set, go!🤣
Seriously, in the project directory, you can run:

npm start

Runs the app in the development mode. 🛠
Open http://localhost:3000 to view it in the browser.

npm test

Launches the test runner in the interactive watch mode. 🧪
But right now this feature isn't available. 🌚

npm build

Builds the app for production to the build folder. 🏗
It correctly bundles React in production mode and optimizes the build for the best performance.

Project structure 🌲

public

• favicon.png
• images
  • icons-512.png
  • maskable_icon.png
• index.html
• manifest.json
• robots.txt
• worker.js

src

• App.js
• App.scss
• App.test.js
• components
  • AddBtn
    • AddBtn.jsx
    • AddBtn.scss
    • icons
      • plus-active.svg
      • plus-unactive.svg
  • Columns
    • BaseColumn.jsx
    • Column.jsx
    • Columns.scss
  • ControlBtn
    • ControlBtn.jsx
    • ControlBtn.scss
  • Currency
    • Currency.jsx
    • Currency.scss
    • icons
      • minus-active.svg
      • minus.svg
  • Dropdown
    • Dropdown.jsx
    • Dropdown.scss
    • icons
      • search.svg
  • Header
    • Header.jsx
    • Header.scss
  • Scrollbar
    • Scrollbar.jsx
• draw.io
  • currencies-data-transfer.drawio
• hooks
  • useClickOutside.js
  • useHeight.js
  • useWidth.js
• icons
  • columns-one.svg
  • columns-two.svg
  • down.svg
  • maximize.svg
  • minimize.svg
  • up.svg
• index.css
• index.js
• logo.svg
• redux
  • API
    • requestActions.js
    • requestReducer.js
  • baseValue
    • baseValueActions.js
    • baseValueReducer.js
  • columnMode
    • columnModeActions.js
    • columnModeReducer.js
  • fullscreen
    • fullscreenActions.js
    • fullscreenReducer.js
  • rootReducer.js
  • store.js
  • theme
    • themeActions.js
    • themeReducer.js
• serviceWorker.js
• setupTests.js

.gitignore

README.md

package.json

---

Generated by markdown-tree

Components guide 🧩

ControlBtn

Button allows you to toggle change something.

Props	Type	Description
label	string	Text in button.
onClick	function	Callback function.
icon	string	Way to your icon.
reversed	boolean	Change padding side (default side: left).
big	boolean	Change font size to more bigger.
active	boolean	If you need to has focus button state.

AddBtn

Button allows you to call something on click.

Props	Type	Description
onClick	function	Callback function.

Dropdown

Allows you to choose some option.

Props	Type	Description
list	array	Array of options to select.
defaultOptionIndex	number	Selected option be default.
onChoose	function	Function receiving selected element.

Currency

Currency card.

Props	Type	Description
canRemove	boolean	Can it be deleted?
remove	function	Function for card removing (on click remove button).
baseStatus	boolean	Only one currency can be base.

Convert algorithm. 👨‍🔬

Header

Header of the App. Here you can change screen mode and theme

Column

Column contains currencies, you can add and remove them.

Columns variants

Name	Type	Description
BaseColumn	base	Contains only one currency (base)
Column	normal	Contains normal currencies. You add and remove them.

BaseColumn props

Props	Type	Description
fullscreen	boolean	If fullscreen enabled, it has some styles.

Scrollbar

I used pretty custom scrollbar.

See react-custom-scrollbars docs

Hooks guide ⚓

useClickOutside 👆

Allows you to tracks clicks outside the item to do something.

Argument	Type	Description
ref	useRef()	React link for your item.
callback	function	Callback function.

Example

import React, { useRef } from "react";
import { useClickOutside } from "way to useClickOutside";

//Component
export const Dropdown = () => {
 const [opened, setOpened] = useState(false);

 const toggleOpened = () => {
  setOpened(!opened)
 }

 //Click outside track
 const menuRef = useRef();
 useClickOutside(menuRef, toggleOpened);

 return(
  <button>{opened ? 'Close' : 'Open'} menu </button>
  {opened && <div ref={menuRef}>Menu</div>}
 )
}

State management guide 👩‍💼

I'm using Redux to manage global state. See official redux and react-redux docs.

States description

Theme 🎨

Allows you to toggle change the theme.

Action	Argument	Description
applyTheme	boolean	Enable or disable dark theme.

Fullscreen 💻

Allows you to toggle change the fullscreen mode.

Action	Argument	Description
applyFullscreen	boolean	Enable or disable fullscreen.

Column mode 📳

Works only on phone 📱.

Action	Argument	Description
applyTwoColumn	boolean	Enable or disable two column mode.

Base value 💱

The base currency value is basic for conversion to other currencies. It calls in all currencies. See algorithm docs.

Action	Argument	Description
updateBaseValue	number	Update base currency value.

API requests

I'm using redux-thunk for async API requests.

Action	Argument	Description
fetchRates	string	Base currency short name (USD, EUR)