https://hooked-expense-tracker.herokuapp.com/
Using React hooks users can create and delete transactions that will return the income, expense, and grand total in USD.
Use the package manager npm to install hooked-expense-tracker. It is installed with Node.js
git init
git clone https://github.com/johnbroaddusivccv/hooked-expense-tracker.git
cd hooked-expense-tracker/
npm install
Install Dev Dependencies
npm -D install nodemon concurrently
- Create a dotenv file to set your MongoDB URI and PORT
- Create an eviromental variable named NODE_DEV set to either production or development
npm run dev
- bash into the client folder
cd client
npm run build
- Bash into the root directory
cd ..
Heroku create
- Make sure every step up until this has been completed otherwise the build might fail
- Also Make sure to go to your mongoDB ATLAS account in the network access tab on the cluster you created for this full stack application whitelist the IP by allowing access to every starting point.
- Set the IP Address to 0.0.0.0/0
git heroku push master
- Example of React Hooks implemented in Transaction Component
export const Transaction = ({ transaction }) => {
const { deleteTransaction } = useContext(GlobalContext);
const sign = transaction.amount < 0 ? "-" : "+";
return (
<li className={transaction.amount < 0 ? "minus" : "plus"}>
{transaction.text}{" "}
<span>
{sign}${numberWithCommas(Math.abs(transaction.amount))}
</span>
<button
onClick={() => deleteTransaction(transaction._id)}
className="delete-btn"
>
x
</button>
</li>
);
};
- Being able to manage state in a simple (and reusable) manner within function components.