Overview:
A Code: You capstone project utilizing 3rd party API's while also highlighting HTML, CSS, and JavaScript abilities.
Project Overview:
Most fitness applications lack accommodations for individuals with chronic illnesses, creating barriers to maintaining an active lifestyle. This project addresses the need for customizable, accessible fitness resources that considers ability levels and health issues.
| Page | Description |
|---|---|
| Landing Page | The landing page provides users with options to navigate the web application and gives an overview of what to expect, featuring sections for workout routines, macro-nutrient calculator, and nutrition planning. |
| Workout Database Page | Using a custom JavaScript database and YouTube API integration, this page displays categorized exercises (Push/Pull/Legs) with instructional videos, detailed information, and modifications for different ability levels. |
| Macro Calculator | An interactive tool that allows users to input their weight and activity level to receive personalized nutrition recommendations, including daily calorie, protein, fat, and carbohydrate targets. |
| Nutrition | Integrates with the Nutritionix API to allow users to search for food items and view detailed nutritional information, supporting better dietary choices for those with chronic conditions. |
| Medical Disclaimer | Important health information for users, clarifying that the site provides educational content but not medical advice, and encouraging consultation with healthcare professionals. |
| Requirement | Implementation |
|---|---|
| Retrieve data from a third-party API | • Integrated Nutritionix API for food nutrition data • Implemented YouTube API for video metadata |
| Create a Node.js web server using Express.js | • Built a robust Express server with multiple routes • Implemented API endpoints for nutrition and YouTube data |
| Use arrays, objects to store and retrieve information | • Created a comprehensive workout database using JavaScript objects • Organized exercises in categorized arrays (push/pull/legs) |
| Visualize data in a user-friendly way | • Designed organized exercise cards with clear visual hierarchy • Created macro-calculator with specific results |
| Responsive Design | • Implemented responsive layouts using Flexbox • Created media queries for different screen sizes • Built with mobile-first approach |
-
Set up: Before installing the application, you'll need to obtain these API keys:
A. Nutritionix API: For nutrition data lookups; Sign up at Nutritionix API Create an application to get your App ID and API Key @ https://developer.nutritionix.com/signup
B. YouTube API (Google Cloud):
- Go to the Google Cloud Console: https://console.cloud.google.com/
- Create a new project or select an existing one
- Enable the YouTube Data API v3:
- In the navigation menu, click "APIs & Services" > "Library"
- Search for "YouTube Data API v3"
- Click "Enable"
- Create credentials:
- Go to "APIs & Services" > "Credentials"
- Click "Create Credentials" > "API key"
- You will use this API key when you create a
.envfile
-
Clone the repository using GIT
git clone https://github.com/aprilsears/chronically-well.git
-
Navigate to the project directory
cd chronically-well -
Install dependencies
npm install
-
Create environment variables file Create a file named
.envin the project root directory with the following content:NUTRITIONIX_APP_ID=your_app_id_here NUTRITIONIX_API_KEY=your_api_key_here YOUTUBE_API_KEY=your_youtube_api_key_here PORT=3002
-
Start the server
npm run dev
-
Access the application Open your browser and navigate to:
http://localhost:3002