mock-crud-app's People
mock-crud-app's Issues
Tech Debt: Change Biweekly takehome to monthlyWage
- Update Init View
- Update Dash View
- Update instances of "takeHome" with "monthlyWage"
Analysis: Research deploying the application
Technical Details:
- Reminder to turn tracking back on for
app.js
git update-index --no-assume-unchanged <file>
Related to:
#7
Add accessibility features such as aria and semantically meaningful elements
Create Upload Transactions Page
Acceptance Criteria
Upload Transactions page should accept an upload of a Chase transactions CSV.
We can then parse this CSV to add transactions to the DB.
We can give an indicator of a successful parse.
Technical Details
We don't need to store this file anywhere. After the user selects the file to upload, we should do a check to make sure the file is indeed a Chase CSV.
- File extension should be *.CSV
Create Dashboard Page and Remaining Tables
Create uninspected transactions component
ACs:
- Create the Transactions schema/model (transaction.js) to facilitate storing and accessing transactions
- Populate Transactions collection with some sample data
- Display a list of links which bring you to the Edit Transactions page for that particular transaction.
- For example, if I clicked into a transaction with ID: 325, I'd be redirected to the route /dashboard/edit/325
- The links are transactions that have the "inspected" flag set to FALSE
Related Issues:
#17 Analysis: Data Model
Create Budget Component Part 2
- The individual budget component
- Display the name
- Display progress bar
- Field for "Total Remaining"
- Red "X" appended, when clicked, will delete the budget
- Ability to edit the budget
Look into bundlers and deployment tools
Look into tools for the future of the application
-
Bundlers
- Parcel
- Webpack
-
Deployment
- Netlify
- Vercel
- Heroku
-
Automated Testing
- Travis CI
- Circle CI
- Jenkins
-
Linters
- eslint
Technical Analysis: Client Side Dependency Management
Do research into client-side dependency management. We may need certain libraries for client side functionality.
Analysis: Data Model
Acceptance Criteria:
Have a general idea of what necessary table we'll have
Create sample app using RequireJS and Luxon
Sample Issue
Analysis: React
Acceptance Criteria:
Complete the TODO-list overview of React on MDN (https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started).
The goal of this analysis is to prepare for componentizing our frontend in Phase 2. We'll have to test our components using a framework such as Mocha or Jest, but for now, we'll just need to learn React to prep for Phase 2.
Create Add Transactions Page
Analysis: Front-end Framework
Do research on how React might enhance the application.
Do research into using Bootstrap for Phase 1
Acceptance Criteria:
- Have a front-end solution that has a low learning curve.
Analysis: Bootstrap
Acceptance Criteria:
Look into core functionality of Bootstrap. At the end of this analysis, you should be able to understand how to make a simple site using the frontend library. Practice making a mockup of the Budget App's frontend dashboard using Bootstrap.
We'll be using this library on a basic level for our frontend in Phase 1.
Analysis: Look into a testing framework for unit tests
This is a good opportunity to learn a supporting technology
Acceptance Criteria
- Look into the following:
- Jest
- Mocha
- Jasmine
Create Budget Component
ACs:
- User info header
- Add Category collection Schema
- Write a script to populate the Collection with some sample Categories
- Update the transaction population script with some of the added categories
- The "Add Budget" button should trigger a modal to appear
- The modal should allow us to specify a budget Name, the various categories, and the amount
- We should be able to select from any available categories for our budget to encompass
- We should be able to add categories within the "Add Budget" modal
- Consider that this functionality will be used throughout our application, such as when we add transactions or edit transactions. We may want to componentize it somehow.
- Add clientside and serverside validations
Analysis: Typescript
Do research into whether using Typescript would benefit the organization of this project.
Create Edit Budget Page
Acceptance Criteria:
This page is accessible through the associated Budget link.
On this page, we'll be able to edit each of the budget fields and either cancel or save the edits.
Clean up validation logic for serverside
Acceptance Criteria:
Currently, validation is handled using library express-validator on an ad-hoc basis.
This ticket is to identify and add in/update validations across the application whenever we do a DB write in the backend.
Analysis: Model Structure
Acceptance Criteria
After core feature analysis is done, create a mockup diagram of the model structure in MongoDB.
The goal here is to understand our routing and what tables we'll want based on the features we want to support.
Dependencies
Create Help Page
Tech Debt: Combine Readonly and Editable User Info components
ACs:
- Combine readonly and edtiable User Info components in the Dashboard View
- Add field labels
- Break down the logic in dashboardEventListener into the given functions
Technical Details:
- We can just use the same input fields but with a readonly attribute
- Make sure to style the readonly input fields
Create Spending Breakdown Page
Acceptance Criteria:
- Fixed transactions
- Transactions organized by month
Create Init Page and User table
Acceptance Criteria
- Fields:
- First name
- Last name
- Biweekly takehome (after all deductions and taxes)
- Field to enter in "Current Financial Goal"
Technical Details
- We'll need to create the User table at least, but we might as well set up all the initial tables
- We should test writing some values to them
Create mockup navigation bar
Acceptance Criteria:
-
Create a mockup of the navigation bar
-
Nav bar
- Home
- Upload Transactions
- Add Transactions
- Spending breakdown
- About Page
Analysis: General page layout
Set up Express Application
Acceptance Criteria:
- Have a working express application skeleton
Technical Details:
- Express is already installed globally on our system
- We can run
>express XXXX
and>npm install
to create our express app framework and install dependencies
Set up DB and Mongoose connection
Acceptance Criteria:
We have a connection to MongoDB Atlas through Mongoose
Technical Details:
- Create a Cluster in MongoDB Atlas
- Create a DB in MongoDB Atlas
- Get the connection string
- Copy the following code into
app.js
//Set up mongoose connection var mongoose = require('mongoose'); var mongoDB = 'insert_your_database_url_here'; mongoose.connect(mongoDB, { useNewUrlParser: true , useUnifiedTopology: true}); var db = mongoose.connection; db.on('error', console.error.bind(console, 'MongoDB connection error:'));
Analysis: Phase 1 Core Features
Narrow down the core features and technologies
Acceptance Criteria
- txt file with core features, technologies, including a brief description of the layout of the site (include routes if possible)
Analysis: Visual Enhancements
Install Dependencies
Acceptance Criteria:
Initial dependencies are installed so we can use them during development
Make sure the following are installed
- nodemon
- mongoose
- express-validator
- async js
- jade/pug
Technical Details:
- Use
--save-dev
flag when appropriate - Update package.json with scripts for running nodemon
Analysis: Create a design/test doc
It would be useful to have a Design Doc template where we can put the details of a particular issue, such as what changes had to be made and how to test the ticket.
Create a mockup "User Info" component
Acceptance Criteria:
- User Progress Bar
- Can be a mockup, we just want an example of a visual UI component
- User Details
- Simple user details display
- Edit button
- The edit button should allow us to edit the "User Details" fields (it should overwrite the entry in the DB)
Analysis: Look into unit testing and run through a basic tutorial
Analysis: Chase Bank API and OFX
Research using the Chase Bank API and if necessary, utilizing Open Financial Exchange.
Acceptance Criteria:
By the end of our analysis, we want to successful retrieve a transaction from Chase bank.
Leave sample code and screenshots on this issue.
Additionally, we want to do some research on existing apps like Firefly III. Knowing how they store transactions might be useful to us in development. We can add these observations to #9 if they seem appropriate.
Technical Details
Reference: https://stackoverflow.com/questions/7269668/is-there-an-api-to-get-bank-transaction-and-bank-balance
http://www.ofxhome.com/index.php/home/directory
https://www.ofx.net/
Create Edit Transactions Page
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.