Giter Club home page Giter Club logo

marija-kov / workout-mate Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 1.0 9.4 MB

A workout journal with email authentication and password reset option as well as search filter, pagination, profile customization and data download features. Rate-limited and tested.

Home Page: https://workout-mate.onrender.com

JavaScript 83.41% HTML 0.14% CSS 7.68% Handlebars 0.22% SCSS 8.55%
crud expressjs mern mongodb nodejs react redux full-stack pern postgres

workout-mate's Introduction


logging in to workout mate

Workout Mate is there for you when you need to keep track of your physical activity. It lets you submit exercise whenever you want and without any real-life relevance if that's what you prefer. Workout Mate doesn't judge. Workout Mate lets you be the athlete you want to be.



Table of Contents

  1. App Features and Limitations
  2. Local Usage
  3. Tools and Dependencies
  4. Environment variables
  5. Todos
  6. Author


App Features (User's perspective walkthrough)

As a user, you can create an account on Workout Mate from the Signup page with a valid email address and a strong password. You will then be sent an email with a link to confirm your account. Clicking on the link, you will be redirected to the page that will inform you that your account has been confirmed successfully and you can go to the Login page and use your credentials to access your account. If you enter wrong credentials, you will be alerted so.

signing up confirming account


Once you log in successfully, you will be redirected to your Home page where you will see your generated default username and avatar in the Navbar section. These can be changed by clicking on the avatar or username and then clicking the "Settings" option. This will open the "Profile Settings" form (modal) where you can enter a different username and choose a custom profile image from your device that you can also crop to your taste within the form. All the changes that you made will be saved after clicking the "Upload" button. You can close the modal by clicking the "X" in the top right corner of the form.

opening profile settings updating profile


You can start adding workouts by clicking the "Buff It Up" button. The workout form will appear with "title", "muscle group", "reps" and "load" input fields that you'll have to fill with valid values. Clicking "Add Workout" with valid input will close the modal and make a card with your workout details appear on the page. The time of the entry will be added automatically on every card and you'll find that the workouts are sorted in the chronological order, newer first.

adding workout


Pagination feature at the bottom-left of the page will enable you to access your entire workout history by clicking on buttons with page numbers or chevrons, since the limit is set to 3 workouts per page. Also, you can use the Search bar in the top-left section of the page (right below the Navbar) to search your workout history by the workout title.

Every workout card contains a "delete workout" (trash can) and "edit workout" (pen) icons at the bottom right of the card. By clicking on the trash can, the workout will be deleted from the database. By clicking on the pen, the Edit workout form will pop up and it will be pre-filled with the current workout details. After editing the workout and clicking save, the workout will be updated with the new details. You can opt out of editing by clicking "X".

editing and deleting workouts


You can finish your session with Workout Mate by clicking Log Out in the dropdown menu of your avatar/username and you will be logged out and redirected to the Login page.

If you happen to forget your password, you will be able to recover it by first clicking on "Forgot the password?" found in the login form, which will open a "Reset password request" form that will ask you to enter your email address that you have an account with. Once you correctly enter your email address and click "Proceed", you will be alerted to check your inbox for an email with the password reset link. When you click on the password reset link, you will be redirected to the password reset page that will contain a single form asking you to type your new password in two input fields. The form will check the strength of the new password as well as whether the passwords are matching before you will be allowed to finish the password reset. Once you've successfully reset your password, you will be able to access your account with it.

opening and submitting forgot password form resetting password


In case you want to delete your Workout Mate account, you will have to log in, open "Profile Settings" from the dropdown menu and click on "delete account" at the bottom-right of the form. You will see a dialogue pop-up that will warn you about the consequences of deleting your account and will give you an option to change your mind or delete your account permanently. After you click on "Yes, delete my account permanently", all your data will be deleted from the database and you will be redirected to the Login page.
You can download your data from Workout Mate database as a JSON file by clicking on "download data" in Settings.

Limitations

All users and posts are subject to automated deletion, oldest first, when the limits set on their quantity in the database are exceeded. If too many requests are sent to the server within a set timeframe, the server will respond with an error and reject further requests for a while.


Local Usage

  1. Clone the repo;
  2. Create and populate .env file;
  3. Run this script on your postgres database:
 CREATE TABLE wm_users (
    _id INT8 PRIMARY KEY, 
    created_at TIMESTAMPTZ DEFAULT (now()), 
    email TEXT, 
    password TEXT, 
    username TEXT, 
    profile_image TEXT,
    account_status TEXT DEFAULT ('pending')
);
CREATE TABLE account_confirmation (
    id INT8 PRIMARY KEY, 
    user_id INT8,
    token TEXT,
    expires TIMESTAMPTZ DEFAULT (now() + '1 day'::interval)
);
CREATE TABLE password_reset (
    id INT8 PRIMARY KEY, 
    user_id INT8,
    token TEXT,
    expires TIMESTAMPTZ DEFAULT (now() + '1 day'::interval)
);
  1. While in root directory, copy-paste and run:
cd backend && npm install && npm run dev && cd ../frontend && npm install && npm start

Test command

npm run test to run backend and frontend tests in corresponding directories.


Tools and Dependencies

Backend

Dev Dependencies

Frontend


Environment variables

If you want to run the app in your local environment, you'll need to create a .env file in each of the second-level directories and provide values for the variables below.

Backend .env

#--- Mandatory variables ---#

PG_USER=
PG_PASSWORD=
PG_HOST=
PG_DB=
MONGO_URI=
SECRET=
SALT=
#--- Get fake email account here: https://ethereal.email/create
EMAIL_HOST=
EMAIL_USERNAME=
EMAIL_PASSWORD=

#--- Below are optional ones, defaults are provided ---#

PORT=
CLIENT_URL=
ORIGIN=
AUTH_TOKEN_EXPIRES_IN_MS= # in milliseconds

#--- Database limits:
MAX_USERS=
MAX_WORKOUTS_PER_USER=

#--- Rate limiter:
MAX_API_WORKOUTS_REQS=
MAX_API_USERS_REQS=
MAX_API_RESET_PASSWORD_REQS=

#--- Rate limiter windows (in milliseconds):
API_WORKOUTS_WINDOW_MS=
API_USERS_WINDOW_MS=
API_RESET_PASSWORD_WINDOW_MS=

Frontend .env

#--- Defaults provided ---# REACT_APP_API=
REACT_APP_WEB_SERVICE=localhost


Todos

  • Users should have an option to commit to using their account and posting workouts to avoid automated deletion.

- Update screenshots and screen recordings.

Author

@marija-kov

workout-mate's People

Contributors

marija-kov avatar

Stargazers

 avatar

Watchers

 avatar

Forkers

devel-pa

workout-mate's Issues

EditWorkout.test.js suite is failing

Specific test failing: "should submit updated input fields given that input is valid" (frontend/src/components/tests/EditWorkout.test.js, line: 294);

Reason: Cannot destructure anything from prepopulateEditWorkoutForm because it is undefined ((frontend/src/components/EditWorkout.js, line: 11);

Note: In development and production environment, the feature tested is working as expected.

Improve auth

  • Move auth details out of global state.
  • Should choose an alternative to localStorage as well.

As is, the app needs to check localStorage for user item every time it makes a server request and persistent user state is preventing it from doing it. That results in fulfilling unauthorized requests.
On the other hand, some parts of the UI (Navbar) depend on user state persistence - they appear broken if user item is removed from the localStorage in between renderings.

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.