Giter Club home page Giter Club logo

life_tracker_api's Introduction

Week 3 Assignment: Life Tracker

Submitted by: Robert Velasco

Application Features

Core Features

  • The Nav Bar: Implement customized views for users who are logged in vs not logged in.
  • If the user is logged in, it should display a Sign Out button.
  • If no user is logged in, it should display Login and Register buttons
  • Display a logo on the far left side, and contain links to the individual detailed activity page.
  • The Landing Page: Display a large hero image and a brief blurb on what this application is about
  • Login Page: A form that allows users to login with email and password.
  • Registration Page: A form that allows the user to sign up with their email, password, username, first name, and last name.
  • When a user first authenticates, they should be redirected to an authenticated view (i.e the detailed activity page). When they sign out, all frontend data should be reset.
  • Users have access to an overview Activity page that show one summary statistic about each of the 3 types of activity tracked.
  • The API should have a security middleware that only allows authenticated users to access resources and only allows users to access resources about themselves.
  • Users should have the ability to track at least 1 types of activities (i.e Nutrition, Exercise, Sleep, etc.). Each activity should be tracked on separate pages.
  • Deployed website with Heroku & Surge.

Detailed Activity Page:

  • The detailed activity page should display a feed of all previous tracked activities.
  • The detailed activity should contain a form to contain relevant information. (i.e if tracking nutrition this form allows the user to capture calories, timestamp, image, category, etc.)
  • The activity tracked should be given a unique id for easy lookup.

Stretch Features

Implement any of the following features to improve the application:

  • Each model (nutrition, exercise, and sleep) should also implement a fetchById method that queries the database for a record by its id and only serves it to users who own that resource. Create a new dynamic route on the frontend that displays detail about a single record. For instance, nutrition/detail/:id should show a page with all the information about a single nutrition item.
  • Provide a dropdown that allows users to filter activity based on a certain attribute of any activity item.
  • Calculate aggregate statistics based on time periods - such as daily, weekly, monthly aggregates.
  • Create a page that shows all other users that use the life tracker application and allow users to follow each other.

Walkthrough Video

https://www.loom.com/share/a5cb3aba461f4c42a0ae09cb2605d54c

Reflection

  • Did the topics discussed in your labs prepare you to complete the assignment? Be specific, which features in your weekly assignment did you feel unprepared to complete?

Yes. I think the lab from Day 3 of Week 3 really helped me set up my backend. I also appreciated the introduction of custom hooks and context becuase it really helped me organize my code and develop much faster. I felt uneasy about implementing the form for the detailed activity page, especially about how to make calls to the backend for that feauture.

  • If you had more time, what would you have done differently? Would you have added additional features? Changed the way your project responded to a particular event, etc.

Given more time, I would've like to create more custom hooks and perhaps add to the context to improve the readablity of my code. I think some of my code is to single purpose and could be generalized to be more reusable. For example, the Modal component is specially configured for the Exercise Activity.

  • Reflect on your project demo, what went well? Were there things that maybe didn't go as planned? Did you notice something that your peer did that you would like to try next time?

I'm happy with my project demo. I think I had a good pace and showed all of the features I implemented. I think it would have been nice to talk about/show how I refactored some of my code after using custom hooks.

Open-source libraries used

  • Add any links to open-source libraries used in your project.

Shout out

Give a shout out to somebody from your cohort that especially helped you during your project. This can be a fellow peer, instructor, TA, mentor, etc.

I'd like to shoutout my capstone pod for being incredibly fun and supportive.

life_tracker_api's People

Contributors

sancebar avatar

Watchers

 avatar

life_tracker_api's Issues

Project Feedback!

Congratulations on completing all of the required features of the Life Tracker assignment! The skills you were able to incorporate into this assignment will serve as an important foundation as you continue to build increasingly complex projects over the course of the SITE program. Please note that if you wish to continue improving upon this project, you are welcome to re-submit your project at any time so you and we have the updated links in our records. Please note, however, that re-submitting your project will not cause it to be re-graded.

One of the most important learning parts of these projects is the optional user stories. If you were able to complete all of these stories, congratulations! If you were not able to complete the optional user stories, we recommend continuing to build those out in your own time to deepen your understanding of this topic. As a recommended work plan, we encourage you to complete the projects each week with required stories early and then spend time at the end of the week working on the optional extension stories.

If you have any particular questions about the assignment in general or on any of the feedback, post on the discussion forum or email us at [email protected].

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.