Giter Site home page Giter Site logo

boulder_climb_rev2's Introduction

Boulder Climb App REV 2

Introduction

As a climber that frequently visits indoor climbing gyms, I’ve always wanted an application to visualize what climbing routes were available at my local gym and a way to track/manage my climbing progress. In Boulder Climb, I have created a full-stack application for doing just that! In this example application, Boulder Climb represents an existing climbing climbing gym franchise. The application uses authentication and authorization to distinguish whether or not the user that logs in is a general member (default) or an employee(pre-set, see below for login info).

Click HERE for a video demonstration!

Click HERE to visit the deployed site!

User Experience

The Boulder Climb App has two distinct user types: General User and an Employee.

Employee

As an Employee of Boulder Climb, I can expect to do the following:

  • View an interactive map in which you can create new routes or update existing active routes. The interactive map ONLY displays routes that are set as 'Active'.
  • View a table of ALL climbing routes, as long as they have not been deleted. From this table, a user can viaulize how populare a route is and make active again. They can also click a button to route back to the interactive map.
  • Sort each route by the columns provided in the table.
  • Upload and View videos on how to effectively climb or 'beta' a route.
  • Add, Edit, or Delete any climbing route information.

In order to view the Employee user page, type in the following credentials of an existing Employee under the Login Page of the application:

Username: employeeJim OR employeeJack password: password

General User

A General User of Boulder Climb is supposed to represent the typical member of a rock climbing gym. As a member, I can expect to do the following:

  • Sign up at the login page if it's your first time or simply login if an account has already been created.
  • Navigate between Home, Current Routes, and Climbed Routes in the Navbar located at the top of the page.
  • As a user climbs more and more routes, the statistics on the home page will update, allowing the user to visually see progress as they climb.
  • Use interactive map to view information about each route.
  • “like” or “climb” a route under the current routes page
  • Upon clicking the “climb” button on the Current Routes page, a table of Climbed Routes becomes populated with information on each route that the user can always access. Additionally, for each climbing route, there’s an option to “Prove It” in which the user can upload a video of themselves climbing the route to prove that they have indeed climbed the route!

Starting Application

First, you will need to create a virtual environment for this Python application. The main directory of this project, open up your terminal and type the following command:

pipenv install
pipenv shell

Now that you are in the virtual environment, the following commands must be completed in the user terminal upon initial startup. Once in the parent directory, cd into the server directory and type the following commands:

python seed.py
python app.py

This will establish the backend development server so the front end can properly pull the information provided by the seed data.

Next, open a new terminal and cd into the client directory. Type the following commands:

npm start

Immediately following the command listed previously, the web application should start up and you should be able to use Boulder Climb as described above.# Boulder_Climb_Rev2

boulder_climb_rev2's People

Contributors

wab0003 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.