17 |
18 |
25 |
26 | )
27 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "email-service-frontend",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc && vite build",
9 | "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "@chakra-ui/icons": "^2.0.19",
14 | "@chakra-ui/react": "^2.6.0",
15 | "@emotion/react": "^11.10.6",
16 | "@emotion/styled": "^11.10.6",
17 | "@tanstack/react-query": "^4.29.5",
18 | "axios": "^1.4.0",
19 | "framer-motion": "^10.12.4",
20 | "react": "^18.2.0",
21 | "react-dom": "^18.2.0"
22 | },
23 | "devDependencies": {
24 | "@types/react": "^18.0.28",
25 | "@types/react-dom": "^18.0.11",
26 | "@typescript-eslint/eslint-plugin": "^5.57.1",
27 | "@typescript-eslint/parser": "^5.57.1",
28 | "@vitejs/plugin-react": "^4.0.0",
29 | "eslint": "^8.38.0",
30 | "eslint-plugin-react-hooks": "^4.6.0",
31 | "eslint-plugin-react-refresh": "^0.3.4",
32 | "typescript": "^5.0.2",
33 | "vite": "^4.3.2"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2023 Fernanda Kipper Bucoski de Sousa
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/Modal/modal.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { ModalOverlay, ModalBody, ModalCloseButton, ModalHeader, ModalContent, Modal, Heading, Text } from '@chakra-ui/react';
3 | import { CheckCircleIcon } from '@chakra-ui/icons'
4 |
5 | interface ModalProps {
6 | title: string,
7 | subText: string,
8 | isVisible: boolean
9 | }
10 |
11 | export default function SuccessModal({ title, isVisible, subText } : ModalProps){
12 | const [isOpen, setIsOpen] = useState(false);
13 |
14 | const onClose = () => setIsOpen(false);
15 |
16 | useEffect(() => {
17 | if(!isVisible) return;
18 | setIsOpen(true);
19 | }, [isVisible])
20 |
21 | return (
22 | 
9 |
10 | ## Features
11 |
12 | - [x] User-friendly interface built with React JS and Chakra UI.
13 | - [x] Integration with a Node.js API for sending registration emails.
14 | - [x] Email validation and confirmation functionality.
15 | - [x] Responsive design for seamless user experience on different devices.
16 |
17 | ## Prerequisites
18 |
19 | To run this project locally, you need to have the following installed:
20 |
21 | - Node.js
22 | - npm (Node Package Manager)
23 |
24 | ## Getting Started
25 |
26 | 1. Clone the repository to your local machine
27 |
28 | ```bash
29 | git clone https://github.com/Fernanda-Kipper/membership-frontend
30 | ```
31 |
32 | 2. Navigate to the project's directory
33 |
34 | ```bash
35 | cd membership-frontend
36 | ```
37 |
38 | 3. Install the dependencies
39 |
40 | ```bash
41 | npm install
42 | ```
43 |
44 | 4. Start the application
45 |
46 | ```bash
47 | npm run dev
48 | ```
49 |
50 | This will launch the application in your default browser at `http://localhost:5173`
51 |
52 | 6. Start the Node.js API
53 |
54 | - Clone the [API repository](https://github.com/Fernanda-Kipper/email-service-backend).
55 | - Follow the instructions in the API's README to start the server.
56 |
57 | ## Contributing
58 |
59 | Contributions are welcome! If you find any issues or have suggestions, please open an issue or submit a pull request in this repository.
60 |
61 | ## License
62 |
63 | This project is licensed under the [MIT License](./LICENSE).
64 |
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import './App.css'
3 | import PrimaryInput from './components/Input/PrimaryInput'
4 | import { Button, Spacer } from '@chakra-ui/react'
5 | import { useIdentityMutation } from './hooks/useIdentityMutation'
6 | import SuccessModal from './components/Modal/modal'
7 |
8 | function App() {
9 | const { mutate, isSuccess } = useIdentityMutation()
10 | const [email, setEmail] = useState("")
11 | const [firstName, setFirstName] = useState("")
12 | const [secondName, setSecondName] = useState("")
13 |
14 | const submit = () => {
15 | mutate({
16 | email,
17 | firstName,
18 | lastName: secondName
19 | })
20 | }
21 |
22 | return (
23 |
24 |
66 | )
67 | }
68 |
69 | export default App
70 |
--------------------------------------------------------------------------------
58 |
65 | Assinatura Mensal
59 |você irá pagar
61 | R$ 250,00 62 |Regras: It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
64 |