Giter VIP home page Giter VIP logo

city-explorer's Introduction

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

Web Response Cycle Mini Diagram

webresponserequest

Lab 07 Data Flow

I've made some adjustments to move my LocationIQ Requests to the back-end server.

Lab07 Diagram

Lab 08 Data Flow

lab08

Lab 10 Stack drawing

Stack

City Explorer Class Lab

Author: Maddie Lewis Version: 1.0.6 for Lab 10

Overview

This is a React application that uses the Axios library to make user-initiated requests for data from a third-party API. I am using LocationIQ to make requests for this assignment. The Movies DB is the API for the movie component, and Weather Bits is the API for the weather tables. You can enter a location to see its latitude and longitude, as well as a map of the area. You could also check the weather at that location, as well as movies about the location. The application should provide feedback as the user interacts in the form of success and error messages.

Getting Started

In order for this application to run, you will need to install Vite, React Bootstrap, and Axios. Otherwise, you can just go to the deployed link.

Architecture

This app was built in Vite React App, with Axios. It also utilizes the React Bootstrap library. LocationIQ provided the API response data. See the list of installed packages below: @popperjs/[email protected]

Change Log

  • 10-12-2023 20:00 - Application now has a fully-functional express server, with a GET route for the location resource.
  • 10-14-2023 12:30 - Application ReadME updated with diagram and information.
  • 10-14-2023 17:11 - Application is now updated with map, CSS, and error display for lab 06.
  • 11-02-2023 14:23 - Application now has a working map display, it's own server to respond back to in order to hide API keys, a Weather component, and error handling.
  • 11-06-2023 17:00 - Application has weather data from a different API, movie data, and production server set up.
  • 11-07-2023 14.20 - Application is more modular for future functionality.
  • 11-11-2023 18.00 - Application is now able to request data from server caches, and make requests for restaurants open now in the query city.

Credit and Collaborations

Thanks for the project parameters from CodeFellows. Thank you to Cameron, for his endless repsponses and thoughtful feedback. Thank you also to Adam, for helping me out in setup twice!

Time Estimates

For each of the lab features, make an estimate of the time it will take you to complete the feature, and record your start and finish times for that feature:

Name of feature: Set up the App

Estimate of time needed to complete: 2 hours

Start time: 13:30

Finish time: 15:40

Start time: 14:00

Finish time: 15:00

Actual time needed to complete: 3 hours

--

Name of feature: Location's Latitude and Longitude

Estimate of time needed to complete: 3 hours

Start time: 15:00

Finish time: 20:00

Actual time needed to complete: 5 hours

--

Name of feature: Maps, CSS, and Errors

Estimate of time needed to complete: 4 hours

Start time: 13:00

Finish time: 17:00

Actual time needed to complete: 3 hours


Name of feature: Set up the Server

Estimate of time needed to complete: 3 hours

Start time: 18:00

Finish time: 14:20

Actual time needed to complete: 5 days or so.


Name of feature: Set up the Weather

Estimate of time needed to complete: 2 hours

Start time: 10:00

Finish time: 14:20

Actual time needed to complete: 4 hours


Name of feature: Set up the Weather Pt 2

Estimate of time needed to complete: 3 hours

Start time: 15:00

Finish time: 18:00

Actual time needed to complete: 3 hours


Name of feature: Set up the Movies

Estimate of time needed to complete: 2 hours

Start time: 18:00

Finish time: 10:00

Actual time needed to complete: 5 hours


Name of feature: Set up Production Server

Estimate of time needed to complete: 3 hours

Start time: 19:00

Finish time: 22:00

Actual time needed to complete: 3 hours


Name of feature: Separate Server into Modules

Estimate of time needed to complete: 2 hours

Start time: 12:00

Finish time: 13:00

Actual time needed to complete: 1 hours


Name of feature: Recomponentize into smaller Front-End Components

Estimate of time needed to complete: 2 hours

Start time: 13:00

Finish time: 14:20

Actual time needed to complete: 1.5 hours


Name of feature: Make Yelp Call

Estimate of time needed to complete: 2 hours

Start time: 15:00

Finish time: 16:00

Actual time needed to complete: 1 hours


city-explorer's People

Contributors

maddieamie 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.