Giter Club home page Giter Club logo

capstone-project's Introduction

Roam!

This is my Capstone project for the Web Development Bootcamp at neuefische GmbH

Description - This is Roam!

You have some spare time, a few days off and don't know what to do? Find new interesting activities, filter them by your interests and available time and experience something new! If you want something completely New, Roam! got you covered as well! Just open Roam!Map and pick an activity close to you!

Demo

You can have a look at the hosted version on Vercel: Roam! Roam_screenshot

Tech-Stack

Project Setup

  • clone this repository
  • install all dependencies $ npm install
  • create a local .env file and enter:
    • a valid email-adress
  • run app in dev mode $npm start

capstone-project's People

Contributors

bensle avatar

Watchers

 avatar

capstone-project's Issues

Add LocalStorage

Value proposition

As a user,
I want to save my Favorites & added activities in LocalStorage
so that i can see my Favorites & added activities after refreshing the browser or if the browser was closed

Acceptance criteria

  • after setting an activity as favorites, favorites will be saved in localstorage
  • added activities will be saved in localstorage

Complexity

small/medium

Tasks

  • create a branch
  • add localstorage
  • save favorites and (added) activities in localstorage

Add Backend

Value proposition

As a Developer,
I want to have a Backend
so that I can make the app & data available to everyone

As a User,
I want to have a Backend
so that I can benefit from the large number of users and their entries.

Description

Acceptance criteria

  • [ ]

Complexity

medium

Tasks

  • create a branch

Prepare and show data

Value proposition

As a user,
I want to see proposals of activities on screen
so that i can find something new to do in my spare time.

Description

Acceptance criteria

  • Activities should scroll y
  • Activities should not scroll x
  • ActivityCard-component should show name of activity first
  • ActivityCard-component should also show location, tags and a link for further informations

Complexity

Medium

Tasks

  • prepare sample data
  • Create branch
  • Add base styles
  • Setup Storybook for ActivityCard-component
  • Implement ActivityCard-component
  • Add state for Activities
  • Write specs for ActivityCard-component
  • Add ActivityCard-component to app

Set favorites

Value proposition

As a user,
I want to add my most popular activities to my favorites
so that don't have to search for them if want to do/visit them later (again).

Description


Acceptance criteria

  • click on "FavoriteIcon" sets activity as favorite
  • setting a favorite opens Favorites-page
  • Back-button on Favorites-Page brings the user back to activities
  • click on "FavoriteIcon" on FavoritesPage deletes favorite from list
  • Favorites list will be updated immediately
  • ActivitiesPage will have a button to get access to FavoritesPage

Complexity

medium

Tasks

  • Create branch
  • Updating Activity card component
  • Write function for setting activity as favorite
  • Create Favorites Page
  • Create Back-button
  • Write specs for Button (back) & Favorite (add/set)
  • Write function for delete activity from favorites
  • Write specs for deleting Favorites
  • Add Favorites-Page to App

Add a map and show database on map

Value proposition

As a user,
I want to have a map
so that i can see where the different activities are located.

Description

Acceptance criteria

  • map should display the activities from database with marker on the map
  • marker should display onclick tooltip with name and location of the activity
  • Map will be accessible through basic navigation

Complexity

medium

Tasks

  • create a branch
  • import database to map
  • import location and name to the map
  • add basic navigation to map
  • add map to app

Activity-Filter by type

Value proposition

As a user,
I want to filter the activities also by type
so that i can filter the activities not only by duration but also by there type in order to find activities that fit my time and my preferred type.

Description

Acceptance criteria

  • Type of activity filter will be a button
  • No Typefilter is preselected
  • Only one Type filter can be selected
  • Activities should update after a filter was selected / clicked
  • Activities should show the filtered activities
  • Activities should scroll
  • Activity-Type-Filter should not scroll and always be seen and available on top
  • Both filter (type & duration) can be applied at the same time

Complexity

Small

Tasks

  • Create branch
  • Update Storybook for Filter component
  • Implement Type-Filter component (variant)
  • Write specs for Type-Filter component
  • Add Type-Filter component to App

Add styling - Favorites

Value proposition

As a user,
I want to have a well styled app
so that i can enjoy using the app

Description

Acceptance criteria

  • styling should be consistent all over the map
  • same elements/components should look the same all over the app (Buttons, Cards shown on different pages, bodyfont, icons)
  • font(s) should be easy to read
  • font size should not be specified in "px"

Complexity

small to medium

Tasks

  • create a branch
  • add styling
  • check for a11y

Add a flyTo Location to Activitiycards

Value proposition

As a user,
I want to click on the location of my choosen activity
so that i can find them easily on map and dont have to search for them

Description

Acceptance criteria

  • Within the activitycards the user should be able to click the location
  • click on location should transfer the user to map component
  • map component should display chosen location centered and zoomed in

Complexity

medium

Tasks

  • Create branch
  • add logic for transferring the user from activites(/home) directly to chosen Activity on map
  • add spec for "transferring" function
  • update spec for activity card

Activity-Filter by duration

Value proposition

As a user,
I want to filter the activities based on duration
so that i can find activities that fit my available time

Description

Acceptance criteria

  • Activity-Filter are added as buttons
  • No filter is selected at page load
  • Activities should update after a filter was selected / button was clicked
  • After click, Activities should show the filtered activities
  • Activities should scroll
  • Activity-Filter should not scroll and always be seen and available on top

Complexity

medium

Tasks

  • Create branch
  • Setup Storybook for Activity-Filter/Button component
  • Write logic for filtering
  • Implement Activity-Filter component
  • write specs for Activity-Filter component
  • Add Activity-Filter component to App

Delete favorites

Value proposition

As a user,
I want to have the option to delete favorites
so that i can remove activities from my favorites-list in case i don't like them anymore and don't want to save them any longer.

Description

Acceptance criteria

  • click on "FavoriteIcon" deletes favorite from list
  • Favorites list will be updated immediately

Complexity

small

Tasks

  • Create branch
  • Updating Activity card component
  • Write function for delete activity from favorites
  • Write specs for deleting Favorites
  • Add Favorites-Page to App

Update Database

Value proposition

As a developer,
I want to have coordinates for each activity location
so that i can display the locations on a map later on

Description

Acceptance criteria

  • each activity in the database should have to new values: longitude & latitude

Complexity

small

Tasks

  • Create branch
  • update all activities in Database

Add Login and user authentication

Value proposition

As a user,
I want to have a login and authentication
so that i can log into my account, save favorites and just see my own data.

Description

Acceptance criteria

  • [ ]

Complexity

medium

Tasks

  • create a branch

Set new activities directly on map

Value proposition

As a user,
I want to add new activities by clicking on the map
so that i can add them easily at that clicked location

Description

<img src=
width=320px>

Acceptance criteria

  • By clicking

Complexity

medium

Tasks

  • Create branch

Display new added Activites on map

Value proposition

As a user,
I want to to see the new added activities on map as well
so that i can see where they are located

Description

Acceptance criteria

  • activities added by the user should also be displayed on the map
  • Input "Location" is a livesearch for location
  • locationresult will be displayed and can be chosen onclick
  • onclick sets die inputvalue of locationinput to clicked searchresult
  • activities should display onclick tooltip with name and location on the map
  • Activities will be added through navigation "Add"

Complexity

medium

Tasks

  • Create branch
  • update story and spec for AddActivityForm
  • Inputfield "location" musst handle input in a way to get longitude & latitude from that location
  • add geolocation search to AddActivitiesForm
  • geolocation musst provide name, latitude and longitude for setting new activities
  • add updated form to app

Styling for /Home

Value proposition

As a user,
I want to have a well styled app
so that i can enjoy using the app

Description


roam1

Acceptance criteria

  • styling should be consistent all over the map
  • same elements/components should look the same all over the app (Buttons, Cards shown on different pages, bodyfont, icons)
  • font(s) should be easy to read
  • font size should not be specified in "px"
  • update readme.md of my repository and show sample screenshots

Complexity

small to medium

Tasks

  • create a branch
  • add styling

Add Styling - Map

Value proposition

As a user,
I want to have a well styled app
so that i can enjoy using the app

Description

Acceptance criteria

  • styling should be consistent all over the map
  • same elements/components should look the same all over the app (Buttons, Cards shown on different pages, bodyfont, icons)
  • font(s) should be easy to read
  • font size should not be specified in "px"

Complexity

small to medium

Tasks

  • create a branch
  • add styling

User Input for adding new activities

Value proposition

As a user,
I want to add new interesting activities to the list
so that they are stored for later usage, i can share them with others, find them again and have all my activities in one list.

Description

Acceptance criteria

  • Form should open onclick (Button on Activites"Page"
  • Form should be an overlay
  • Overlay should close on closing/cancel button or by clicking the backdrop
  • All input data should be submitted on "Add"
  • New activity should be added to existing activities
  • New activity should be rendered with existing activities
  • Overlay should close if new activity was submitted by clicking "add"
  • "Name" and "Location" should only allow text
  • "Type" and "Duration" will be a drop-down to choose from
  • "More infos" is not required. If user sets more Infos it should be a checked if its a valid url.
  • All input field should show an Error message if input is not correct

Complexity

medium to large

Tasks

  • Create branch
  • Create story for AddActivity component
  • Adding inputs, buttons and selectors to form
  • Collecting data drom all inputs
  • Pushing new entry to existing
  • Write specs for AddActivity component component
  • Add AddActivity component to App

Reset Filter Button

Value proposition

As a user,
I want to reset the chosen filter on a single click
so that i can set a new filter or go back to all activities on a single click

Description

Acceptance criteria

  • Each filter should have a button to reset the filter
  • Each filter can be reseted individually
  • After resetting a filter the new activities should be displayed
  • The filter menu should also display "no filter"

Complexity

Small

Tasks

  • Create branch
  • Update Storybook Filter-component
  • Write specs for delete-filter button
  • Add delete-filter button to app

Add Styling AddActivities/Form

Value proposition

As a user,
I want to have a well styled app
so that i can enjoy using the app

Description

Acceptance criteria

  • styling should be consistent all over the map
  • same elements/components should look the same all over the app (Buttons, Cards shown on different pages, bodyfont, icons)
  • font(s) should be easy to read
  • font size should not be specified in "px"

Complexity

small to medium

Tasks

  • create a branch
  • add styling
  • check for a11y

Delete Activities

Value proposition

As a user,
I want to delete activities
so that activities that I don't like are no longer displayed to me

Description

Acceptance criteria

  • delete button should be added to all activity cards
  • delete button will also be at favotites cards
  • a infobox will explain the icons at favorites page
  • clicking delete should permanently delete the activity
  • Click on deleteButton opens a modal for user confirmation
  • after confirmation activity will be deleted

Complexity

small to medium

Tasks

  • Create branch
  • add delete function
  • add spec for delete function

Add Navigation & routing

Value proposition

As a user,
I want to have a navigation bar
so that I can navigate through the app more conveniently.

Description

Screenshot 2022-07-14 at 00 41 48

Acceptance criteria

  • Navigation will be a sidebar
  • Navigation can be toggled
  • All Pages are accessible via Navigation
  • Navigation will close after page was chosen
  • AddActivities will be converted to a page and no longer be a modal
  • All Navigationbuttons on the pages will be removed
  • Routing should be added and show the correct path

Complexity

medium

Tasks

  • Create branch
  • Create Pages: Favorites, Activities, AddActivities, Map
  • Remove all unnecessary Buttons
  • Create story for navigation component
  • add routing
  • Add navigation component to App

Add Styling - Activities

Value proposition

As a user,
I want to have a well styled app
so that i can enjoy using the app

Description

Acceptance criteria

  • styling should be consistent all over the map
  • same elements/components should look the same all over the app (Buttons, Cards shown on different pages, bodyfont, icons)
  • font(s) should be easy to read
  • font size should not be specified in "px"

Complexity

small to medium

Tasks

  • create a branch
  • add styling
  • check for a11y

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.