Giter VIP home page Giter VIP logo

chingu-voyages / v48-tier2-team-12 Goto Github PK

View Code? Open in Web Editor NEW
0.0 5.0 0.0 7.23 MB

Dinopedia, an app about dinosaurs with data from London's National History Museum | Team 12 of Chingu Voyage 48 | https://chingu.io/

Home Page: https://v48-dinopedia.netlify.app

JavaScript 0.35% HTML 0.93% CSS 17.10% TypeScript 81.62%
chingu chingu-voyage dinosaur dinosaurs fossil paleontology paleontologist

v48-tier2-team-12's People

Contributors

bulascoskun avatar carlos-morais avatar cris-valente avatar dawooddilawar avatar hudamabkhoot avatar jdmedlock avatar morais-c avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

v48-tier2-team-12's Issues

Getting Started: ๐Ÿ™‹ Do you have questions about Chingu or the Voyage process?

Task Description
If you have questions about Chingu or the Voyage process join one or both of the Chingu Roundtable sessions held every:

  • Wednesday @ 2:00 p.m. GMT -6 (Chicago)
  • Saturday @9:00 a.m. GMT -6 (Chicago)

These sessions give you the opportunity to ask your questions in real time with a member of the Chingu team

Technical Considerations
These are held in our Discord community in the #townhall-chat & #townhall-voice channels.

Additional Considerations
You may also ask questions anytime in the #admin-feedback channel in Discord or by opening a support ticket in the #open-support-ticket channel.

Member of Epic: #15

Add Container for Discover

Task Description
Home Page - Add Container for Discover

Technical Considerations
Use React Components?

Additional Considerations
NA

User Story: #32

Step 4: ๐Ÿ“ค Define & prioritize MVP features

Task Description

  • Each team member should add their ideas to the Project Vision & Feature Planning template before the team meeting
  • Prioritize each feature - Must Have, Should Have, Nice to Have
  • Meet with the team to review each feature & refine priorities

Technical Considerations
N/a

Additional Considerations
All Must Have tasks will make up your MVP. Make sure that you control the scope of the project by limiting the number of Must Have features to the ones you can reasonably complete by the end of Sprint 6.

Remember that you can always add new features once you complete the MVP.

Resources
Choose a Project & create a Vision Statement (Chingu Handbook)
Define & Prioritize MVP features (Chingu Handbook)

Member of Epic: #16

CategoryTiles Component - Each child in a list should have a unique "key" prop.

Describe the problem
An error on console, on homepage:
Each child in a list should have a unique "key" prop.
Check the render method of CategoryTiles.

To Reproduce
Steps to reproduce the behavior:

  1. Refresh homepage
  2. Open devtools / console

Additional Information
Same problem reported on DinoCardGrid.
Used:
key={index}

Can this be used here?

Epic#8 - Children Mode

Feature Description
Children Mode

ToDo:

Major User Stories/tasks

  • User Story or Task #1
  • User Story or Task #2
  • Additional User Stories or Tasks as necessary

Additional Considerations
Include anything else that may be helpful. For example, links to external resources.

Epic#5 - Responsiveness Implement tablet and desktop view

Feature Description
When app is accessed on different devices (Phone, Tablet, Desktop) Web UI must scale well:
The dynamic elements must be loaded correctly
The images must be displayed right

ToDo:

Major User Stories/tasks

  • User Story or Task #1
  • User Story or Task #2
  • Additional User Stories or Tasks as necessary

Additional Considerations
Include anything else that may be helpful. For example, links to external resources.

Chart Page - Create the UI Design

Task Description
Describe the task to be completed.

Technical Considerations
Include any technical considerations including architecture (e.g. API), required libraries, etc.

Additional Considerations
Any supplemental information including unresolved questions, links to external resources, screenshots, etc.

Epic#4 - Charts

Feature Description
Display two charts (pie chart and doughnut chart) illustrating the distribution of general dinosaur diet and type data.

ToDo:

Major User Stories/tasks

  • User Story or Task #1
  • User Story or Task #2
  • Additional User Stories or Tasks as necessary

Additional Considerations
Include anything else that may be helpful. For example, links to external resources.

Create Pages and Set Up Routes in the React SPA

Task Description
Create Pages and Set Up Routes in a React

Add react-router-dom to the project
Define the Routes

Question:
Should it be created a new file called Routes.js in the root folder in your React app?
Separating routes in their own file, is it a good practice?

Technical Considerations
NA
Additional Considerations
NA

Step 5: ๐Ÿ“‹ Create a Project Backlog

Task Description

  • Watch the How to Create a Project Backlog video
    video link
  • Identify & prioritize features
  • Create an epic for each feature
  • Choose the highest priority epics & divide them into user stories
  • Add your epics & user stories to a backlog tool. You may use any project management tool your team prefers. For example, Jira, Miro, Zenhub, GitHub Projects, etc.
  • Prioritize the user stories

Technical Considerations
N/a

Additional Considerations
During the Voyage youโ€™ll refine the Project Backlog and in every Sprint youโ€™ll move tasks from it to the Sprint Backlog. This is part of the Agile process helps you and your team concentrate only on the tasks that must be completed in that Sprint.

If you are using ZenHub don't forget you'll need to install its browser extension before you can see the ZenHub tab in your GitHub repo.

Resources
Create a Project Backlog (Chingu Handbook)

Member of Epic: #16

Epic#7 - Dark mode

Feature Description
Select one of two themes:

  • Dark
  • Light

ToDo:
Major User Stories/tasks

  • User Story or Task #1
  • User Story or Task #2
  • Additional User Stories or Tasks as necessary

Additional Considerations
Include anything else that may be helpful. For example, links to external resources.

Epic#3 - Dinosaur Search

Feature Description
Search, filter and sort feature allowing users to search for dinosaurs by name, weight, length, country and diet.
Search functionality should be case-insensitive and allow partial matching of dinosaur names.

ToDo:

Major User Stories/tasks

  • User Story or Task #1
  • User Story or Task #2
  • Additional User Stories or Tasks as necessary

Additional Considerations
Include anything else that may be helpful. For example, links to external resources.

Epic#2 - Dinosaur Display

Feature Description
Display dinosaurs' name, weight, length, country, diet and corresponding images sourced from the provided API data.
Each dinosaur entry should be clickable to view full details.

ToDo:

Major User Stories/tasks

  • User Story or Task #1
  • User Story or Task #2
  • Additional User Stories or Tasks as necessary

Additional Considerations
Include anything else that may be helpful. For example, links to external resources.

Home Page

Display Home Page

As a User
I want to start with a Home Page
So I can view suggestions and navigate to the other pages

Steps to Follow (optional)

Additional Considerations

  • This will be the Home Page
  • First version should be Mobile oriented (Following the Mobile First decision)

Add Filter button

Task Description
Add Filter button to Home Page

Technical Considerations
NA
Additional Considerations
NA

User Story: #32

Create DinoCard component

Task Description
Create DinoCard component

JSON data: {
"id": 1,
"name": "Aardonyx",
"imageSrc": "https://www.nhm.ac.uk/resources/nature-online/life/dinosaurs/dinosaur-directory/images/reconstruction/small/aardonyx.jpg",
"typeOfDinosaur": "prosauropod",
"length": 8,
"weight": "N/A",
"diet": "herbivorous",
"whenLived": "Early Jurassic, 199-189 million years ago",
"foundIn": "South Africa",
"taxonomy": "Dinosauria, Saurischia, Sauropodomorpha, Prosauropoda, Anchisauria",
"namedBy": "Yates, Bonnan, Neveling, Chinsamy and Blackbeard 2010 (2009)",
"typeSpecies": "celestae",
"description": "Aardonyx is known from 2 immature individuals. Adults would have been much larger, probably over 10m.Aardonyx would have been largely bipedal (walking on 2 legs) but also capable of walking on all 4 legs. This and its way of feeding are transitional features between those of basal sauropodomorphs and the more derived sauropods (large dinosaurs that walked on all fours) that came later."
},

Create Subfolders on /src for Pages, Components and Utils

Task Description
Create subfolders on /src:

  • /src/pages: contains a new file for each page required for the app.
  • /src/components: Components reused across multiple functionalities or features.
  • /src/utils: - General utility functions serving various features.

Technical Considerations
NA
Additional Considerations
Related with US #41

News Component

Task Description
Using News API

Technical Considerations
Newsapi.org - this is limited to local host - look for an alternative

Additional Considerations
Any supplemental information including unresolved questions, links to external resources, screenshots, etc.

React SPA Project Structure

User Story Description

As a User
I want to start a SPA with a Home Page
So I can view suggestions and navigate to the other pages

Related with Epic 01 - #40

Step 2: ๐Ÿง‘โ€๐Ÿคโ€๐Ÿง‘ Conduct Kickoff meeting

Task Description

  • Using everyone's availability posted to When2Meet schedule a Kickoff meeting
  • Use the Kickoff meeting template in the shared document directory we've provided to guide the discussion and to record notes, decisions, and assignments
  • Set a time for your next meeting for later in the week

Technical Considerations
N/a

Additional Considerations
N/a

Resources
Conduct Kickoff Meeting (Chingu Handbook)

Member of Epic: #16

Step 6: ๐Ÿ“ Create a Low-fidelity wireframe

Objective

Establish a common understanding across the team of what information is in each screen and the actions that may be invoked from each screen.

How

  • Using the features you added to the the Feature Planning template in step 4 identify the screens youโ€™ll need and the information on each one.
  • Map the actions users will be able to perform from each screen and the navigation from screen-to-screen
  • Create a low-fidelity wireframe using a tool like [Figma](https://www.figma.com/) or even pencil and paper.

Resources

How To Wireframe A Website in 3 Easy Steps
Create a low fidelity wireframe (Chingu Handbook)

Member of Epic: #16

Epic#01 - Generic Issues (SPA, Deploy, Docs)

TBD

Feature Description
Describe what the feature is intended to accomplish & why it's important

Major User Stories/tasks

  • User Story or Task #1
  • User Story or Task #2
  • Additional User Stories or Tasks as necessary

Additional Considerations
Include anything else that may be helpful. For example, links to external resources.

Add Search input

Task Description
Home Page - Add Search input

Technical Considerations
NA

Additional Considerations
NA

User Story: #32

Epic#12 - Dinosaur of the day section

Feature Description
Dinosaur of the day section (To be further discussed)

Major User Stories/tasks

  • User Story or Task #1
  • User Story or Task #2
  • Additional User Stories or Tasks as necessary

Additional Considerations
Include anything else that may be helpful. For example, links to external resources.

Epic#10 - Interactive Quiz

Feature Description
Interactive Quiz (To be further discussed)

Major User Stories/tasks

  • User Story or Task #1
  • User Story or Task #2
  • Additional User Stories or Tasks as necessary

Additional Considerations
Include anything else that may be helpful. For example, links to external resources.

Step 7: โš™๏ธ Set Up a Team Workflow

Task Description

  • Decide on the coding standards the team must follow.
  • Define the characteristics of your repo including the number of branches, branch names, & the workflow everyone must follow.
  • Agree on the format of commit messages, how Pull Requests will be reviewed, and GitHub branch protection rules.
  • Decide on where youโ€™ll deploy your app and the branch to be considered as โ€˜productionโ€™ youโ€™ll be deploying from.
  • Decide on what meetings youโ€™ll need each week and to save time, schedule them as recurring meetings. You might want to look ahead to Reaching your MVP to learn more about the types of meetings youโ€™ll need.

Technical Considerations
N/a

Additional Considerations
Setup Your Team Workflow (Chingu Handbook)
Javascript Style Guides
Defining a Git Workflow (Chingu Handbook)
Git Branches (Chingu Handbook)
Git Pull Requests (Chingu Handbook)

Member of Epic: #16

Filter Pane - CSS

Task Description
Create the page only - not behavior

Technical Considerations
Include any technical considerations including architecture (e.g. API), required libraries, etc.

Additional Considerations
Any supplemental information including unresolved questions, links to external resources, screenshots, etc.

Create BottomBar component

Task Description
Create BottomBar component

Technical Considerations
Current location is highlighted in green to show the user where they are

Step 3: ๐Ÿ‘ Choose a project & create a Vision Statement

Task Description
Tier 1 & Tier 2 teams will be assigned a project. Tier 3 teams have the choice of creating a project from specifications provided by Chingu or choosing your own project. Check your team channel for more information on which project you are asked to complete.

For Tier 3 teams who choose to create their own project:

  • Watch the How to Select a Voyage Project video
    video link
  • Collect ideas from the team
  • Brainstorm with your team
  • Vote to select one idea
  • Decide on the technical stack youโ€™ll use to build your project

Technical Considerations
N/a

Additional Considerations
Use the Project Vision and Feature Planning template to gather & vote on everyone's idea

Resources
Choose a Project & create a Vision Statement (Chingu Handbook)

Member of Epic: #16

Step 1: ๐Ÿค Meet your team & schedule Kickoff meeting

Task Description

  • Meet your team by adding your introduction to the Team Channel
  • Start getting to know one another
  • Start discussing what projects you would like to create
  • Watch the Voyage Team Roles video to learn about the different roles members of your team may have signed up to fill.
    video link
  • Watch the How to Select a Voyage Project video
    video link

Technical Considerations
N/a

Additional Considerations
Meet Your team (Chingu Handbook)

Use When2Meet to identify days & times when everyone on the team is available to meet.

Member of Epic: #16

Epic#9 - Interactive map

Feature Description
Interactive map with dinosaurs location

ToDo:

Major User Stories/tasks

  • User Story or Task #1
  • User Story or Task #2
  • Additional User Stories or Tasks as necessary

Additional Considerations
Include anything else that may be helpful. For example, links to external resources.

Epic#11 - Color Blind Design

Feature Description
Color Blind Design (To be further discussed)

Major User Stories/tasks

  • User Story or Task #1
  • User Story or Task #2
  • Additional User Stories or Tasks as necessary

Additional Considerations
Include anything else that may be helpful. For example, links to external resources.

Getting Started: ๐Ÿค” Start thinking about project ideas & the technical stack

Task Description

  • Check out apps that Voyage teams have created in prior Voyage by reviewing the Project Showcase
  • Come up with 1 to 3 ideas for projects you'd like to build so you can discuss them with the rest of the team when the Voyage starts.
  • Think about what technical stack you'd like to use to build that app. Similarly, you'll discuss this as a team at the start of the Voyage.

Technical Considerations
N/a

Additional Considerations
N/a

Resources
Choose a project & create a Vision Statement (Chingu Handbook)

Member of Epic: #15

Add Container for Dinosaur of the day

Task Description
On Home Page
Add Container for Dinosaur of the day

Technical Considerations
Can be a React Component?

Additional Considerations
NA

User Story: #32

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.