Este é o resultado de um estudo aprofundado de React.js, realizado no treinamento Ignite, da Rocketseat.
O Book Wise é uma aplicação para o usuário realizar a avaliação de livros. Nela o usuário poderá criar a sua avaliação para os livros disponíveis.
A aplicação possuí um Banco de Dados próprio em MySQL, com uma lista de livros pré-cadastrada. Para criar avaliações, o usuário deve fazer Login, sendo possível realizar ele com o Google ou com o GitHub. No primeiro Login, o usuário será cadastrado automaticamente no Banco. Nos demais logins, as infos do usuário já serão carregadas diretamente deste Banco. Obs.: O Database está hospedado no PlanetScale. Por ser um serviço gratuito, o Banco poderá demorar alguns segundos para iniciar, e também poderá resetar após alguns minutos de inatividade, portanto apenas os usuários e as avaliações originais irão permanecer.
O projeto foi criado utilizando o Next.js, e seu foco é na renderização pelo lado do servidor (SSR), aumentando a performance com um carregamento da página de forma mais eficiente.
A página possuí responsividade, se adaptado aos dispositivos mobile, e ainda foram realizadas otimizações de SEO para melhorar a indexação da página pelos bots.
Fique à vontade para fazer Login na aplicação e cadastrar alguma avaliação de teste para ver o seu funcionamento. Existem Cards de leitura mais recente e avisos de criação de avaliação que só aparecem se você estiver logado!
A página em formato desktop é vista na imagem abaixo:
As seguintes tecnologias foram empregadas na criação deste projeto:
- ReactJs
- TypeScript
- Stitches
- Next.js
- Axios
- Phosphor Icons
- React Toastify
- ESLint
- Prisma
- ReactHookForm
- DateFNS
- HamburgerReact
- ReactSimpleStarRating
- NextSEO
Clone o projeto para o local desejado em seu computador.
$ git clone git@github.com:andreviapiana/book-wise.git# Navegue até o diretório
$ cd book-wise
# Instale as dependências necessárias
$ npm install
# Mude para o commit que contém o servidor local em SQLite
$ git checkout 4097adcddd54664084c5e1182f7af242332ddfc5
# Renomeie o arquivo .env.example para .env e adicione as informações necessárias nele
# Agora inicie o servidor do FrontEnd
$ npm run dev
# O terminal irá exibir o endereço local onde a aplicação está sendo executada:
http://localhost:3000/
O resultado FINAL pode ser visto aqui
Made with ❤️ by André Viapiana 👋🏽 Get in Touch!