Este é o frontend de um blog escolar, desenvolvido como parte do desafio técnico do módulo 3 da pós-graduação em Tecnologia da FIAP. O projeto é destinado ao uso por professores e alunos.
Durante o desenvolvimento, um dos principais desafios foi a integração com o backend e a configuração do ambiente de desenvolvimento utilizando Vite. A escolha do Vite como ferramenta de build e desenvolvimento se mostrou eficiente devido à sua rapidez e simplicidade. Além disso, a utilização de bibliotecas como Chakra UI e Formik facilitou a criação de uma interface de usuário moderna e responsiva.
O projeto segue uma arquitetura modular e escalável, utilizando as seguintes tecnologias e padrões:
- React: Biblioteca para construção de interfaces de usuário.
- Vite: Ferramenta de build e desenvolvimento rápida para projetos frontend.
- TypeScript: Superset do JavaScript que adiciona tipagem estática ao código.
- Chakra UI: Biblioteca de componentes de interface de usuário.
- Formik: Biblioteca para construção de formulários.
- Axios: Cliente HTTP para realizar requisições ao backend.
- Zod: Biblioteca de validação de esquemas para validação de dados.
- ESLint e Prettier: Ferramentas de linting e formatação de código para manter a consistência do código.
- Context API: Utilizado para gerenciamento de estado global da aplicação.
A estrutura do projeto é organizada da seguinte forma:
- src/: Contém todo o código fonte do projeto.
- components/: Contém os componentes reutilizáveis da interface de usuário.
- pages/: Contém as páginas da aplicação.
- services/: Contém os serviços para comunicação com o backend.
- layout/: Contém a estrutura de layout da aplicação.
- context/: Contém os contextos para gerenciamento de estado global.
- router.tsx: Componente principal da aplicação.
- main.tsx: Arquivo de entrada do projeto.
- Clone o repositório:
git clone https://github.com/oc-garcia/fiap-postech-mod3.git
cd fiap-postech-mod3- Instale as dependências:
npm install- Crie um arquivo .env com as seguintes variáveis:
VITE_API_URL=- Rodando em modo de desenvolvimento:
npm run dev- Para construir o projeto:
npm run build- Crie o container:
docker build -t app-name .- Rode o Container:
docker run -p 3000:3000 app-name- Deploy da Aplicação: https://fiap-postech-mod3.vercel.app/ (INSTÂNCIA DO DB FOI RETIRADA APÓS AVALIAÇÃO DO PROJETO.)
- Repositório do Back-End: https://github.com/oc-garcia/fiap-postech-mod2
Siga as etapas abaixo para aproveitar ao máximo o FIAP Blogging:
Para ler um post completo, clique no ícone de 'olho' localizado no canto superior direito do card do post. Assim, você poderá visualizar todo o conteúdo do post.
Para criar e editar posts, é necessário se cadastrar na plataforma. Clique no botão Sign Up para ser redirecionado(a) à página de cadastro:
Preencha os campos necessários e clique em Register para completar o cadastro.
Para acessar sua conta, clique no botão Log in, que irá levá-lo(a) à página de login:
Insira suas credenciais e clique em Login para acessar a plataforma.
Na página inicial, você pode utilizar a aba Search Posts para encontrar posts digitando palavras-chave do título. Os resultados aparecerão automaticamente:
Após fazer login, a aba Admin será liberada. Nela, você pode gerenciar a criação, edição e exclusão de posts.
Para criar um novo post, clique no botão Create Post:
Para editar um post, vá até a aba Post Manager e clique no ícone de edição ao lado do post que deseja alterar:
Para excluir um post, vá até a aba Post Manager e clique no ícone de lixeira ao lado do post que deseja remover:
Na aba User Manager, você pode visualizar e gerenciar as informações dos usuários da plataforma.