planejayne / bucketlist-react-redux

Personal bucketlist app

Bucketlist 💓

A personal bucketlist with CRUD functionality, Lastest updated : 5/13/2020

Jiwon Han and Jieun Kang

1. User Flow

This is a site that a user is able to manage their bucketlists.

1. A user is able to navigate to Home and Add page through nav bar.
2. A user is able to create, update and delete buckets aka wishes. All buckets are stored in the Cosmos database.
3. A user is able to see bucket's detail by clicking a specific bucket in the list.

Diagram

Database

|-- bucketlist
|   |-- id
|   |-- title
|   |-- summary
|   |-- targetDate
|   |-- timestamp

What's Included

|-- actions 
|   |-- actions.jsx
|   |-- bucketActions.jsx
|   |-- fetchData.jsx
|-- components :
|   |-- App.jsx
|   |   |-- Nav/Main/Footer
|   |-- App.css
|   |-- Bucket.jsx
|   |-- BucketDetails.jsx
|   |-- CreateBucket.jsx
|   |-- Edit.jsx
|   |-- Footer.jsx
|   |-- Nav.jsx
|-- middleware :
|   |-- middleware-logger.jsx
|-- reducers :
|   |   |-- reducer.js
|-- history.js
|-- index.jsx

2. Development

Tech stack:

• NPM for package management
• react, react-redux as core stack
• Azure functions for serverless compute
• Cosmos Db for database
• drawio for diagram
• favicon

To run dev mode locally:

  $ git clone https://github.com/jiwon-seattle/Bucketlist-react-redux.git
  $ cd into bucketlist
  $ npm install  
  # After successfull pkg installtion
  $ npm start

Now, it will automatically open http://localhost:3000 and show you bucketlist site.

Packages used

react react-redux react-bootstrap react-dom react-router-dom react-scripts redux redux-thunk axios

3. Known Bugs

There are no known bug at this moment

4. Support and contact details

Any feedback is appreciated! Please contact at email: [email protected] or [email protected]

License

This software is licensed under the MIT license

Copyright (c) 2020 Jiwon Han and Jieun Kang