maddiereddy / cribtrakr-client

React client for CribTrakr Fullstack Capstone project created for Thinkful coursework

Status

CribTrakr

Keeps track of user's rental properties and associated expenses by allowing user to:

• add property info like address, picture and related expenses.
• edit or delete info pertaining to any property or expense.
• filter expenses based on property or a date range.

Links

Live App:

https://cribtrakr.netlify.com/

Demo Account Credentials:
Username: demo
Password: password

Server Github Repo: https://github.com/maddiereddy/cribtrakr-api
Client Github Repo: https://github.com/maddiereddy/cribtrakr-client

To Run Locally

Git Clone this repo
cd into folder
npm install
npm start
Add .env file with API URL and variable name REACT_APP_API_BASE_URL

API

I built my own RESTful API which will allow users to add, delete, get and update all rental properties and related expenses. Hosted at https://evening-oasis-38989.herokuapp.com/

API endpoints

GET

All Rental Properties .../api/rentals/
A particular property .../api/rentals/:id
All expenses .../api//expenses
All expenses for a property .../api/expenses/prop/:propId
A particular expense .../api//expenses/:id

PUT

Update property .../api/rentals/:id
Update an expense .../api/expenses/:id

DELETE

Delete property .../api/rentals/:id
Delete expense .../api/expenses/:id

POST

Add a new property .../api/rentals/
Add a new expenses .../api/expenses/

Technology Stack

Front End

• React
• Redux
• HTML
• CSS
• Enzyme
• Jest

Server Side

• Node
• Express
• Mongoose
• MongoDB
• Mocha
• Chai

Screenshots

Landing page:

My Rental Properties page:

Details page:

Expenses page:

Nice-to-have-features for future version

• Ability to add images of expense receipts
• Be able to search/filter expenses by a phrase or name
• Create reports (for export and printing). This would be useful for tax preparation

cribtrakr-client's Issues

Not sure what this is?

cribtrakr-client/src/components/app.js

Line 35 in ed0a634

startPeriodicRefresh() {

Is this to keep the session open? Seems like it would be easier just to set the cookie to last longer rather than do it this way.

localstorage auth token

Interesting that localstorage is used instead of cookies, which are generally seen as safer and more reliable for things like auth tokens.

section html tag

I believe this is improperly used. A section is not an item in a list. It's supposed to describe different parts of a document.

your text editor has weird tab expand settings

Make sure your IDE / text editor has the standard setting for tabs. A tab should be expanded into either 2 or 4 spaces. There are tutorials on how to set this up for various editors, and why it's important to do so.

improper use of < br>

You're not supposed to use < br > like this really. And if you do, it's not a self-closing tag, so it should not have a self-closing slash inside it. It's just <br>

:propId

I'm guessing this :propId could and probably should be removed from the URL. You have to look up the expense in the DB anyway, and I'm guessing you'll get back the property ID at that point. Is there a reason to pass the propId in the URL?

import all

Might be easier to import '*' rather than worry about each action name.

clearInterval doesn't work well

I can't imagine this to be a good way to remove an interval. Intervals are window (global) level. A component unmounting is not. There could easily be cases where clearInterval() doesn't work, and you might end up having multiple intervals running at the same time. I'd recommend just changing the session length to be (much) longer.