Oasis Spaces

Oasis Spaces is designed to provide users the ability to create and track their lists in order to organize their lives. Users can create different kinds of lists ranging from to-do lists to bucket lists. Once an item or list is completed, users can check it off.

Links

• Link to deployed site
• Back End API Repository
• Backend API URL

Planning/Coding Experience

As a group we first created a team culture code and planned out how we wanted to approach this project in terms of prioritizing features for our application. We decided to mob code and work on the features together as a team.

We first worked on the wireframes based on the user stories. Then, we started to work on the backend API, which can be found here: https://github.com/SitBackN-React/oasis-spaces

Once the backend API was completed, we worked on the front end by first testing the authentication portion. Afterwards, we built our routes and components for the list model and item subdocument by completing the CRUD features. We also included redirect links in order to have a smooth user interface experience.

Lastly, we worked on the styling using React bootstrap and CSS, created the background image, and deployed our application.

Unsolved Problems

We still need to update the checkbox feature to include a state so that the checkmarks can remain on the page when viewed again.

User Stories

1. As an unregistered user, I would like to sign up with email and password.
2. As a registered user, I would like to sign in with email and password.
3. As a signed in user, I would like to change password.
4. As a signed in user, I would like to sign out.
5. As a signed in user, I would like to create a bucket list item with a title and description.
6. As a signed in user, I would like to update my bucket list item's title and description.
7. As a signed in user, I would like to delete my bucket list item.
8. As a signed in user, I would like to see all my bucket list items but not other users'.
9. As a signed in user, I would like to cross off items to complete them.

Technologies Used

• React Hooks
• React bootstrap
• Axios
• JSX
• CSS
• HTML
• Adobe Illustrator

Images

Wireframes

Sign-in Page

Home Page

A Specific List Page

A Specific Item with Note Page