Create in
16/12/2022
Status: Development
Projeto ao qual possibilita a criação e edição de quizzes, tendo presente sistema de login completo com token jwt, autenticação e validação, sendo possível realizar login, registro, foto de perfil, configurações da conta e até redefinir a senha.
Desenvolvido pelo NextJS, Typescript, Sass e Banco de Dados não relacional MongoDB, ao qual foi trabalhado array de objetos para criar os quizzes, além do sistema de login com token jwt.
Principais bibliotecas aprendidas ao qual foram inseridas no Projeto:
Biblioteca do NodeJS que possibilita que o sistema consiga realizar o envio de e-mail para um usuário.
├── src
│ ├── pages
│ ├── api
| ├── send.email
import { NextApiRequest, NextApiResponse } from 'next';
import nodemailer from 'nodemailer';
export default async function handler(request: NextApiRequest, response: NextApiResponse) {
const { method } = request;
const { email, code } = request.body;
if (method === 'POST') {
try {
let transporter = nodemailer.createTransport({
host: 'smtp.gmail.com',
port: 587,
secure: false,
auth: {
user: process.env.USERMAIL,
pass: process.env.PASSMAIL,
},
tls: {
rejectUnauthorized: false,
},
});
let info = await transporter.sendMail({
from: `"Quiz" <${process.env.USERMAIL}>`,
to: email,
subject: 'Código de verificação',
text: `Seu código de verificação é: ${code}`,
});
response.status(200).json({ msg: 'Código enviado para o seu E-mail!', info });
} catch (error) {
response.status(500).json({ msg: 'Aconteceu um erro no servidor!');
console.log(error);
}
}
}
Plataforma de hospedagem de imagens.
- Ao qual consiste em pegar imagem em base64 e após o upload retornar uma url, sintaxe:
// Função do input file para adquirir a imagem em base64
const [setPreviewSource, previewSource] = useState();
function previewFile(file: any) {
const reader: any = new FileReader();
if (file) reader.readAsDataURL(file);
reader.onloadend = () => {
setPreviewSource(reader.result);
};
}
├── src
│ ├── services
│ ├── cloudinary
import { v2 as cloudinary } from 'cloudinary';
const { CLOUDINARY_CLOUD_NAME, CLOUDINARY_API_KEY, CLOUDINARY_API_SECRET } = process.env;
cloudinary.config({
cloud_name: CLOUDINARY_CLOUD_NAME,
api_key: CLOUDINARY_API_KEY,
api_secret: CLOUDINARY_API_SECRET,
});
export { cloudinary };
├── src
│ ├── pages
│ ├── api
| ├── image.upload
import { NextApiRequest, NextApiResponse } from 'next';
import { cloudinary } from '../../services/cloudinary';
export const config = {
api: {
bodyParser: {
sizeLimit: '10mb',
},
},
};
export default async function handler(request: NextApiRequest, response: NextApiResponse) {
const { method } = request;
const { imageBase64, preset } = request.body;
if (!imageBase64) {
return response.status(422).json({ msg: 'imageBase64 não enviado!!' });
}
if (!preset) {
return response.status(422).json({ msg: 'preset não enviado!!' });
}
if (method === 'POST') {
try {
const uploadResponse = await cloudinary.uploader.upload(imageBase64, {
upload_preset: preset,
transformation: [{ quality: 'auto' }],
});
response.status(200).json({ msg: 'Imagem carregada com sucesso!!', uploadResponse });
} catch (error) {
response.status(500).json({ msg: 'Aconteceu um erro no servidor!' });
console.log(error);
}
}
}