cpsc455-bugstorm / travelerstea Goto Github PK

For example if you have useMemo(() => { return dependencyValue++ }, []), we want react to warn that deps is empty instead of looking like this [dependencyValue]

Due: 28th Sunday 2023 10pm

For all team members:

1. What did you work on this past iteration (2 weeks)?
2. What were any major issues/challenges you ran into?
3. What do you plan to work on for this coming iteration (2 weeks)?

~5 sentences max

Try building this

Have the details view appear as a scrollable underneath

Instead of having 2 separate ones.

Refer to Asad's setup in Yojana GitHub CI Workflow

• setup tailwind
• setup redux

• Sidebar #56 @L0Lmaker
  • Preferences (Modal) #53
    • Views
    • Compact, Non-compact
  • Signout Button #57 @vee-16
• #79 @AndyLiang1
  • Pin for Map
• Timeline @Graywing13 #78
  • Trip View (Set of days)
  • Day View (Set of Stages in a day)
• #58 @NLmeng
• #60 @NLmeng
  • Destination (City), Stages per day, Budget, Number of Days
• #70 @NLmeng
  • Destination (City), Stages per day, Budget, Number of Days
• Edit Stage Form #55 @L0Lmaker
• Login Screen #57 @vee-16

• Preferences (Modal)
  • Views
  • Compact, Non-compact

• Build out regular view
• Build out compact view
• Remove this stuff in viewSlice.js: setContentFullscreen, setContentNonFullscreen,

Any other useful dependencies that we may need

Opening as a continuation of #1

1. Obtain Google API Credentials:

• Using Google Cloud Console, create API Key for project.
• Enable the following APIs: Places API and Geocoding API

2. Backend Implementation:

• Set up backend routes and controllers to handle API requests.
• Install the necessary packages to make HTTP requests in your backend.
• Store Google API credentials securely in your backend configuration (environment variables).

3. Fetch Location Coordinates (Places API):

• Implement a backend route to fetch place coordinates using the Places API.
• In the backend controller, make an HTTP GET request to the Places API endpoint with the place name and city
• Parse the response and extract the latitude and longitude coordinates.
• Return the coordinates as the API response.

4. Further response interests:

• Ratings of place
• Opening hours

Links to #30

Originally posted by @L0Lmaker in #11 (comment)

Links to #51

Look at Method 2 of https://trekinbami.medium.com/using-environment-variables-in-react-6b0a99d83cf5

The Create Trip Endpoint should accept a basic list of constraints:

• Destination
• Number of Days
• Budget
• Number of stages (frontend will refer to it as places per day, backend as stages)

For now it can respond with hardcoded data.

Work with the frontend folks to design a response structure that works for both frontend and backend.

Currently @L0Lmaker is working with the following structure:

const mongoose = require('mongoose')

const itineraryStageSchema = new mongoose.Schema({
  stage: Number,
  place: String,
  description: String,
  address: String,
  cost: Number,
})

const itinerarySchema = new mongoose.Schema({
  destination: String,
  budget: Number,
  days: Number,
  stages: Number,
  preferences: [String],
  plan: [itineraryStageSchema],
})

const Itinerary = mongoose.model('Itinerary', itinerarySchema)

module.exports = Itinerary

But it is open to changes if there needs to be any.

• Remove teacups (maybe use them as bullet points instead)
• Maximize amount of info displayed on one page, while continuing to give map a lot of screen real estate.

will have to wait until some tests are written, or mock tests are written

Originally posted by @L0Lmaker in #11 (comment)

Given a list of objects with the following schema:

• color (of the pin)
• icon (an emoji / bootstrap icon, recommended by chatgpt)
• title

Create a reusable component that generates a timeline from that list.

DoD

• When an input list is fed in, a horizontally scrolling timeline with pins coming out of it is generated
• Each item in the input list is represented by its own pin

Bonus:

• Glow and scale to 1.01% when hovered
• When scrolling down with a mouse, this scrollbar should scroll right (think the webstorm tabs bar) --> https://stackoverflow.com/a/57217517
• Separate the pins / sections by day number

• Probably just involves conditionally making bg-slate-100 becomebg-slate-900.
• And figure out how to make the text white across the whole app.
• And add it as a preference in preferences modal

Local dev will help us develop without messing with the actual Atlas cluster. README should include details about how to setup local dev server and how to switch between connecting to Atlas.

Originally posted by @L0Lmaker in #37 (comment)

• Create react app
• Flesh out Component Structure
• Create a main component
• Effective styling for main component
• Minimum of 5 components
• Demonstrable progress towards one of minimal goals
• Add redux

DoD

Basic #75

• Add mapbox map to application
• Create a .env file to store the token, and make code grab token from here
  • Method 2 may be helpful: https://trekinbami.medium.com/using-environment-variables-in-react-6b0a99d83cf5
• Make instructions for other team members to create their own env file
• Delete client/public/globe.PNG

Stretch #201

• Map should display and be centered among all points (e.g. take the leftmost/topmost and rightmost/bottommost values out of a list of coordinate sets, initialize map to be the center of it)
• Map should have proper zoom level

Keep in mind

• Try to minimize rerenders / requests to mapbox, since calls to mapbox are limited

https://classic.yarnpkg.com/en/docs/workspaces/

this way, we only need to do yarn install in root, lint-staged will work on all files, and have scripts to start/test/lint both client and server

Map should have 2 widgets:

1. A (?) thing that displays how to use the map when it's hovered (e.g. ctrl + right mouse to pivot)
2. A "reset view" button that brings user back to the initial view

Due: June 11th Sunday 2023 10pm

For all team members:

1. What did you work on this past iteration (2 weeks)?
2. What were any major issues/challenges you ran into?
3. What do you plan to work on for this coming iteration (2 weeks)?

~5 sentences max