Giter Site home page Giter Site logo

chingu-voyages / v42-geckos-team-17 Goto Github PK

View Code? Open in Web Editor NEW
7.0 6.0 0.0 3.32 MB

Okane is an expense tracker app that easily captures all your money flow. | Voyage-42 | https://chingu.io/ | Twitter: https://twitter.com/ChinguCollabs

Home Page: https://okaneapp.netlify.app

HTML 0.97% JavaScript 98.89% CSS 0.09% Shell 0.04%
chartjs leaflet react reactrouter redux redux-toolkit styled-components tailwindcss twinmacro vite

v42-geckos-team-17's Introduction

Okane

Okane is an easy expense and income tracker, which gives accurate graph representation of user's income/expenses/transactions.
This project consists of a website describing an app, and the app which enables users to track expenses/income/transactions and see their transactions visualization to plan their budget and secure their income.

πŸ˜€ User Can

  • use the website to get all the available info about the app
  • contact okane team
  • see okane offices on the map
  • sign up/sign in/sign out
  • see the dashboard with the information about their income/expenses/transactions
  • see graphs describing 'last 30 days' icome and expenses
  • see a list of transactions
  • add new transaction manually
  • see profile page

🀝 Our team

Developers:

Mentor:

  • Notcori

πŸš€ Technologies used

React iconReact Router iconReduxTailwind iconStyled ComponentsChartjs iconVite icon

πŸ“š Project Structure

Inside of the project, you'll see the following folders and files:

/
 client/
 β””β”€β”€β”œβ”€β”€ public/
    β”œβ”€β”€ src/
    β”‚   β”œβ”€β”€ assets/
    β”‚   β”‚   └── data/
    β”‚   β”‚   └── icons/
    β”‚   β”‚   └── images/
    β”‚   β”‚   └── ...
    β”‚   β”œβ”€β”€ components/
    β”‚   β”œβ”€β”€ features/
    β”‚   β”‚   └── account/
    β”‚   β”‚   └── expense/
    β”‚   β”‚   └── income/
    β”‚   β”‚   └── ...
    β”‚   └── pages/
    β”‚   β”‚   └── Dashboard/
    β”‚   β”‚   └── About.jsx
    β”‚   β”‚   └── ...
    β”‚   └── styles/
    β”‚   └── utils/
    └── package.json

🧞 Instructions

To run the client:

open new terminal
cd client
npm install (first time only)
npm run dev

πŸŽ‰

πŸ’» Preview

v42-geckos-team-17's People

Contributors

ashwinc8 avatar gerwyn1 avatar janemoroz avatar jdmedlock avatar mbramani avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

v42-geckos-team-17's Issues

Add FAQ section

Task Description
Add FAQ section

Technical Considerations

  • Make sure it's accessible

Additional Considerations

  • Related to user story #41

Add location section

Task Description
Describe the task to be completed.

Technical Considerations

Additional Considerations

  • Related to user story #34

Add sign in page

Task Description
Add sign in page

Technical Considerations

  • Need validation
  • Since there is no server, can add 'test user' button

Additional Considerations

  • Related to user story #44

Add contact form

Task Description
Add contact form

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

Additional Considerations

  • Related to user story #36

As a user I want to see testimonials So I can trust the app

User Story Description
As a user
I want to see testimonials
So I can trust the app

Steps to Follow (optional)

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

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

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

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

Build a Website

Feature Description
Build a landing page or a multi-page website , which gives the user info about our app.

Major User Stories/tasks

  • User can use a landing page or multi-page website to get all necessary information about the app.
  • User can navigate through website easily
  • #15
  • #21
  • #23
  • #25
  • User can sign in/sign up to get access to his/her dashboard
  • User can see prices option
  • User can read reviews
  • User can read info about Okane
  • User can see office's locations on the map

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

Build an App

Feature Description
Build an App, with wich a user can manage his/her expences/incomes/transactions

Major User Stories/tasks

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

Add top&bottom mobile nav

Task Description
Add top&bottom mobile nav

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

Additional Considerations

  • Related to user story #48

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 Commits (Chingu Handbook)
Git Pull Requests (Chingu Handbook)

Member of Epic: #16

Add hero section

Task Description
Add hero section

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

Additional Considerations

  • Related to user story #30

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

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 #coding-help channel in Discord or by emailing [email protected]

Member of Epic: #15

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

Task Description

  • 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

Add about section

Task Description
Add about section

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

Additional Considerations

  • Related to user story #32

Add downloads section

Task Description
Add downloads section

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

Additional Considerations

  • Related to user story #21

As a user I want to see CTA So I can start free trial

User Story Description
As a user
I want to see CTA
So I can start free trial

Steps to Follow (optional)

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

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. Due to it’s tight integration with GitHub we suggest using ZenHub (it’s free for teams using public repositories)
  • 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

Add testimonials section

Task Description
Add testimonials section

Technical Considerations

  • Make sure it's responsive
  • Maybe add slider for smaller devices

Additional Considerations

  • Related to user story #40

Add promotion stats section

Task Description
Add promotion stats section

Technical Considerations

  • Make sure it's responsive

Additional Considerations

  • Related to user story #23

Vision Statement

Problem Statement: Easy expense and income management, graph representation of user's income/expenses/transactions

Product Vision/Solution: A website describing an app, and the app which enables users to track expenses/income/transactions and see their transactions visualization to plan their budget and secure their income

Target Users: Everyone

Use Cases:

  • use the website to get all the available info about the app
  • contact okane team
  • see okane offices on the map
  • sign up/sign in
  • see the dashboard with the information about their income/expenses/transactions
  • see graphs
  • see transactions
  • filter/sort transactions
  • add transactions manually
  • add accounts
  • sign out

Add footer navigation

Task Description
Add footer navigation

Technical Considerations

  • Make sure it's responsive

Additional Considerations

  • Related to user story #27

Getting Started

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

Major User Stories/tasks

  • Getting Started: πŸš€ Understand the Voyage Process #11
  • Getting Started: πŸ“œ Review the Chingu Agile Methodology #2
  • Getting Started: πŸ€” Start thinking about project ideas & the technical stack #3
  • Getting Started: πŸ™‹ Do you have questions about Chingu or the Voyage process? #4

Additional Considerations
N/a

The Voyage Process - Getting off to a Solid Start!

Feature Description
Chingu has created a process for you to follow during the Voyage. This process helps you to get off on a solid start.

Major User Stories/tasks

  • Step 1: 🀝 Meet your team & schedule Kickoff meeting #5
  • Step 2: πŸ§‘β€πŸ€β€πŸ§‘ Conduct Kickoff meeting #6
  • Step 3: πŸ‘ Choose a project & create a Vision Statement #7
  • Step 4: πŸ“€ Define & prioritize MVP features #8
  • Step 5: πŸ“‹ Create a Project Backlog #9
  • Step 6: πŸ“ Create a Low-fidelity wireframe #14
  • Step 7: βš™οΈ Set Up a Team Workflow #10

Additional Considerations
N/a

Add pricing options

Task Description
Add pricing options

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

Additional Considerations

  • Related to user story #38

Add Header Nav Bar

Task Description
Add header navigation bar

Technical Considerations

  • Make sure Logo is a link and leads to the website home page

Additional Considerations

  • Related to user story #18

Add side vertical navbar

Task Description
Add side navbar

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

Additional Considerations

  • Related to user story #48

Add sign up page

Task Description
Add sign up page

Technical Considerations

  • Need validation
  • Need currency selector
  • Since there is no server, can add 'test user' button

Additional Considerations

  • Related to user story #44

Add CTA section

Task Description
Add CTA section

Technical Considerations

  • Make sure it's responsive

Additional Considerations

  • Related to user story #25

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.