roa-2022 / story-map Goto Github PK

Map with legends of Aotearoa

JavaScript 37.53% HTML 0.90% TypeScript 55.22% SCSS 6.35%

story-map's Introduction

Final Project Plan

Korero O Te Whenua

Korero O Te Whenua is a platform for users to share local Maori stories and legends, which then have their focal location points traced on a map of New Zealand. Users will be able to add their local stories and will have the story published on our site. Join us and explore local areas and learn about myths, legends and stories associated with that place

To get started:

Clone down this repo and run the following commands in your terminal

npm i
npm run knex migrate:latest
npm run knex seed:run
npm run dev

Heroku App

whenua-o-korero.herokuapp.com

Human Skills Group Plan

Wellbeing: Stress profiles and needs

Amy: is going through SOT interviews. Needs to be shown empathy and is prompt to chat about what's going on for her with HS or talk to other team members.
Tyrone: When stressed, he gets quiet and pulls back from participating. He needs to go on walks and cookies.
Matthew E - His stress levels are ok now, but when he's stressed, matt losses focus and don't overthink about other people. He needs to be asked what he's up to.
Matthew T: under stress, he talks faster than usual. He needs the team to emphasise the need for breaks.
Yani: When you see her frowning, not taking breaks and talking sharp, she's stressed. Ask her to go for walks or take a break. She needs affirmation words and a pat on the back.

Expectation setting and agreements:

What do we each want out of this time?

To have fun, learn in the process and build a purposeful App.

What hours will we keep?

Long weekday hours are needed until MVP. Mainly 8.30 to 5 but some team members can stay longer. Amy, Matt E, Matt T and Yani can do some work at the weekend. Tyrone will be in ALK on the weekend, and we'll wait for him for the stretch.

What do we do when conflict arises?

We'll use our HS tools and ask for a mediator if needed. We'll agree to be open and to mention possible conflicts in stand-ups to handle in a separate conversation. We want to tackle disagreements early.

How will we communicate, especially what hours of work will happen over the weekend?

We'll be holding check-ins, stand-ups and retros in person and using the slack outside the campus. About availability, Tyrone will be in ALK on the weekend, and we'll wait for him for the stretch. And the rest of the team is willing to work one day until MVP.

*How will you make decisions together? How will you handle conflict?

About decisions, people will be involved depending on the matter; if it's about a particular feature involving only two teams, those two will be in the meeting. In the stand-up, bring up the subject and see who's interested in having a meeting later. Handle conflict: check in the morning & 4.45 checkout.

How will you, individually and as a team, get the help you need, both technical and non-technically?

We'll get help from facilitators or pairs when we get stuck with the tech for too long. Talk to the facilitator when we don't think it's the right technology. Get help to plan a courageous convo if needed.

How will you make sure everyone feels included?

Listening to other people learning goals. Making sure things are communicated in stand-ups. Take a look at kanban to check available tickets. Stand up when tasks are completed. Stand up 2 min:

How will you work (what roles and what agile rituals will we use etc.)?

Scrum lead: Matt Product owner: Matthew Git Keeper: Amy Vibe watcher: Yani

Check-in = 15 min after everybody is around Check out and retro. Sprints 1 per day Retro to be conducted and the end of every day at 4.45pm

How will you survive (Will you eat together? How will you break the tension? What is your fun times plan?)

Lunch: around 12/12.30 duration will last, depending on the duration.

Tech Planning

What we used in our project:

React
Redux
Node.js
Express
SQLite3
Bulma / Scss
Mapbox
auth0

Wireframes

Home

Stories

SingleStory

AddStory

LATEST DB. https://dbdiagram.io/d/632b85a87b3d2034ff82c1c0

Redux store

Our store will contain an array of objects once populated. There is a number of reducers fabricated to give us control over what gets stored. We have seperate stores for our map, as well as for our list of stories, regions, users and saved stories

Routes

path	method	data	response
/api/v1/stories	GET	--	Array of stories objects
/api/v1/stories	POST	New story object	Object containing new id
/api/v1/regions	GET	--	Array of region objects
/api/v1/search/:region	GET		Array of stories objects with matching region name
/api/v1/saved	POST	added favourites data	New Object
/api/v1/saved/:auth0_id	GET	--	Array of saved objects pertaining to auth0_id value
/api/v1/users	GET	--	Array of users
/api/v1/users	POST	new user data	--

Example seed content:

Stories Table

[
  { 
    id: 1 
    auth0_id: *secret info*
    author: Admin
    title: 'Taumatawhakatangihangakoauauotamateapokaiwhenuakitanatahu'
    sinopsis: "The summit where Tamatea, the man with the big knees, the slider, climber of mountains, the land-swallower who travelled about, played his koauau to his loved one."
    story_txt : "The summit where Tamatea, the man with the big knees, the slider, climber of mountains, the land-swallower who travelled about, played his koauau to his loved one- The summit where Tamatea, the man with the big knees, the slider, climber of mountains, the land-swallower who travelled about, played his koauau to his loved one."
    photo_url: "https://en.wikipedia.org/wiki/K%C5%8Dauau#/media/File:Kooauau.png"
    location:
    
    },
  { 
    
    id: 2
    auth0_id: *secret info*
    author: Admin
    title: "Tāne Mahuta"
    sinopsis: "Tāne Mahuta, Lord of the Forest, is an important figure in Māori history. The oldest of six siblings, Tāne Mahuta, grew tired of living in darkness, closed in between his sky father (Ranginui) and earth mother (Papa-tū-ā-nuku). He decided to push them apart and, in doing so, created the world of light (Te Ao Mārama) we live in today."
    story_txt : "Tāne Mahuta, Lord of the Forest, is an important figure in Māori history. The oldest of six siblings, Tāne Mahuta, grew tired of living in darkness, closed in between his sky father (Ranginui) and earth mother (Papa-tū-ā-nuku). He decided to push them apart and, in doing so, created the world of light (Te Ao Mārama) we live in today."
    photo_url: "https://en.wikipedia.org/wiki/T%C4%81ne_Mahuta#/media/File:00_29_0496_Waipoua_Forest_NZ_-_Kauri_Baum_Tane_Mahuta.jpg"
    location:
  },
]

Regions Table

[
  { 
    id: 1 
    name: "New Zealand"
    },
  { 
    id: 2 
    name: "North Island"
  },
   { 
    id: 3 
    name: "South Island"
  },
  ]

DB diagram

User Stories

MVP

As a visitor, I would like to be able view the home page, with a clear understanding of what the site is, and what i can expect from the experience
As a visitor, I would like to view a list of collected stories
As a visitor, from the list of collected stories, I would like to select and view a single story
As a visitor, I would like to filter stories by region

MVP+

(add user priviledges & map functionality)

As a user, I would like to choose whether I view the collection of stories from a list, or from the map via seperately labelled routing links
As a user, when I view the map, I want to be able to click a pin on the map to view the story associated with that pin
As a user, when I add a story, I want to be able to select a region that my story pertains to and a specific location point for the map

AUTHENTICATION

As a user, I would like to have the power to delete my stories
As a user, I want to be able to log in to the site, in order to add stories safely
As a user, I want to be able to save stories to my profile
As a user, I would like to be able to have input on Iwi relations and ties to the selected story

Planned Structure

Home page

MVP - The home page will detail the purpose of our website and have a navbar displayed above a pulsating hero image.

MVP+ - The Navbar will contain functioning links to log in (log out if you are signed in), our list of stories and, eventually a link to a map based collection of stories

View Collection of stories

MVP - This page is our main page, where we display a collection of all our stories stored in our database. Each story will be displayed as a card, with an image, title, and location. The navbar will continue to be visible here with the added option to return to the home page. There will also be the option to add a story here as well (This feature will be restricted to users only, as we introduce authentication) Each story card is clickable and will redirect you to a single story view. There will be a search bar of sorts where we can filter the collection by region, to isolate the stories we are looking for

MVP+ - The ‘Add Story’ prompt will only appear when a visitor is logged in. Or perhaps redirect them to a login page when they click on this button. There will be an additional link on navbar to switch our list to a mapped view, where a visitor can click on a pin on a map of New Zealand and view the story associated with that pinned location. This switch action could be a toggle or a new route entirely, and there will be an option to return the list view.

Add a new story

MVP - This page will display a form that allows a visitor to add a story to the database. The details will need to include a name for the story, a region associated with the story, the actual story itself and an image to be connected with it. A user will also be able to pin the location they most want associated with the story using the map

MVP+- Restricted Access to this page, logged in users only

View a Single Story

MVP - This page will display the clicked on story from the previous page. From here, a visitor can read the story. There will be an option to go back to the previous page

MVP+ - Additionally, a user logged in will be able to save this story to their own personal collection of saved stories.

Admin controlled sections!!

##Login/Registration

MVP+ - Users will be directed to login or register to the site if they wish to add stories. A user can peruse the site without any form of registration required

Saved Stories

MVP+ - A user can go to a route that shows all their saved stories. This will be collected into its own database. A user will the ability to remove stories from their saved list. Users can delete the stories they have saved from their list of saved stories

Admin Related Controls (Not Complete)

Deleting Stories

Stretch - Homepage and views of story collections will be quite similar to normal user access. In Single View, an option to delete a story will exist, with perhaps a prompt confirming this action.

Adding Stories

Stretch - A story that is submitted to be added will be passed to a page that only the admin can view. They will be able to review the story, making adjustments if required and then either accept or decline the story.

story-map's People

Contributors

Watchers

Forkers

yanina-amatore

story-map's Issues

General

README

Include your deployment url
Add a description of your project to the beginning of the readme
Include instructions on how to clone and run the app
Your Auth0 currently displays Log in to roa-2022-amy1 to continue to Map Story. but this can be updated to look more consistent with Story Map rather than just being an amy project 😁

Enhancements/Fixes

localhost:3000

There should be no errors on the console at all in your main working branch!
I shouldn't be able to see a delete button if i'm not meant to be able to? AM I meant to be able to update a story too?

Client-Side

actions

All promises need to have error handling. Add a .catch() to all thunk actions.

apis

In the stories file, you have return res.body but no promise to get res from!
This is duplicate code, move it to a utils file and then import where needed!

function logError(err) {
  if (err.response.text === 'Username Taken') {
    throw new Error('Username already taken - please choose another')
  } else if (err.message === 'Forbidden') {
    throw new Error(
      'Only the user who added the story may update and delete it'
    )
  } else {
    // eslint-disable-next-line no-console
    console.error('Error consuming the API (in client/api.js):', err.message)
    throw err
  }
}

components

There are multiple empty lines in your components. Use a linter and at one have one empty line to break up code max.
If you have Te Reo for some of your options, why not all?
You have no value for some of your inputs. They should have values.
Home.tsx, should use react-router-dom's Link component instead of <a href=''/>.
This should be a button, it is doing an action (the onClick) rather than just linking, have the onClick function navigate after completing the action behaviour. Links navigate you to different pages that is not the default behaviour of interacting with this text. Users expect an action.

<Link className="navLink" to="/" onClick={handleLogOff}>
            Log off
          </Link>

There is a lot of commented out code and unused funcs in this component. Please tidy up for in use code only.
You have broken code in Story.tsx:

<button onClick={() => navigate('/stories/{story.id}/update')}>
            Update Story
 </button>

Do you sometime lose one region? Meaning you need a check on each individual region?

 <option value={allRegions[4]?.id}>Auckland</option>
                  <option value={allRegions[5]?.id}>Waikato</option>
                  <option value={allRegions[6]?.id}>Bay of Plenty</option>
                  <option value={allRegions[7]?.id}>Gisborne</option>

Perhaps you could just check the array exists/has a length before rendering options instead?

Errors

Variable/property errors in Map.tsx, actions/regions.js, and reducers/search.js.

Server-Side

db

There is a file fruits.js that has stories stuff in it? Should this be deleted? Renamed?
Remove unused/commented out code

Secrets should be in an .env file! (and not pushed up to GitHub!)

You've exposed your secret key so you'll need to get a new one and make sure it's not exposed!

Code Consistency

Code Formatting

You need to use a linter.
File names need to be consistent. Use camelCase or lowercase or kebab-case. Pick one!
All imports, function names, line spacing etc needs to be consistent. It's a real eye sore when it's not!
Eg:

import {addStoryApi } from '../apis/stories'

export const ADD_STORY ='ADD_STORY'

What does maori refer to throughout your code? The Te Reo place names? A person? A story?
Decide to use async await OR .then don't use a mix of methods. It makes reading code confusing when you have different code styles.
Remove all console.logs(). If using for errors, instead use console.error().
Remove all commented out code. Comments should only remain present in your main branch if they are useful for explaining the code. (Remove // Add a Story in api file, function name should explain this enough).
Either use api prefixes in all routes or use const rootUrl = '/api/v1/stories/' at the top of api files. Not both!
Seperate package and own imports at the top of your files. In App, you have blocks of mixed.
In Search.tsx, change the order of code inside the component to have variables and state before functions and then the return to be consistent with other components formatting.

Naming

In actions, what does fetchAddStory mean? Is it's purpose to get something from the backend or to post/add something to the backend.
In actions, you have an undefined function showError. Please remove or define.
In actions, what is the difference between addStory and addNewStory. Don't they do the same thing? Then pick one and use the same function in multiple places. Or clearly define how they are different.
In actions, some of your APIs are just called fetchStories and others are called fetchRegionsAPI should they all have API at the end or not?
in actions, all responses should be in the same format as regionsArr or be implied that plurals regions means an array of regions.
In reducers, you made variables for action names, so import those here instead of string text. This is the purpose for making them variables to start with, so when used in the reducer they match an actual action case too! :D

  switch (type) {
    case 'NAVIGATE':
      return payload

Also, do you need redux to navigate? Don't you have routes doing that?

Recommend Projects

React

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

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

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.