chingu-voyages / v49-tier2-team-16 Goto Github PK

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
  
• 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

Task Description

• Review the Voyage Process to prepare for your upcoming Voyage.
• Watch the Welcome to YOUR Voyage video

Technical Considerations
N/a

Additional Considerations
Voyage Guide section of the Chingu Handbook

Member of Epic: #15

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

Describe the problem
The user can type an empty value into the usage prompt and it will result in the server crashing due to poor error-handling.

Actual behavior
When a user is using the app, it is possible to crash the server resulting in more than one user not being able to use the service for a period of time. This is obviously a problem we should address.

There is not a design in place for the error on screen so it just renders simply the error message on screen, which is coming from the client not handling the error correctly either. The client is not parsing the JSON from the server because the server isn't responding with JSON right now. (Come to think of it maybe the server isn't crashed cause do not see error 500)

Expected behavior
The server should have proper error handling. The frontend should have proper error handling. It would be awesome to have a design for the front end error.

To Reproduce
Steps to reproduce the behavior:

1. Go to Our Development Deployment
2. Scroll down to the input with Coordinate colors for my outfit in the contents and replace it with nothing. It should show a placeholder of 'usage'.
3. Click on the Get Recommendations button.
4. See error

Screenshots

Your Environment:

• Chrome Version 125.0.6422.142 (Official Build) (64-bit)

Additional Information
There are also duplicate elements for inputting a usage prompt and submitting the form but only the ones on the left work, which is not intuitive. This bug fix could also address this issue as we are all potentially working on something within it.

And I apologize to anyone that may be upset for deciding to use this tool over Jira for such a thing; but we should utilize what is right for the job and this is the best tool for this job.

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

Task Description
As titled, must install tailwind.css

Technical Considerations
N/A

Additional Considerations
N/A

User Story Description
As a user
I want to be able to see a picture based upon recommended colors
So I can visualize the context and color scheme described

Steps to Follow

• Create a function that receives an array of colors along with the context of how they were generated
• Connect to OpenAI API and generate an image based upon the data being passed in
• Display the Image on screen
• Handle any errors that could occur
• Write tests
• Additional steps as necessary

Additional Considerations
This is dependent upon other tasks to be finished in entirety. However a console version can be implemented in the mean time.

Task Description

• Watch the How to Create a Project Backlog video
  
• 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

Feature Description
Prepare for your Voyage by becoming familiar with the Chingu practices & procedures.

Major User Stories/tasks

• #11
• #2
• #3
• #4

Additional Considerations

Learn more in the Voyage Handbook:

• How to prepare for your Voyage
• The Voyage Process

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

The application should be able to capture the selected color #HEX code

The application should be able to capture the provided context from the user. Amount of symbols for the context text box should be limited to 120-140 symbols

The application should add Color code and Context to the premade prompt and send a request to the Open AI API

Connection to Open AI API should contain error handling

Task Description
Refactor the App.jsx file to separate components and anonymous functions into separate files.

Technical Considerations

1. Component Structure
   Identify Components: Determine which parts of App.jsx should be extracted into separate components.
   Component Naming: Use clear and descriptive names for components to improve readability and maintainability.
   File Organization
   Directory Structure: Organize your components into a logical directory structure. For example:

src/
├── components/
│   ├── Header.jsx
│   ├── Footer.jsx
│   ├── Sidebar.jsx
│   └── ...
├── utils/
│   └── someUtility.js
├── App.jsx
└── index.jsx

Index Files: Consider using index.js files in directories to simplify imports. For example:

// components/index.js
export { default as Header } from './Header';
export { default as Footer } from './Footer';

3. Function Separation
   Utility Functions: Extract utility functions into separate files under a utils directory.
   Hook Functions: If using custom hooks, place them in a hooks directory.
4. Component Communication
   Props: Ensure that components are properly receiving and handling props. Clearly define the props interface.
   State Management: If components share state, consider context API or state management libraries like Redux.
5. Styling
   CSS Modules: If using CSS Modules, ensure styles are scoped to their respective components.
   Styled Components: If using a library like styled-components, keep styles close to the components.
6. Code Splitting
   Lazy Loading: Use React's lazy and Suspense to lazy load components for better performance.
7. Testing
   Unit Tests: Ensure each component and utility function has corresponding unit tests.
   Integration Tests: Test the interaction between components.
8. Documentation
   Comments: Use comments to explain complex logic.
   README: Update documentation to reflect changes in the codebase structure.
9. Code Quality
   Linting and Formatting: Ensure code follows consistent linting and formatting rules.

Additional Considerations

• Performance Optimization
• Error Handling
• Context Management
• Accessibility
• Security
• Theming

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

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

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

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.
  
• Watch the How to Select a Voyage Project video
  

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

Task Description

• Familiarize yourself with the Chingu Agile Methodology used in a Voyage
• Learn more about Agile Methodologies in general by reading Agile Methodology 101

Technical Considerations
N/a

Additional Considerations
N/a

Member of Epic: #15