├── .eslintrc.json
├── public
├── favicon.ico
└── vercel.svg
├── next.config.js
├── next-env.d.ts
├── pages
├── _app.tsx
├── api
│ └── hello.ts
├── expenses
│ └── index.tsx
└── index.tsx
├── README.md
├── styles
├── globals.css
└── Home.module.css
├── components
├── ExpenseList
│ └── index.tsx
└── ExpenseForm
│ └── index.tsx
├── .gitignore
├── tsconfig.json
├── package.json
└── yarn.lock
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drFabio/calculadora-gastos/main/public/favicon.ico
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | }
5 |
6 | module.exports = nextConfig
7 |
--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 |
--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import '../styles/globals.css'
2 | import type { AppProps } from 'next/app'
3 |
4 | function MyApp({ Component, pageProps }: AppProps) {
5 | return
6 | }
7 |
8 | export default MyApp
9 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## Persona
2 |
3 | Gastadora
4 |
5 | ## Feature
6 |
7 | Registrar um gasto
8 |
9 | ## Journey
10 |
11 | A pessoa seleciona uma categoria
12 | A pessoa registra um valor para o gasto
13 | A pessoa salva esse gasto em uma data (por padrão hoje)
14 |
15 | ---
16 |
17 | Como um gastador, eu desejo registrar meu gasto para checagem futura
18 |
--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | padding: 0;
4 | margin: 0;
5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
7 | }
8 |
9 | a {
10 | color: inherit;
11 | text-decoration: none;
12 | }
13 |
14 | * {
15 | box-sizing: border-box;
16 | }
17 |
--------------------------------------------------------------------------------
/pages/api/hello.ts:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | import type { NextApiRequest, NextApiResponse } from 'next'
3 |
4 | type Data = {
5 | name: string
6 | }
7 |
8 | export default function handler(
9 | req: NextApiRequest,
10 | res: NextApiResponse
11 | ) {
12 | res.status(200).json({ name: 'John Doe' })
13 | }
14 |
--------------------------------------------------------------------------------
/components/ExpenseList/index.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 | import { Expense } from "../ExpenseForm";
3 |
4 | export interface ExpenseListProps {
5 | expenses: Expense[];
6 | }
7 | export const ExpenseList: FC = ({ expenses }) => {
8 | return (
9 |
10 | {expenses.map(({ category, value, date }, index) => (
11 | -
12 | {value} em {category} na {date}
13 |
14 | ))}
15 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
34 | # typescript
35 | *.tsbuildinfo
36 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true
17 | },
18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
19 | "exclude": ["node_modules"]
20 | }
21 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "calculadora-gastos",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "next": "12.1.5",
13 | "react": "18.0.0",
14 | "react-dom": "18.0.0"
15 | },
16 | "devDependencies": {
17 | "@types/node": "17.0.27",
18 | "@types/react": "18.0.7",
19 | "@types/react-dom": "18.0.0",
20 | "eslint": "8.14.0",
21 | "eslint-config-next": "12.1.5",
22 | "typescript": "4.6.3"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/pages/expenses/index.tsx:
--------------------------------------------------------------------------------
1 | import type { NextPage } from "next";
2 | import Link from "next/link";
3 | import { useEffect, useState } from "react";
4 | import { Expense } from "../../components/ExpenseForm";
5 | import { ExpenseList } from "../../components/ExpenseList";
6 |
7 | const ExpensesPage: NextPage = () => {
8 | /**
9 | * Forma de ter na memória as exepnses
10 | *
11 | * Isso é um hook de react
12 | */
13 | const [savedExpenses, setSavedExpenses] = useState([]);
14 |
15 | /**
16 | * Necessário para só pedir o localStorage onde ele existe, que é no front end
17 | *
18 | * Isso é um hook de react
19 | */
20 | useEffect(() => {
21 | setSavedExpenses(JSON.parse(localStorage.getItem("savedExpenses") || "[]"));
22 | }, []);
23 |
24 | return (
25 | <>
26 |
27 |
28 | Home
29 |
30 |
31 | );
32 | };
33 |
34 | export default ExpensesPage;
35 |
--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import type { NextPage } from "next";
2 | import Head from "next/head";
3 | import { Expense, ExpenseForm } from "../components/ExpenseForm";
4 | import Link from "next/link";
5 |
6 | const Home: NextPage = () => {
7 | const handleSubmit = (expense: Expense) => {
8 | const previousExpenses: Expense[] = JSON.parse(
9 | localStorage.getItem("savedExpenses") || "[]"
10 | );
11 | const currentExpenses = previousExpenses.concat(expense);
12 | localStorage.setItem("savedExpenses", JSON.stringify(currentExpenses));
13 | console.log(`Enviou as coisas`, currentExpenses);
14 | };
15 | return (
16 |
17 |
18 |
Calculadora de gastos
19 |
20 |
21 |
22 |
23 | Calculadora de gastos
24 |
25 |
26 | Lista de gastos
27 |
28 |
29 |