Climbify App

Description 📃

Climbify is a mobile application for registering climbing routes and mark them as completed or pending. With it's statistics and functionalities it can ease the climbing progress of a climber. Sign in with Google or Facebook and start enjoying your climbing way.

Technologies Used

• TypeScript.
• React: JavaScript library for building user interfaces.
• Tailwind CSS: CSS framework for modern and responsive design.
• Firebase: Application development platform for real-time database and authentication.
• Redux Toolkit: Library for global state management in the application.
• React Router Dom: Navigation for a one-page application.

Features 🎉

• Route registering: Register the Climbing Routes you want to complete.
• Mark as Complete or Pending: Mark your Routes as Pending if you haven't completed yet, or as completed so they are used for your statistics.
• Maximum and medium grade: Calculate your maximum completed grade and the average grade of your completed routes.
• Sign up and Log in: Sign up to save your own routes and never lose them!
• Statistics: Check the statistics page to see the amount of meters you have climbed, the number of grades you completed and much more!
• Switch to your favourite grading system: Choose between French, American, British, Australian... systems of grading.

URL Climbify App - vercel ⚡

Climbify App

Images

Installation 💻

Follow these steps to clone and run the project locally.

1. Clone the repository:

   git clone https://github.com/tomi-casabona/climbify

2. Navigate to the project directory:

   cd climbify

3. Install dependencies:

   npm install

4. Create a .env.local file in the project root with your Firebase credentials:

   VITE_FIREBASE_API_KEY=your_api_key
   VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
   VITE_FIREBASE_PROJECT_ID=your_project_id
   VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
   VITE_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
   VITE_FIREBASE_APP_ID=your_app_id
   VITE_FIREBASE_MEASUREMENT_ID=your_firebase_measurement_id
   

5. Start the application:

   npm run dev

The application should be available at http://localhost:5173.

Firebase Project Setup

This README will guide you through the steps required to create a project in Firebase and configure the necessary environment variables to integrate it with an application using Vite.

Step 1: Create a Project in Firebase

1. Go to Firebase Console.
2. Click on "Add project".
3. Enter a name for your project and follow the on-screen instructions to create it.

Step 2: Obtain Your Firebase Credentials

1. In the Firebase console, select the project you just created.
2. Go to the "Settings" section (gear icon) in the top left corner.
3. Click on "Project settings".
4. Scroll down to the "Your apps" section.
5. Select the web app for which you want to obtain the credentials, or click on "Add app" if you haven't created one yet.
6. Copy the provided credentials, including:
   • API Key
   • Auth Domain
   • Project ID
   • Storage Bucket
   • Messaging Sender ID
   • App ID
   • Measurement ID

Step 3: Configure Environment Variables

1. Open your project in the code editor.
2. Create a .env.local file in the root of the project if it doesn't already exist.
3. Add the following environment variables to the .env.local file with the credentials you copied in the previous step:

Usage

1. Sign In: Sign in to have acces to the app.
2. Add your first route: Press the add button and register your first route.
3. View Details: Click on your first route to see the details you added.
4. Add tries and comments: Comment your routes and mark them as completed or pending.
5. View Statistics Page: If you have completed routes, check the statistics page to see your results.

Thank you for using Climbify App! Let's get to the top!