About this Project | Why this Project | Functionalities | GettingStarted | Contributing | License

Jacked Planner ( React App )

if you want to take a look, just follow the link:

>> https://jackedplannerreact.web.app/ <<

About this Project

A React + Firebase (Auth + Firestore + Hosting) web application, Jacked Planner is a personal project designed with Figma and implemented with React, React Router, Tailwind, RadixUI and Firebase. The idea of the Project is:

"Organize all training data into a simple dashboard, focusing on maximizing fitness results".'

PS: All the code insede this app can be reused for any application. So you can reuse everything at this repo!

Tecnologies used:

Vite | Javascript | Typescript | React | React Router | Tailwind | RadixUI | Firebase-Firestore | Firebase-Authentication | Firebase-Hosting | HTML | CSS

Why this Project?

This project is part of my personal portfolio, so, I'll be happy if you could provide me any feedback about the project, code, structure or anything that you can report that could make me a better developer!

Email-me: [email protected]

Connect with me at LinkedIn.

Also, you can use this Project as you wish! It's free!

Some Observations About This Project

1 - The app design was created by me =D So let me know if you liked it, and also feel free to send me your feedback or even to contribute with this project.

2 - At the dashboard page, the "JackedPro" section and also the "Shop" section are there just for UI matters. Maybe in the future I'll be implementing the StripeAPI to this project to make these sections funcional.

3 - This is a personal project for portfolio reasons. Thus, the main focus is to put into practice my skills to reproduce a specific idea for a web application and understand the main dfficulties and challenges to be faced for it to work properly.

Follow the link bellow to access the application: >> https://jackedplanner.web.app <<

Functionalities

• The web aplication consists in 2 main pages: Login and Dashboard.
• Login Page:
  • Login Form.
  • Login with Providers ( Github / Google / Facebook / Anonymous ).
  • Create New Account form.
  • Forgot Password form.
  • Aplication description using animations.
  • Pro user call (For Sales) Only for UI matters.
  • Navigation Links with smooth scrolling.
  • 'Scroll to Top' button.
• Dashboard Page:
  • Navigation Menu:
    • A menu with 5 sections (Home / Notes / Settings / PRO / Shop / Logout).
  • Planner Controller.
    • Demonstration planner "PUSH PULL LEGS" (Ref. to Jeff Nippard).
    • Up to 3 planners can be set for each User.
    • Planners CRUD --> custom form for both situations, create and edit planner.
  • Calendar Controller.
  • Workout Section
    • Exercise CRUD --> custom form to add an exercise to the list and also to edit a listed exercise.
    • By selecting an exercise, all it sets will be printed at the Sets Weight section.
    • A Description Modal can be shown by clicking at desciption card.
    • A 'To do' tag for the exercises not fully finished. If all the exercise's sets are done, the tag will recive a Done value.
  • Sets Weight.
    • For each set, a form its shown with the set index, set weight and two inputs, Weight used and Reps lifted, and a submit button as well.
    • Each set has a "done state", marking with a blueish collor. With all the sets done, the exercise recieve the same "done state".
  • Personal Notes
    • Cardios CRUD --> A form for the selected day cardios, setting the time(min) and distance(km).
    • Each cardio has a "done state", just like the exercises and sets.
    • For each date selected, a personal note can be setted.

Getting Started

Prerequisites

To run this project in the development mode, you'll need to have a basic environment to run a Firebase 9 App, that can be found here. Also, you'll need to implement the following features:

Firebase Authentication | Firebase Hosting | Cloud Firestore

PS: By these links, you can access all the docmunentation necessary to make any changes that you want. Fell free to it!

Installing

Cloning the Repository

$ git clone https://github.com/RafaelMariscal/JackedPlanner-ReactJs

Installing dependencies

At the project's root folder, run the following terminal command:

$ npm install

Conecting with a Firebase Project

• After create a Firebase Project, set up the Firebase Hosting feature here

• At Firebase Console, access the project configuration hub and look for SDK configuration. There you will find a code painel with an object 'firebaseConfig'. That object contains the all the information necessary to link an application to your project.

• To connect this application to your Firebase Project, you need to create a .env file with your project's SDK configuration. Here is the following environment variables that need to be set:

  • VITE_API_KEY="your_api_key"
  • VITE_AUTH_DOMAIN="your_auth_domain"
  • VITE_PROJECT_ID="your_project_id"
  • VITE_SOTRAGE_BUCKET="your_storage_bucket"
  • VITE_MESSAGING_SENDER_ID="your_messaging_sender_id"
  • VITE_APP_ID="your_app_id"

PS: Access the Terminal and use the command firebase serve to serve at localHost 5000. Make the changes that you need and test what you want, then, if you want to daploy all the changes made, use the command _firebase deploy.

Contributing

You can send how many PR's do you want, I'll be glad to analyse and accept them! And if you have any question about the project...

Email-me: [email protected]

Connect with me at LinkedIn.

Thank you!

License