https://github.com/chanda-abdul/easy-budget-client
My first full stack capstone project that I created for my Thinkful Course called the "Easy Budget App"
https://github.com/chanda-abdul/easy-budget-client
javascript react reactjs
Last synced: 29 days ago
JSON representation
My first full stack capstone project that I created for my Thinkful Course called the "Easy Budget App"
- Host: GitHub
- URL: https://github.com/chanda-abdul/easy-budget-client
- Owner: Chanda-Abdul
- Created: 2020-05-14T01:08:29.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-09-10T23:58:33.000Z (about 4 years ago)
- Last Synced: 2025-01-13T16:49:17.442Z (11 months ago)
- Topics: javascript, react, reactjs
- Language: JavaScript
- Homepage: https://easy-budget.chandacodes.vercel.app
- Size: 2.75 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Thinkful Full Stack Capstone - Easy Budget App Client
## Programmer
Chanda Abdul
## Summary
While enrolled in Thinkful's Web Development bootcamp I created this Full-stack Capstone project. Easy budget is an interactive web application that was created to view and manage your monthly budget. This app was created so that you can view all of your monthly expenses and figure out whether they align with your financial goals.
Link to the [Live URL application](https://easy-budget.chandacodes.vercel.app)
## Technology Used
#### Front-end
- React
- Router
- Context
- Libraries
- Sweet Alerts
- HTML
- CSS
- Vercel(Zeit)
#### Back-end
- Node.js
- Express
- Knex
- Mocha, Chai & Supertest
- PostgreSQL
- Elephant SQL
- Heroku
## User Stories
Landing Page
- As a new user
- I want to understand what this app does and if it will be useful for me.
- I would like to create a budget
- As a returning user
- I would like to learn more about finances
- I would like to update my budget
Review your budget Screen
- As a new user
- I would like to see what a typical budget looks like
- As a returning user
- I would like to review my current budget
Create an expense screen
- As a returning user
- I would like to add a new expense to my budget
Not Found screen
- As a new user AND As a returning user
- I would like to know that the page I navigated to does not exist
## React Component Structure
- index.js (stateless)
- src/App.js(statefull)
- NavBar.js
- SignupButton.js
- Homepage.js
- GoToBudgetButton.js
- BudgetPage.js
- UpdateBudgetButton.js
- CreateExpensePage.js
- GoToBudgetButton.js
- Overview.js
- HowTo.js
- ProgressSection.js
- Footer.js
#
#### Landing Page
#### Signup Button
- From the landing page click the signup button to view a signup alert.
- From there you can leave your email address to be notified of future app updates.
- This alert was created with Sweet Alerts
#### Review your budget screen
- From the landing page click the Review your Budget button to navigate to the `/budget` page.
- On this page a list of expenses can be viewed in a HTML table that renders a database of expenses which were created with PostgreSQL.
- The database is pre-populated with default expenses.
- Click the Delete button to remove expenses.
- Expenses can be added with the Update Budget button and then the app will navigate to the add and expense page.
#### Create an expense screen
- Once the Update Budget button is clicked the app navigates to the `/create` page
- Enter information for the new expense in the form and click the Add Expense button
- The Review your budget button can be clicked to navigate back to the `/budget` page
- Once the Add Expense button has been click an alert will appear to let you know that the expense has been created.
- This alert was created with Sweet Alerts
#### Not Found screen
- If the user tries to navigate to a page that does not have a route `/*` the Not Found page will be displayed
- This feature was created with React Router
#
## Easy Budget API
Link to the [API Repo](https://github.com/ChandaHubbard/easy-budget-app-api) with API Documentation
## Other features to implement in future versions
[ ] Incorporate the `/PATCH` endpoint into the client.
[ ] Add bootstrap
[ ] Make responsive