Ultra Fuel

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
• Updates from V1
• Future Features
• Built With
• Tested On
• Running the Project
• Accounts Needed
• Netlify
• Dependencies
• Feedback
• Contact
• Acknowledgements

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

(back to top)

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

---

• react
• react-dom
• react-scripts
• netlify-cli
• faunadb
• react-icons
• sass

(back to top)

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.

(back to top)

Contact

AC Hulslander - Send me a message

(back to top)

Acknowledgements

• Img Shields
• React Icons
• ReadMe Format Inspiration I
• ReadMe Format Inspiration II
• ReadMe Format Inspiration III
• Netlify Doc
• Fauna Docs

(back to top)