Orange Notes - Desafio FCamara

React
Vite
Sass
HTML
json-server
headless-ui
react-icons

Orange Notes | Esquenta Programa de Formação FCamara

O Orange Notes é uma plataforma onde você pode organizar seus cursos, vídeo aulas, artigos e tudo que envolve seu aprendizado através de cards e checklists.

Esse projeto foi desenvolvido para um desafio proposto pela empresa FCamara como uma forma de preparação para o Programa de Formação de trainees que acontece periodicamente. Trata-se de uma simulação da etapa final do programa oficial, que consiste em um hackathon com duração de 15 dias. No entanto, há a diferença de que, neste desafio, os projetos são individuais.

Faça o login na aplicação utilizando qualquer e-mail e senha que atenda os requisitos.

🩹 Melhorias necessárias

Ao tentar salvar o card sem alterações nos dados já existentes, ocorre um erro que trava a aplicação. Neste caso, deve-se atualizar a página com F5 (os dados atuais não são perdidos);
Melhorar validação do formulário de login também no submit e não apenas no blur, acrescentando também mensagens específicas para cada tipo de erro;
Na criação das tarefas dos cards, resetar o valor do input a cada nova tarefa (da forma como está, ao resetar o input salva a tarefa com texto vazio);
Implementar sistema de login com autenticação;
Substituir json-server por banco de dados relacional.

Caso queira ver o projeto desenvolvido por mim e minha equipe no último Programa de Formação da FCamara, basta acessar este repositório.

🪧 Vitrine Dev
✨ Nome	Orange Notes - Desafio FCamara
🏷️ Tecnologias	React, Vite, Sass, HTML, json-server, headless-ui, react-icons
🚀 URL Front-end	Acesse o site ou veja como rodar localmente no item ⚙️ Como usar
🚀 URL Back-end	https://abounding-internal-bench.glitch.me/cards
🔥 Desafio	Orange Notes - Regulamento e problemática

Detalhes do projeto

⚙️ Como usar

Para experimentar a aplicação em sua totalidade, você pode roda-lo localmente. Para isso, siga as etapas a seguir:

Faça o download deste repositório através do botão verde Code no topo da página e, em seguida, clicando em Download ZIP. Ou, se preferir, através do terminal (Git Bash, Powershell, etc.), use o comando:

git clone https://github.com/sucodelarangela/orange-notes.git

Acesse a pasta do projeto com seu terminal;
Rode o comando npm install para instalar as dependências (você precisa ter o Node.js instalado);
Inicie o servidor localmente com o comando npm run server. Você deve receber a seguinte mensagem de confirmação:

> [email protected] server
> json-server --watch src/data/db.json --port 8000


  \{^_^}/ hi!

  Loading src/data/db.json
  Done

  Resources
  http://localhost:8000/cards

  Home
  http://localhost:8000

  Type s + enter at any time to create a snapshot of the database
  Watching...

Para iniciar a aplicação, rode o comando npm run dev no terminal. Você deve receber a seguinte mensagem de confirmação:

> [email protected] dev
> vite


  VITE v3.0.9  ready in 13504 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose

Para usar a aplicação, abra o seu browser preferido e acesse o endereço http://localhost:5173/. Você pode fazer login na aplicação usando qualquer e-mail e senha que atendam os requisitos de validação do front-end.

🔼 Voltar ao topo

English version

🔎 Overview

Orange Notes is a web application where you can organize your training courses, videos, articles and everything about your studies through cards and checklists.

This project was developed for a challenge proposed by the company FCamara as preparation for their Selection and Training Program, which happens periodically. It works as a simulation of the final stage of the Program, which is a 15-day-long hackathon. However, in this challenge, the projects are developed individually instead of in groups.

In case you want to see the project developed by my team during the last Program, you can visit this repo.

🩹 Improvements needed

When trying to save the card without changing the existing data, an error occurs and the page stops responding. In this case, hit F5 to reload the page (the current data is not lost);
Review login form validation on submit and not only on blur, adding specific error messages;
When creating new tasks inside the cards, reset the value of the input at every new task added (the way it is now, when resetting the input the tasks is saved with empty value);
Implementing login system with authentication;
Replace json-server with relational database.

⚙️ How to use it

For full access to the app functionalities, you can run it locally on your machine. In order to do so, follow the steps below:

Download this repository by clicking the green Code button on top of the page and then clicking Download ZIP option. Or use the following command on your terminal (Git Bash, Powershell, etc.):

git clone https://github.com/sucodelarangela/orange-notes.git

Access the project root folder on your terminal;
Run npm install to install all project dependencies (you must have Node.js installed);
Start the json-server locally with the command npm run server. You should receive the following message:

> [email protected] server
> json-server --watch src/data/db.json --port 8000


  \{^_^}/ hi!

  Loading src/data/db.json
  Done

  Resources
  http://localhost:8000/cards

  Home
  http://localhost:8000

  Type s + enter at any time to create a snapshot of the database
  Watching...

To start the application, run npm run dev on your terminal. You should receive the following message:

> [email protected] dev
> vite


  VITE v3.0.9  ready in 13504 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose

To use the app, open your favorite browser and go to the URL http://localhost:5173/. You can log in the application using any e-mail address and password that respects the front end validations.

🔼 Back to top

Developed with 🧡 by @sucodelarangela

Veja meu projeto em: https://github.com/sucodelarangela/orange-notes