TrapperKeeper

TrapperKeeper is a React app that utilizes Redux and React Router to create an intuitive note-keeping app, similar to Google Keep.

Installation Steps (Back End)

• Clone down backend repo: https://github.com/ericweissman/trapper-keeper-be.git
• Install dependencies : npm install
• Start Local Host 3001: npm start
• For testing suite: npm test

Installation Steps (Front End)

• Clone this repo: https://github.com/ericweissman/trapper-keeper.git
• Install dependencies: npm install
• Start Local Host 3000: npm start
• For testing suite: npm test

Background/About

This application was our first attempt at creating and managing a backend to support our frontend app. We designed the backend API endpoints using Node.js and Express. We are utilizing the backend to keep track of the user's notes and associated items. On the frontend, we designed the app using React, Redux and React Router to create an easy-to-use interface that allows users to create and keep track of tasks.

Primary Technologies Used - Front End

• React
• Redux
• React Router
• SCSS
• Jest
• Enzyme
• Masonry

Primary Technologies Used - Back End

• Node.js
• Express

Screenshots

Wireframes

Main Page

• Originally we thought we would have all notes displayed in a straight line, but later we realized we wanted our app to mimic Google Keep and so we pivoted to use Masonry as a display instead.

New Note

Edit Note

Next Steps

Future iterations of the project could include:

• Drag and Drop functionality for note items
• Allow users to adjust color of note
• Allow users to save without clicking Save button

Contributors

Matthew Foxwell

Travis Gee

Eric Weissman