Giter Club home page Giter Club logo

capstone's Introduction

Rep Recorder

This is Christopher Dobson's App Academy Capstone project. You can view a live deployed version at rep-recorder.onrender.com

Features

Rep recorder is a routine management system and an exercise data tracker.

Exercises

Rep Recorder has a built-in corpus of common exercises, that should cover the needs of most users. However, if desired, users can create bespoke exercises for their own private use.

To this end, users can create exercises (name and description), edit them, read them, and delete them. Since these are private, users can only view public exercises and their own private exercises.

Routines

A routine is a a series of exercises in a particular order with instructions and targets for rep count, set count, and rest time.

Since most lifters will start by basing their routine on an existing routine, users can make private copies of any existing public routine. Users can also create empty routines from scratch.

Once users have a routine, they can edit the routine name and description and delete their own routines.

Users can also edit the steps in that routines. Users can introduce new steps, modify the set/rep/rest count, delete steps, and re-order steps.

Workout Session Data

This is future planned functionality.

A workout session is a recording of a real-life lifting session. It records the actual weight, set count, and rep count of performed exercises.

Users will be able to create a workout session based on a routine, which will create a framework for users to fill in data in the model of that routine. This model is unopinionated, meaning that users are not bound to perfectly perform the routine -- instead, users can add exercises, skip exercises, not complete all sets, and not complete all reps.

After taking data, users will be able to view their session progress and deleting previous session data. Users may not edit session data. Users will also be able to view graphs of their data.

Database Diagram

Database Diagram

Running Locally

  1. Clone this repository (main branch)

  2. Install dependencies

    pipenv install -r requirements.txt
  3. Create a .env file based on the example with proper settings for your development environment

  4. Make sure the SQLite3 database connection URL is in the .env file

  5. This starter organizes all tables inside the flask_schema schema, defined by the SCHEMA environment variable. Replace the value for SCHEMA with a unique name, making sure you use the snake_case convention.

  6. Get into your pipenv, migrate your database, seed your database, and run your Flask app

    pipenv shell
    flask db upgrade
    flask seed all
    flask run
  7. To run the React App in development, checkout the README inside the react-app directory.

Deployment through Render.com

First, refer to your Render.com deployment articles for more detailed instructions about getting started with Render.com, creating a production database, and deployment debugging tips.

From the Dashboard, click on the "New +" button in the navigation bar, and click on "Web Service" to create the application that will be deployed.

Look for the name of the application you want to deploy, and click the "Connect" button to the right of the name.

Now, fill out the form to configure the build and start commands, as well as add the environment variables to properly deploy the application.

Part A: Configure the Start and Build Commands

Start by giving your application a name.

Leave the root directory field blank. By default, Render will run commands from the root directory.

Make sure the Environment field is set set to "Python 3", the Region is set to the location closest to you, and the Branch is set to "main".

Next, add your Build command. This is a script that should include everything that needs to happen before starting the server.

For your Flask project, enter the following command into the Build field, all in one line:

# build command - enter all in one line
npm install --prefix react-app &&
npm run build --prefix react-app &&
pip install -r requirements.txt &&
pip install psycopg2 &&
flask db upgrade &&
flask seed all

This script will install dependencies for the frontend, and run the build command in the package.json file for the frontend, which builds the React application. Then, it will install the dependencies needed for the Python backend, and run the migration and seed files.

Now, add your start command in the Start field:

# start script
gunicorn app:app

If you are using websockets, use the following start command instead for increased performance:

gunicorn --worker-class eventlet -w 1 app:app

Part B: Add the Environment Variables

Click on the "Advanced" button at the bottom of the form to configure the environment variables your application needs to access to run properly. In the development environment, you have been securing these variables in the .env file, which has been removed from source control. In this step, you will need to input the keys and values for the environment variables you need for production into the Render GUI.

Click on "Add Environment Variable" to start adding all of the variables you need for the production environment.

Add the following keys and values in the Render GUI form:

  • SECRET_KEY (click "Generate" to generate a secure secret for production)
  • FLASK_ENV production
  • FLASK_APP app
  • SCHEMA (your unique schema name, in snake_case)
  • REACT_APP_BASE_URL (use render.com url, located at top of page, similar to https://this-application-name.onrender.com)

In a new tab, navigate to your dashboard and click on your Postgres database instance.

Add the following keys and values:

  • DATABASE_URL (copy value from Internal Database URL field)

Note: Add any other keys and values that may be present in your local .env file. As you work to further develop your project, you may need to add more environment variables to your local .env file. Make sure you add these environment variables to the Render GUI as well for the next deployment.

Next, choose "Yes" for the Auto-Deploy field. This will re-deploy your application every time you push to main.

Now, you are finally ready to deploy! Click "Create Web Service" to deploy your project. The deployment process will likely take about 10-15 minutes if everything works as expected. You can monitor the logs to see your build and start commands being executed, and see any errors in the build process.

When deployment is complete, open your deployed site and check to see if you successfully deployed your Flask application to Render! You can find the URL for your site just below the name of the Web Service at the top of the page.

capstone's People

Contributors

cadobson avatar

Watchers

 avatar

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.