jesterb0206 / fit-nuts

A single-page application, built using the MERN stack, that is also a progressive web application.

Fit NUTS 🥜

License

This application is under the MIT license

Contributors

Bradley Jester 👈 Click there to view Bradley's GitHub account!

Eddie Figueroa 👈 Click there to view Eddie's GitHub account!

Pat Lubak 👈 Click there to view Pat's GitHub account!

Samuel Lee 👈 Click there to view Samuel's GitHub account!

Thair Ibadi 👈 Click there to view Thair's GitHub account!

Deployment Link

Deployment

👆 Click there!

Table of Contents

• Fit NUTS 🥜
  • License
  • Contributors
  • Deployment Link
  • Table of Contents
  • Description
  • Installation
  • Usage
  • Badges

Table of contents generated with markdown-toc

Description

Fit NUTS 🥜 is a single-page application, built using the MERN stack, that is also a progressive web application. In addition, it features the Mongoose ODM, uses GraphQL queries and mutations for retrieving, adding, updating, and deleting data, includes JSON Web Tokens for authentication and protects sensitive API key information on the server. Users can sign up to create, modify and delete their workout routines for particular days of the week. Also, they can install Fit NUTS 🥜 for offline use by navigating to the URL search bar (there will be an option to install Fit NUTS 🥜 to your computer).

Installation

Clone the repository to your local machine, open your terminal, and navigate to the root folder of the Fit Nuts 🥜 repository. To install the necessary dependencies, run npm i in your command-line terminal. Repeat this process two more times, first navigating to the server folder and second navigating to the client folder (running npm i both times).

Usage

1. To begin using Fit NUTS 🥜, sign up by entering a username, a valid email address and a secure password.

2. Once you sign up you'll be taken to the homepage. Here you can learn more about Fit NUTS 🥜!

3. Navigate to the Create Workout page to add your workout routine for a particular day of the week. Just make sure to enter what day of the week you'll be doing that exercise, it's name and the amount of weight as a numerical value or else you'll receive an error message!

4. On the Create Workout page you can also increase or decrease the number of sets and reps for a particular exercise and remove it all together by clicking the Delete button.

5. To view your workout routine for the week navigate to the Workout Summary page!

6. Finally, read more about the developers behind Fit NUTS 🥜 by navigating to the Meet the Devs page! If you click on a developer's image you'll be taken to their portfolio. Likewise, if you click on the button with the developer's name followed by GitHub you'll be taken to that developer's GitHub account.

Badges

fit-nuts's Issues

login

make login functional in nav bar

-back-end data for login
-able to create user
-able to sign in
-able to logout

Use queries and mutations for retrieving, adding, updating, and deleting data

Delete Unused React Vars We're Not Using

And the corresponding ES Lint disable, no unused vars at the top of the file when we're finished

Use React for the front end

Create Your Workout Session Form Inputs Go Below 0

Right now you can have negative reps and sets

back end for workout summary

back end for workout summary page

-mutations
-queries
-graphql

styling font

select common font for everybody

Be responsive

create workout page

text is left centered
card displayed are left centered

cards displaying workout information--
static scroll bar
cards displayed not showing sets:, or reps labeled
add required to day of the week, name, weight, error message

Use MongoDB and the Mongoose ODM for the database

Homepage-Calendar

Thair--create calendar and style homepage

-able to display calendar
-able to mark calendar when date is done

homepage/landing page

working on the main page/ landing page

-eddie

Be interactive (i.e., accept and respond to user input)

Navbar

create nav bar

-styling
-create links
-make links functional
-thair

-create login/sign up
-create logout once logged in
-link to summary
-link to homepage
-link to singlepage current workout

mainpage, homepage

make picture as footer instead of background so that responsiveness works

login in shows 'see your books' in nav bar

Cards To Modify Or Delete An Exercise Don't Display An H1 With Their Corresponding Day Of The Week

If you're updating multiple cards it's difficult to know what day's exercise you're modifying or deleting.

Create Your Workout Session Add Exercise Form Reps & Sets Counts Below Zero

Just the form to add an exercise, not the cards to update or delete an exercise

Make Fit NUTS Installable

Can someone please help me make sure the code for the service worker JavaScript files is correct? I can't install it for offline use 😔

spacing between links in navbar

Render Workout Summary Cards In Order Of The Days Of The Week

Right now it goes Tuesday, Monday, Wednesday, for example, but it should go Monday, Tuesday, Wednesday, Thursday, etc.

style error message on workout page

meet the devs

cards are different shapes when resizing

Include authentication (JWT)

Use GraphQL with a Node.js and Express.js server

The Background Image Zooms In & Out Depending On The Page You're Visiting

Sorry Eddie 😓 On the homepage it's zoomed out but by the time you reach the Meet the Devs page it's completely zoomed in

Concept

• Application should be a unique and novel idea.

• Your group should clearly and concisely articulate your project idea.

Presentation

• Elevator pitch: a one minute description of your application

• Concept: What is your user story? What was your motivation for development?

• Process: What were the technologies used? How were tasks and roles broken down and assigned? What challenges did you encounter? What were your successes?

• Demo: Show your stuff!

• Directions for Future Development

• Links to the deployed application and the GitHub repository.

Be deployed using Heroku (with data)

homepage responsive dumbell

Have a polished UI

Have a high-quality README (with unique name, description, technologies used, screenshot, and link to deployed application)

Workout Summary

-create workout Summary Page
-bradley

-create way to display on cards
-way to grab data on the back end

bonus
-add in likes

Protect sensitive API key information on the server

Working Workout Page-

Sam-

Work on back-end data, creating functional buttons

Have a clean repository that meets quality coding standards (file structure, naming conventions, best practices for class and id naming conventions, indentation, high-quality comments, etc.)

simply links

-adjust multiple same links

workout summary alphebetically

Implement functionality to meet the requirements of a PWA

• Uses a web manifest

• Uses a service worker for offline functionality

• Is installable

Buttons Don't Change Background Color Upon Hover

Workout summary buttons & the submit button on the create your workout session page

Instead of using a CSS library like Bootstrap, consider one of the following suggestions

• Look into the concept of CSS-in-JS, which abstracts CSS to the component level, using JavaScript to describe styles in a declarative and maintainable way. Some popular libraries include styled-components and Emotion.

• Try using a component library, such as Semantic UI, Chakra UI, or Ant Design.

• Create all the CSS for your application just using CSS.

Delete Commented Out Or Unused Code Or Files

And add comments to the files you worked on as well

workout Summary not rendering correctly upon data upload

workout summary

text left centered
horizontal / webpage scrolling on the cards