https://github.com/dijevic/cashys-front-end
cashys App
https://github.com/dijevic/cashys-front-end
javascript practice-programming react styledcomponents
Last synced: 3 months ago
JSON representation
cashys App
- Host: GitHub
- URL: https://github.com/dijevic/cashys-front-end
- Owner: dijevic
- Created: 2022-03-06T23:55:44.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-07-18T18:29:43.000Z (almost 4 years ago)
- Last Synced: 2025-03-02T09:16:53.589Z (over 1 year ago)
- Topics: javascript, practice-programming, react, styledcomponents
- Language: JavaScript
- Homepage: https://cashys.netlify.app/
- Size: 1.11 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
WELCOME TO CASHYS 😎😎💱 💸
A React app to keep on track my debts and incomes
**The main idea of the project was to create a complete MERN stack development to deal with incomes and debts , having a balance of them and be able to do a CRUD of operations(debts and incomes) and categories**
The project has been done with _React_ & _zustand(global state)_ , _React Router v6_ , _Styled components_ and _react-toastify_
To deal with the global state I am using **zustand** which is less weight than **React-Redux & Redux** , and really easy to setup and use.
For the App routing and using React-router v6 which is the latest known version of React-Router.
For the styles I decided to cope with them using **Styled components**(and no regrets are coming to me, this is for me the best way to style components while possible) and the beauty and easy-use **react-toastify** to work with the notifications and messages.
Overall I tried to be as atomic as possible with my components, always trying to keep the components simples and easy to read.
**To start with this project in local**
_First step :_
- copy and paste the follow in you cd:
```
https://github.com/dijevic/cashys-front-end.git
```
_Second step :_
- navigate to the folder:
```
cd cashys-front-end
```
_open the folder in your favorite IDE:_
```
code .
```
_Install all the dependencies :_
```
npm install
```
_Create a .env.development file:_
- add the following enviroment var for the API local URL :
```
REACT_APP_API_URL=http://localhost:4000/api/v1
```
NOTE : the *PORT* number has to be the same you has setted on the backend .
_run the project:_
```
npm start
```
Then you have two ways to use the backend and integrate it with this front-end
- clone the Backend , follow the backend instructions and run it up :
[cashys backend](https://github.com/dijevic/Cashys)
(Steps and instructions to use the backend are in the link)
You can also change the enviroment to use the backend that is alive with railway and clever cloud(DB)
- Change the API url in the enviroments(development enviroment) for:
```
REACT_APP_API_URL=https://cashys-production.up.railway.app/api/v1
```
_You can also see the app alive here :_
- User to Log into the app :+1:
```
**Email** : dijevic.developer@gmail.com
**password** : 123456
```
And finally there you go !