Code Monkey home page Code Monkey logo

first-chair's Introduction

First Chair Colorado

Abstract

Are you looking to book a family ski trip but dont know where to start? Are you a local to the Rocky Mountains looking for a quick 1 stop spot for all your ski resort info? First Chair Colorado has got you covered. This was a solo project assigned by the Turing School of Software and Design designed to challege us with the technologies that were used in Mod 3. These technologies include React, React Router, and Cypress. The project was completed in a 5 day push, requiring roughly 50 hours to complete in its current state. After coming up short while looking for an API that would suit this projects needs, I decided to create my own with Express.js. This allowed me to store data for 30 Colorado Ski resorts, as well as a list of 20+ top runs in the state that would be visible to a user when they visit the page.

Main User Flow

Single Resort Details

Pass-Filter

Run ticklist

Technologies Used

React | React Router | Cypress | NodeJS | Express.js | Javascript | HTML5 | CSS

Deployed UI link (https://first-chair.vercel.app/)

Deployed resort API link (https://first-chair-91dw1yyij-crpearce.vercel.app/api/v1/resorts)

Deployed ski run API link (https://first-chair-91dw1yyij-crpearce.vercel.app/api/v1/runs)

Setup

Clone, that's right, clone not fork. You will use this repo multiple times, but you can only fork a repository once. So here is what you need to do to clone the repo and still be able to push changes to your repo:

  1. Clone down this repo. Since you don't want to name your project "webpack-starter-kit", you can use an optional argument when you run git clone (you replace the [...] with the terminal command arguments): git clone [remote-address] [what you want to name the repo]
  2. Remove the default remote: git remote rm origin (notice that git remote -v not gives you back nothing)
  3. Create a new repo on GitHub with the name of [what you want to name the repo] to be consistent with naming
  4. Copy the address that you would use to clone down this repo - something like [email protected]:...
  5. Add this remote to your cloned down repo: git remote add origin [address you copied in the previous step] - do not include the brackets

Now try to commit something (just add a line in the README) and push it up to your new repo. If everything is setup correctly, you should see the changes on GitHub.

To verify that it is setup correctly, run npm start in your terminal. Go to http://localhost:8080/ and you should see a page with the Turing logo image and a beautiful gradient background. If that's the case, you're good to go. Enter control + c in your terminal to stop the server at any time.

Project Specs

The project specs and rubric for First Chair Colorado can be found here

Challenges

  • React Router
  • Async JavaScript

Wins

  • Functioning GET/POST/DELETE methods through Express.js server
  • Accessibility

Future Extensions

  • Add up to date weather API for each resorts current weather. All free API versions that I attempted to use had a limit of 2 locations to fetch data from at a single time

first-chair's People

Contributors

crpearce avatar danalchapman 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.