Code Monkey home page Code Monkey logo

wafffly / closetr Goto Github PK

View Code? Open in Web Editor NEW
5.0 3.0 2.0 2.81 MB

A closet manager that allows users to monitor their clothing usage patterns, by acting as a digital copy of their closet.

Home Page: http://fideslinga.com/closeter/

License: GNU General Public License v3.0

JavaScript 7.86% TypeScript 71.18% HTML 11.77% CSS 5.59% Dockerfile 0.20% Java 0.58% Ruby 0.77% Objective-C 1.40% Starlark 0.65%
angular node express mongo clothes fashion react-native

closetr's People

Contributors

dependabot[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

desslinga jen-vu

closetr's Issues

S-1: Today Panel UI

Description : The "Today" widget for the dashboard must be designed according the the mock-ups provided. Implement a high-fidelity prototype for the widget, allowing limited interaction with the UI elements.

Required

  • Design "Today" UI of panel according to mock-up.
  • Allow limited interactivity with panel, via front-end objects.

Development Estimates

  • Development: 4 hours.

Attachments
closetr_mockups_web-today-widget

S-9: Closet Manage View UI

Description : The "Closet Manage" view for viewing closet items must be designed according the the mock-ups provided. Implement a high-fidelity prototype, allowing limited interaction with the UI elements. This should allow for adding and deleting clothes from the closet.

Required

  • Design "Closet Manage" view according to mockup provided.
  • Add a link to this new page in the Closet widget.
  • Enable adding, deleting, and editing of clothes.
  • Enable sorting interaction (minimal).
  • Allow limited interactivity with panel, via front-end objects.

Development Estimates

  • Development: 10 hours.

Attachments
closetr_mockups_web-closet-search-screen

S-19: Fix ClothingID Related Issues

Description: Since transitioning into using MongoDB as the database and using its data to display on the front-end, there are a few issues with clothingID. MongoDB creates its own ID for each clothing item we add to the database.

Required

  • Remove functionality that generates clothingID
  • Ensure that id generated by MongoDB is used as the clothingID for all components using it.

Development Estimates

  • Development: 12 hours.

S-6: MongoDB Database Schema Setup

Description : Using the schema plan generated, implement the schema in the database. Populate the database with sample data which will be used for testing future API calls.

Required

  • Implement schema onto database.
  • Populate database with sample data.

Development Estimates

  • Development: 2 hours.

Choosing Stack

  • Choose Stack
    • Frontend Technologies
    • Backend Technologies
    • Database Technologies
    • Mobile Technologies

S-10: Initial README Documentation

Description: Documentation should be provided in the README. The audience of this document would be be both developers (potential contributers) as well as users of the project.

Required

  • High level introduction and description of the project.
  • Description of users of the project.
  • Technology stack used, and justification.
  • Future plans for project.

Development Estimates

  • Development: 12 hours.

S-15: Budget Manage View

Description: Create the UI for the Budget Manage View, which serves as a control panel for Budget related functions for Closetr. This includes the option to set a new budget, over different date ranges, and options such as allowing rollover.

Required

  • Create display of current budget as a progress bar.
  • Display message of current spending, and customized suggestions (Tentative).
  • Allow setting new budget, and different options, and saving these options.
  • Create objects needed for UI interaction.

Development Estimates

  • Development: 12 hours.

S-12: Node Backend Switch

Description : Switch the backend project from Django to Node and Express.

Required

  • Install Node and Express onto the project.
  • Delete Django project.

Development Estimates

  • Development: 3 hours.

S-25: Set up Log In Component (UI)

Description: User should be greeted with log in screen when they visit the app. There will be a field for a Username and Password, which must be filled before they can press "Log In." Once they click on the "Log In", they are redirected to the dashboard.

Required

  • Create log-in screen with username and password fields, and "Log In" button.
  • Add restriction to "Log In" button, requiring the username and password fields to be filled out first.
  • Configure router to load Log In screen on startup.
  • Redirect user to dashboard upon clicking "Log In" button.

Development Estimates

  • Development: 8 hours.

S-8: Closetr API, Return All Clothing Articles

Description: An API is required to return all clothing pieces in the database in a JSON format. The API must be connected to a route that the front-end can call.

Required

  • Create API to return clothing articles in JSON format.
  • Set up the API to a route (string).

Development Estimates

  • Development: 5 hours.

S-43: Create API for Log Outfit Functionality

Description: There is currently no backend API to support the Log Outfit function. A new API should be created which takes an array of clothing as input, the date (possibly), and the username (ID), and stores that entry in the database.

Required
Backend:

  • Create model for outfit entry, which includes clothingID, userID, and date.
  • Create API for logging an outfit, which uses POST to receive clothingID, userID, token, and date. The user must be authenticated using their token, then the entry is added to the database.
  • Create API for getting all clothes that are logged for today's date (or a specific date). Takes date and userID as input and returns logged clothes for that date.
  • Connect the API to the Log Outfit Service.

Development Estimates

  • Development: 24 hours.

S-24: Enable Filter by Date in Spending Manage View

Description: Support filtering clothing purchases by date range (with from date, and to date), as well as filtering from within last (month, week, etc.)

Required

  • Use purchaseDate attribute of clothing, create a pipe that takes a closetList, and date range (from and to) which returns all clothing items that were purchased within the date range.
  • closetList should be filtered every time the user changes the date selectors.

Dependencies

  • #44 : S-23: Add Purchase Date to Clothing Item

Development Estimates

  • Development: 10 hours.

S-41: Angular Components Refactor (5), Table

Description: This is part of a longer project to refactor angular components. In this part, a table component will be created for use in multiple pages. Examples of usage include the list of purchases table. For now, this is a static table, with the possibility of sort functionality.

Required
Controller/Service:

  • Create a new ui-table component in the shared folder.
  • Allow the ui-table to take an array of objects as input.
  • The ui-table will display the table of data using the style defined in the list of purchases table.
  • Allow ui-table to have simple style configurations (e.g. border-style).
  • Replace the tables in budget-widget and spending-manage components with ui-table.

Development Estimates

  • Development: 4 hours.

S-35: Setup Angular Tests

Description
Add test suite for Angular portion.
Reference

Required

  • Cleanup so that running ng test don't result in any failures.

Development Estimates

  • 8 hours.

S-37: Angular Components Refactor (1), Input Fields, Buttons

Description: This is part of a longer project to refactor angular components. In this part, the input fields and buttons will be refactored for easier usability and cleaner code. In particular, the input fields are the full width fields in add-clothing and edit-clothing (for example), and the buttons are the full width buttons as well.

Required
Controller/Service:

  • Create new components for each input field/button style. Copy the styles and functionality from existing code.
  • Put the new components in shared folder.
  • Modify all pages that are using the newly refactored components.

Development Estimates

  • Development: 12 hours.

S-34: Change Back-end APIs and Models for User Management

Description: The Back-end APIs for updating clothing doesn't account for different users. The routes should be changed so that they accept a user ID, and they should only update clothing for a specific user. The Database models should be changed as well. Each user will have it's own closetList as a property, which is an associative array of clothing.

Required

  • Perform database cleanup as necessary.
  • Change APIs so that they account for an extra parameter userID when updating database.
  • Change front-end services and controllers so that they pass in an extra parameter userID when making HTTP requests.

Development Estimates

  • Development: 10 hours.

S-33: User Menu UI

Description: Add a dropdown menu that is triggered when the user clicks the profile icon. It should have three options to start: profile, settings, and sign out.

Required

  • Add dropdown menu when user clicks profile icon.
  • Three menu options: 'My Profile', 'Settings', and 'Sign Out'
  • 'Sign Out' should sign the user out.
  • Leave other options static for now.

Development Estimates

  • Development: 4 hours.

S-38: Angular Components Refactor (2), Search Bar, Back Button

Description: This is part of a longer project to refactor angular components. In this part, the search bar and the back button will be refactored.

Required
Controller/Service:

  • Create new components for the search bar, and the back button. Copy the styles and functionality from existing code.
  • Put the new components in shared folder.
  • Modify all pages that are using the newly refactored components.

Development Estimates

  • Development: 8 hours.

S-13: Log Outfit Search Improvement

Description: Improve the display of the Log Outfit search results, particularly the mobile view because it the content goes beyond the container. Also fix issues regarding adding clothing from search results.

Required

  • Ensure content for search results doesn't exceed container.
  • (Optional) Add pictures of clothing that are displayed as search results.
  • Fix issue where adding clothing results in adding that clothing item back into the closet list. It should only add it to the Log Outfit Clothing list.

Development Estimates

  • Development: 4 hours.

S-23: Add Purchase Date to Clothing Item

Description: There is no purchase date attribute for clothing items. Adding this attribute will help in tracking spending over time.

Required

  • Add purchase date as attribute for clothing item in Edit Clothing, Add Clothing, all services, and database.

Development Estimates

  • Development: 1 hour.

S-17: Add Validation to Add Clothing Logic

Description: There are issues with form validation relating to the Add Clothing component.

Required

  • Allow user to add/edit clothing worn.
  • Ensure that the updating of clothing IDs is working properly.

Development Estimates

  • Development: 6 hours.

S-7: Log Outfit UI (Add Clothing View)

Description : The "Add Clothing" panel for the "Log Outfit" functionality must be designed according the the mock-ups provided. Implement a high-fidelity prototype for the widget, allowing limited interaction with the UI elements.

Required

  • Design "Add Clothing" panel for "Log Outfit" functionality, according to mock-up.
  • Allow limited interactivity with panel, via front-end objects.

Development Estimates

  • Development: 4 hours.

Attachments
closetr_mockups_web-add-clothing-screen

S-20: Closet Service, Returning Empty List

Description: Closet Service is always returning empty list of clothes on the initial call in closet-widget. In the service, the list of clothes is returned before it is populated by the API call.

Required

  • Ensure that closet list returns all clothes properly on start of app.

Development Estimates

  • Development: 8 hours.

S-5: MongoDB Configuration

Description : Configure a MongoDB database onto the back-end project (closetr-api), so that APIs can be made to communicate with the database.

Required

  • MongoDB configuration with the back-end.
  • Establish an architecture that enable DB connections with all future closetr APIs, using best practices.

Development Estimates

  • Development: 6 hours.

S-36: Establish Continuous Delivery for API and Angular App

Description: Create a Continuous Delivery Pipeline that deploys the Angular App and the API to the specified production servers.

Required

DevOps:

  • Setup DevOps in CircleCI
    • Build Artifacts for Pull Requests and master branch merges
      • Backend in Node
      • Frontend in Angular
    • Use Artifacts from master branch merges to deploy
      • Deploy Express Backend to Heroku
      • Deploy Angular Frontend to Heroku

Back End / Front End:

  • Host Backend on Heroku
  • Host Frontend on Heroku

Development Estimates

  • Development: 24 hours.

S-14: Spending Manage View

Description: Create the UI for the Spending Manage View, which serves as a control panel for Spending related functions for Closetr. This includes the the option to search logged spending over periods of time, and allowing to change the number of results displayed. Also includes link to 'Budget Manage View' (possible) and possibly offering suggestions based on current spending compared to budget.

Required

  • Create table view for listing logged spending.
  • Create filters to view logged spending, such as date range, and other filters on items.
  • Offer suggestions, comments on budget.
  • (Tentative) Include link to Budget Manage View
  • Create objects to simulate logged spending.

Development Estimates

  • Development: 12 hours.

S-27: Create API for Register and Log In (Temp)

Description: This is a temporary feature, which may be changed/modified once a better solution is found. Create two APIs: one to log in a user, and one to register a user.

The Log In API will be called when the a user attempts to log in. The input is a username and password, and will return true if the user provided valid credentials, and false otherwise.

The Register API will be called when the user attempts to sign up. The input is a name, username, and password. It will return true, with the new user's data, if a user with the provided data has been successfully created. It will return false otherwise (e.g. if a user with the same provided username already exists).

Required

  • Create API for registering a new user, with the above specifications.
  • Create API for logging in a user, with the above specifications.
  • Link the front-end functionality and UI with the two APIs.
  • For the case of Sign Up API, display UI error when there is an attempt to create a new user with an existing username.
  • For the case of Sign In API, display UI error when the provided username and password doesn't match records.

Development Estimates

  • Development: 16 hours.

S-30: User Authentication with JWT

Description: Update backend login APIs to use JWT to manage user authentication and sessions.

Required

  • Use JWT for user authentication.
  • Follow tutorial here

Development Estimates

  • Development: 10 hours. (may be more due to overhead).

S-11: UI Transitions

Description: Make transitions between pages and elements more smooth.

Required

  • Smoother transitions between pages

Development Estimates

  • Development: 12 hours.

S-4: Log Outfit UI (Search with Cards View)

Description : The "Log Outfit UI" panel must be designed according the the mock-ups provided. Implement a high-fidelity prototype for the widget, allowing limited interaction with the UI elements. This includes the search bar (and the UI for auto-search results). It also includes a panel of closet cards representing clothes logged for a daily outfit.

Required

  • Design search bar component of "Log Outfit" UI according to mock-up.
  • Design panel of closet cards.
  • Allow limited interactivity with UI, via front-end objects.

Development Estimates

  • Development: 6 hours

Attachments
closetr_mockups_web-log-outfit-screen
closetr_mockups_web-log-outfit-search-screen

S-26: Set up Sign Up Component (UI)

Description: User should be able to sign up for an account. There will be a sign-up button available on the log-in screen, which (when clicked) will redirect to the sign-up screen. The user's name, username, password (and confirmation) will be asked. After everything is filled out properly, the user can click "sign up" and they will be redirected to the dashboard.

Required

  • Create sign-up screen with "name," "username," "password," and "confirm password" fields, and a "Sign Up" button.
  • Add restriction to "Sign Up" button, requiring all above fields to be filled properly, and the passwords to match.
  • Configure "sign up" button in the log-in screen, and configure it to redirect to the sign-up screen.
  • Enable "sign up" button only when all input is validated as described.
  • Once the user clicks "sign up" in the sign-up screen, redirect to dashboard.

Dependencies

  • #50 S-25: Set up Log In Component (UI)

Development Estimates

  • Development: 12 hours.

S-40: Angular Components Refactor (4), Folder Restructure

Description: This is part of a longer project to refactor angular components. In this part, several folders will be renamed and made, and components will be moved to appropriate folder categories.

Required
Controller/Service:

  • Rename each of shared, pipes, models, guards, animations, and services to the same name but starting with _ (underscore). Example: _models.
  • Create a new folder components
  • In components, create two folders: page-full and page-partial.
  • Put all existing components appropriately into one of the above folders (page-full or page-partial).

Development Estimates

  • Development: 4 hours.

S-3: Closet Panel UI

Description : The "Closet" widget for the dashboard must be designed according the the mock-ups provided. Implement a high-fidelity prototype for the widget, allowing limited interaction with the UI elements. This includes cards for that contain information about clothing articles.

Required

  • Design "Closet" UI of panel according to mock-up.
  • Design cards for each article of clothing.
  • Allow limited interactivity with panel, via front-end objects.

Development Estimates

  • Development: 8 hours.

Attachments
closetr_mockups_web-closet-widget

S-42: Angular Refactor (6), Styling

Description: This is part of a longer project to refactor angular front-end. In this part, the css file styles.scss, global-variables.scss, and custom.scss will be refactored so that each css file is isolated for a specific function.

Required
CSS:

  • Create a styles folder.
  • Break up the above mentioned scss files into separate files that provide styling specific to some function/page.
  • Refactor styles as needed.
  • Create theming capability.
  • Allow for a dark theme (optional)

Development Estimates

  • Development: 12 hours.

S-35: Profile Page UI and API

Description: Add a new page that houses and displays user data. Includes: their name, biography (optional), picture, and masked password. From this page, they are able to change any of their data (except username, password for later). This page is linked to from the 'My Profile' button in the user menu.

Required
UI:

  • Create new page that display's user's profile.
  • Page includes name, biography, picture, and masked password.
  • Enable toggling edit button, so that user may upload new picture, change name, and biography.
  • Add save button.

Back End:

  • Create API that returns user data. The API will require a valid JWT token (logged in user).
  • Create API that amends user data. The API will require a valid JWT token (logged in user).

Controller/Service:

  • Create HTTP call to above (get user data) API in the user service, and call this service in the controller.
  • Create HTTP call to above (amend user data) API in the user service, and call this service in the controller.
  • Link (amend user data) API to save button.

Development Estimates

  • Development: 12 hours.

S-21: API for Editing Existing Clothing

Description: There is an existing API for inserting new clothing into the database. Also support editing existing clothing.

Required

  • Modify/Use add clothing API to support editing existing clothing.
  • Use API when user clicks 'save' in edit clothing.
  • Remove functionality of updating local closetList when editing existing clothing. Instead update closetList using API to get all clothes.

Development Estimates

  • Development: 8 hours.

S-39: Angular Components Refactor (3), Icons, Filter Selectors

Description: This is part of a longer project to refactor angular components. In this part, the icon (edit, close) buttons, and the sort/filter components (in closet-widget, closet-manage pages) will be refactored.

Required
Controller/Service:

  • Create new component for edit and close buttons.
  • Create a new component for filter selectors. Allow option for a decorative icon.
  • Copy the styles and functionality from existing code.
  • Put the new components in shared folder.
  • Modify all pages that are using the newly refactored components.

Development Estimates

  • Development: 8 hours.

S-32: Implement Auth Guard for Front-end Routes

Description: Add Authorization Guard to front-end project so that visitors are redirected to the login page if they are not signed in. When user is not logged in, they can only access the login and register pages. If they are logged in, they may access all pages except the login and register pages.

Required

  • Follow tutorial here, or other tutorials.

Development Estimates

  • Development: 1 hour. (may be more due to overhead).

S-2: Spending Panel UI

Description : The "Spending" widget for the dashboard must be designed according the the mock-ups provided. Implement a high-fidelity prototype for the widget, allowing limited interaction with the UI elements. This includes the "Budget" section.

Required

  • Design "Spending" UI of panel according to mock-up.
  • Design "Budget" section.
  • Allow limited interactivity with panel, via front-end objects.

Development Estimates

  • Development: 6 hours

Attachments
closetr_mockups_web-spending-widget

S-22: API for Removing Existing Clothing

Description: There is no API for deleting existing clothing. Create API to support this functionality, and then stop usage of updating local closetList whenever a clothing item is deleted.

Required

  • Create API for deleting existing clothing.
  • Use API when user clicks 'x' on clothing card.
  • Remove functionality of updating local closetList when remove existing clothing. Instead update closetList using API to get all clothes.

Development Estimates

  • Development: 6 hours.

S-31: Refactor Clothing Item into Clothing Model

Description: Clothing object should be a model (class) in the front-end code.

Required

  • Create model folder in src.
  • Create Clothing model and define attributes and functions.
  • Refactor controllers/services to use Clothing model as type.

Development Estimates

  • Development: 10 hours.

S-18: Set UI text as Variables

Description: Refactor the front-end code and store headers, filler text, and labels, into constants/variables.

Required

  • Use i18n to store the variables and access them properly.
  • Implement on all pages.

Development Estimates

  • Development: 12 hours.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.