Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
63 changes: 14 additions & 49 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,59 +1,24 @@
The task is to create an income/expense web app. The app should have two screens. The app should be written using the technologies mentioned in the Technologies section.
Successful candidates spend on average 4 hours on this task.
# Expense App

## Data layer
🔆✅🔴**Live [expenseapp](https://frdayvz85.github.io/expense-app/)** -> Github
🔆✅🔴**Live [expenseapp](https://expense-appp.netlify.app/)** -> Netlify

There are two entities in the app: Category and Transaction
##### Clone project : `https://github.com/frdayvz85/expense-app.git`

### Category
In the project directory, you can run:

Represents one category of transaction. As examples of categories: Salary, Gifts, Food, Going out, Traveling. There must be pre-defined categories in the app from the beginning (3-5 is enough).
#### Install packages: `yarn`

Should have following fields
#### Start server: `yarn start`

- id
- label
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

### Transaction
#### Used technologies:

Should have following fields
##### `✅ React` `✅ Redux` `✅ Scss` `✅ Custom hooks` `✅ React-router-dom`

- id
- label
- date
- amount (negative value means expense, positive value means income)
- category (reference by category id)
### My contacts:

## Screens

### Home

This is the default screen and app entry point. This screen should have a table of transactions and a form for adding a new transaction. Users should not be able to remove transactions. Also, on this screen, there should be a list of categories with the ability to add/remove categories. It's up to you to decide what happens to transactions in category when the category gets deleted.

### Graph(s)

This screen should have a graph or multiple graphs to represent the data. It's up to you to decide how exactly to visualize the data. To give you an example: a graph representing total spends per category.

## Technologies

- Typescript
- SCSS Modules
- React version 16.8 and up, please make sure to use Hooks
- Redux version compatible with React version of choice
- Use `localStorage` as a DB for the app

Usage of any additional libraries, such as react-router is allowed.

## How to participate

There are 3 simple steps

1. Fork this repository
2. Complete the task in your repository
3. Create a PR to this repository

Afterwards we will contact you, please make sure you have contact details in your GitHub profile.

Tip: you can [deploy your application](https://www.freecodecamp.org/news/deploy-a-react-app-to-github-pages/) for demo on github pages for free

Happy coding 🚀
1. `ferideyvazov25@gmail.com`
2. [Linkedin](<[http://localhost:3000](http://localhost:3000)>)
Loading