dali-lab / shopu

shopping app for you

mailu

mailing app for you

We are four Dartmouth students from the class of 2022 working as Women in Science Program (WISP) interns in conjunction with the DALI Lab for the 2018-2019 school year.

mailU is a mobile application designed to allow students to connect students who want to request and deliver mailed packages from their college/university mailing serivce. We hope that users of this app from the Dartmouth community are able to easily request and deliver mailed items from Hinman in a seamless and easy manner.

Architecture

• Expo is a tool for React Native applications that, by providing a prototype formate, aided our development process.
• React Native is the programming language we used to design and develop the structure of our iOS and Android application.
• Firebase is a Google platform/infrastructure that provides us with a database to implement the backend of our app.

Setup

1. Clone the repo: git clone https://github.com/dali-lab/shopu
2. Enter the app's folder
3. Run npm install to install all node packages
4. Run react-native link to link all the assets in the project

Deployment

1. In terminal tab, run exp start to run the server
2. In another terminal tab, run exp ios to run the iOS simulator

Authors

• Sonal Butala '22
• Sanjana Goli '22
• Archita Harathi '22
• Mia Seiner '22

Acknowledgments

We'd like to thank our faculty advisor Lorie Loeb and mentor Ijemma Onwuzulike (Dartmouth class of ‘19) for their guidance and the hard work they've contributed to helping us succeed in achieving our goals within, as well as outside, this project.

shopu's Issues

React Navigation

• Implement the navigation bar
• Three tab options should be included - shopping, notifications, and buying
• Icons should show with no text and when selected the icon should be filled in correctly
• Functionality should be present - when a tab is tapped the correct page is shown
• Use this guide for Tab Navigation

General Clean Up

• Go through files that aren't being currently worked on by others and apply the appropriate styles
• To ensure that you are working with the latest files just run git pull origin master every time you continue working on this task

Update Designs

• Create notification item in Notifications screen
  • What does an actual notification look like?
• Address the 'Edit' buttons
• Update the look of the modal on the PopUp screen

Implement Shop Search Page

• Develop the designs for the Search page
• Buttons don't have to work
• Navigation and top header bar don't have to be included

Export Icons

• All the assets (icons and images) should be exported and dropped in the assets folder

Your Cart

• Implement the designs of Your Cart
• Make sure to update the edit buttons before you implement this screen
• Use a FlatList to scroll through the items
• Use the PrimaryButton component

Update Complete

• Place <Text> components inside <View> components
• Remove all absolute styles

Update Shop Search Page

• Refer to the new designs and update the Shop Search Page
• Functionality doesn't need to exist, it just needs to look the same as the designs
• Use Dimensions on views and containers that should expand or shrink with different screen sizes

Account Profile

• Implement the design of the Account Profile page
• Functionality should be present - when I click on the Pencil icon I should be able to edit the text
• Think about how to strategically use Text vs. TextInput components
• You don't need to save the new text when you click the button

Update Login Page

• With the new designs in mind, update the Login page
• Functionality doesn't need to work, it just needs to look the same as the designs
• Remember to use Dimensions when thinking about how views and containers should scale

Update Register

• Remove all absolute styles - make sure to only use flexboxes and margins

Item

• Implement the Item page
• Functionality should be present - when the 'Add to Cart!' button is pressed it should take you back to the Your Results page

Driver Search

• Implement the Driver Search design
• Functionality does not have to exist
• Use the PrimaryButton component for now until new and true-to-design component is created

CTA Button Component

• Create a reusable component for the buttons found on the 'Login' and 'Shop Search' screens
• Refer to the structure and style of the PrimaryButton component to know how to create a component
• Refer to the structure and style of the this button

Request Status

• Implement the Request Status
• Make sure to use a FlatList for the items list
• This PR can only be completed once the Toolbar Component #51 is completed

Your Results

• Implement the Your Result page
• Functionality should be present - when the item is pressed it will take you to the Item page

Request Options

• Implement the designs for the Request Options page
• Functionality should be present - when you click on an item it will take you to the Request Profile Page

Update Driver Search

• Remove absolute styles
• Include correct fonts

Implement Register Page

• Develop the designs of the Register Page
• Submit button doesn't have to work
• Implement the new designs

Update Login

• Remove absolute styles

Fonts File

• Move Font.loadAsync out to its own file
• Import that new file into App.js so loading fonts is only called once when the app starts up

Dynamic Font Sizes

• Apply dynamic font sizes to first three screens (BuyerSearch, Notifications, DriverSearch) so headers don't wrap

Checkout

• Implement the Checkout page
• Functionality doesn't need to be there
• Make sure to use the PrimaryButton reusable component for the button
• Since there's only going to be two stores, no need for a ScrollView or FlatList
• Don't use absolute styles

Search Request Modal

• Repurpose @sanjanagoli 's Searching for Request code into a modal component
• Delete Searching for Request page once done
• Styles of the modal should be fairly similar as the original - the only difference is that the white container should have absolute styling

Implement Home Screen

• Implement the Welcome View of application.
• Buttons don't have to work.
• Implement the new designs

Rating

• Implement the Rating Page with new designs
• Start selection functionality doesn't have to work - just import the stars

Connect Screens

• On Saturday, we will connect all the screens with React Navigation
• This will be the transition over to pure Javascript

Notifications Page

• Implement the designs of the notifications page

Variables

• Create a file called variables.json that will hold reusable attributes throughout the app
• Place the file in assets/data/

Drop Down Component

• Implement a drop down component that can be reused on multiple pages
• Create a design in the Figma before implementing

Update Register

• Change <Text> components to <TextInput> components and apply proper styles
  • By doing this, you can remove the unnecessary <View> components
• Remove absolute styles

Implement Login Page

• Implement designs of the Login page
• Buttons don't have to work

Style Guide

• Create a Style Guide for the application
• Follow the instructions from the DALI Build Site

Update Shop Search

• Use TextView component for search
• Add a primary button for search - app should go to a new screen
• Use the correct fonts

Move Images Folder into Assets Folder

• Move images folder into the assets folder
• This will help organize the project

Payment

• Implement the Payment screen
• This Issue cannot be completed until the Toolbar Component #51 is completed

Submit Buttons

• Implement the orange primary button that is used as an 'Accept', 'Add to Cart!', 'Check Out Now!', etc.
• This is a reusable component. Think about how this primary button can be used for the 'Let's Go' button on the first Driver page.
• Make sure to use props for like the title, color, or even height and width of the button

Address Design Comments

• Address the design related comments from Feb 9 meeting
• Appropriately name different screens
• Create connect flow of application to allow Lorie to click around the new design of the app
• Decide on consistent designs

Setup React Navigation

• Include navigation bar and header bar into the app
• We will work on this together as a team on Tuesday, Feb 12

Orange Box Component

• Change all the pages to use the orange component

Update Notifications

• Remove all absolute styles
• Include a FlatList since there will be a list of notifications

Toolbar Component

• Create a toolbar component with the shopping bag and person icon
• Functionality doesn't need to be present - nothing should happen when the icons are pressed
• Make sure to use flexboxes and margins - don't use absolute

Update Login

• Change all the <Text> components into <TextInput> since the user needs to input text to log into their account
  • Use this link to learn how to properly style components
• Remove the <View> components that are acting as bottom borders of <TextInput> components, you can apply appropriate styles to <TextInput> instead of adding extra <View> components
• Remove all absolute styles

Modal Component

• Implement the new modal component
• Functionality should be there - when I select a checkbox the checkmark should appear and a function should be called with TouchableOpacity
• Only the styles of the blue containing View should have absolute styles so it will also be placed on top of everything else when appeared and in the center of the screen

Shopping List

• Implement the Shopping List page
• Functionality doesn't have to exist - the modal doesn't have to pop up
• Don't use absolute styles

Buyer Search

• Implement the Driver Search screen with new, updated designs
• Buttons don't have to work
• Remeber to use Dimensions when necessary

Order Complete

• Implement the look and feel of the newly designed Order Complete screen
• Buttons don't have to work
• Don't include the navigation bar at the bottom

Request Profile

• Implement the Request Profile page
• Functionality doesn't have to exist - the Status Update button doesn't have to work
• Use a FlatList so the user can scroll through their items
  • Make sure that you use an array of data
• Don't use absolute styles

Toolbar Navigation

• When shopping bag is pressed, the app should take to the user's Shopping List
• When shopping cart is pressed, the app should take the user's cart
• When the person icon is pressed, the app should take the user's Account Profile
• Include the Toolbar component to all the pages

Searching for Request

• Implement Searching for Request
• Don't include the navigation bar at the bottom
• Spin wheel should rotate - use this guide for reference