Ultra Fuel V2
Ultra Fuel is a Jamstack web-app developed using React and SCSS to create a responsive, optimized interface. It allows users to easily add water, Tailwind and food consumed during an ultra marathon, and displays the total calories and nutrients for each hour to quickly/easily see how the runner is fueling.
It uses Netlify Functions for API calls and Fauna for the database.
Deployed application: https://achulslander-ultra-fuel-v2.netlify.app
Repo: https://github.com/alleycaaat/ultra-fuel-v2
Table of Contents
About The Project
Current Features
- Ability to add or remove food, water or Tailwind to each hour
- Ability to edit individual hours
- Hourly overview shows total water, Tailwind and foods consumed
- Shows calories and important nutrients consumed each hour
- Notes feature displays race specific information
Updates from V1
- useContext and useReducer Hooks
- Reformatted how data is handled
- Added utilities and constants
- Added more components for much cleaner code
Future Features
- Ability to create a user account
- Authenticate log-in information
- Allow for adding custom foods
- Search for food nutri info via API
- Add option for custom notes
- Allow user to set custom start time
Built With
Tested On
Running the Project
1 - Clone the repo
git clone https://github.com/alleycaaat/ultra-fuel-v2.git
2 - Install the dependencies
npm install
3 - Start the development server
netlify dev
Accounts Needed
You'll need a Netlify account for hosting and to utilize Netlify Functions as API endpoints, and a Fauna account for the server.
Netlify
To keep your Fauna key secure, use a .env file to store it locally (double check .env files are in .gitignore).
After installing netlify-cli, in the command line:
1 - log in to Netlify account
netlify login
2 - connect repo with a site on Netlify
netlify link
3 - set the environment key obtained from Fauna
netlify env:set API_KEY_NAME valueFromFauna
alternative step three
3 - import environment variables from .env file
netlify env:import .env
Dependencies
Feedback
As my cats and dog aren't too keen on providing input on my projects, feel free to send me a message if you have some constructive comments, or file an issue if I really buggered something up.
This app was developed specifically for me to use during a race, so things are a bit static at the moment. I have big plans for this project though, and look forward to it growing in leaps in bounds as I further my abilities.
Contact
AC Hulslander - Send me a message
Acknowledgements
