Desafio FCamara do Aquecimento Programa de Formação

Overview

Orange Notes | Esquenta Programa de Formação FCamara

Read it in English

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://orange-notes-on.herokuapp.com/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:

  1. 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
  1. Acesse a pasta do projeto com seu terminal;

  2. Rode o comando npm install para instalar as dependências (você precisa ter o Node.js instalado);

  3. 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...
  1. 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
  1. 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:

  1. 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
  1. Access the project root folder on your terminal;

  2. Run npm install to install all project dependencies (you must have Node.js installed);

  3. 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...
  1. 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
  1. 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

You might also like...

Repositório contendo o desafio para seleção do StartDB 2022.

Repositório contendo o desafio para seleção do StartDB 2022.

O desafio da forca Olá! Você está prestes a iniciar o nosso desafio para a seleção do StartDB. Se você chegou aqui sem conhecer o StartDB, você pode e

Dec 13, 2022

Repositório do desafio técnico da para o processo seletivo da turma XP na Trybe

Repositório do desafio técnico da para o processo seletivo da turma XP na Trybe

Desafio Backend de Yuri Carvalho Desafio técnico para o processo seletivo da XP Inc. realizado por Yuri Carvalho utilizando: Link da API: https://yuri

Jul 25, 2022

API para o Desafio 2.1 - Consumindo um dataset de filmes

A progressive Node.js framework for building efficient and scalable server-side applications. Description Nest framework TypeScript starter repository

Sep 14, 2022

desafio fábrica 2022

🌿 Zoo Zoo 🌿 challenge made in 24 hours to aprimorate my knowledge in ReactJS :) *(Projeto relacinado ao desafio da fábrica de softwares - 2022.2 Um

Nov 4, 2022

Desafio da RocketSeat, codar durante 21 dias seguidos

Desafio 21 dias codando by Rocketseat 🏆 Uma breve descrição sobre o que esse projeto faz e para quem ele é 🏁 Regras 🏁 Todos os dias, codar por pelo

Oct 21, 2022

Desafio 21 dias de código proposto pela Rocketseat.

21-days-of-code Desafio 21 dias de código proposto pela Rocketseat. As regras para participar do desafio são: Todos os dias, codar por pelo menos 1h;

Sep 17, 2022

Projeto desenvolvido como desafio técnico para uma vaga de estágio

Crud - Lista de Tarefas com React Sobre • Funcionalidades • Dependências • Como executar • Licença 📑 Sobre o projeto Projeto desenvolvido como teste

Oct 14, 2022

Projeto desenvolvido durante o hackaton do Programa de Formação do Grupo FCamara

API Technical Share Projeto desenvolvido durante o hackaton do Programa de Formação do Grupo FCamara 📝 Pré-requisitos Docker NodeJS instalador de pac

Apr 20, 2022

Projeto desenvolvido durante o Programa de Formação do Grupo FCamara

Projeto desenvolvido durante o Programa de Formação do Grupo FCamara

Technical Share Projeto desenvolvido durante o Programa de Formação do Grupo FCamara 🚀 Começando As instruções logo abaixo permitirão que você obtenh

Apr 14, 2022

Juego del ahorcado en JS, reto del programa ONE para la vitrina Alura Latam

Juego del ahorcado en JS, reto del programa ONE para la vitrina Alura Latam

Juego del ahorcado - JavaScript Programa ONE Nahuel-DevOne Información del proyecto: Este es mi segundo proyecto para el programa ONE de Oracle + Alur

Oct 4, 2022

Programa Top - Tiempo Completo 👩🏻‍💻🧑🏼‍💻

Programa Top v20 - Tiempo Compleo Mentores 👩🏻‍🏫👨🏼‍🏫 Cristian Moreno Mateo Herrera Cristian Buitrago Estudiantes 👩🏻‍💻🧑🏼‍💻 Pool Hijuela Emer

Apr 18, 2022

Desafio Estrelas Fora da Caixa

PROJETO DESAFIO ESTRELAS FORA DA CAIXA Nesse projeto usamos de HTML, CSS e JS Vanilla usando de uma API pública do Rick e Morty para puxar imagens de

Jun 14, 2021

Desafio [Frontend Mentor] - Projeto feito com o framework React que anuncia vagas de emprego e filtra com base nas categorias selecionadas.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

May 20, 2022

Este repositório contem o desafio do curso da rocketseat Ignite Conceitos do Nodejs

Projeto API TODO Nessa aplicação foi feita uma API, que é uma gerador de tarefas TODOS, onde o usúario pode cadastrar um name e um username, e a aplic

May 12, 2022

Codelandia-Challenge-2-JordanShoes - Desafio da comunidade da Codelândia, realizada com React e Typescript.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Jan 3, 2022

Desafio Gerador de senhas com Emojis - Tech da Semana 😁 🤩

 Desafio Gerador de senhas com Emojis - Tech da Semana 😁 🤩

Desafio Gerador de senhas com Emojis - Tech da Semana 😁 🤩 📚 Informações sobre o projeto O projeto foi desenvolvido com base no desafio do Discord d

Nov 21, 2022

Praticando JavaScript no desafio da imersão dev da alura.

Praticando JavaScript no desafio da imersão dev da alura.

Super-Trunfo O desafio consiste em criar o jogo de cartas super trunfo, que coloca duas cartas diferentes com atributos para batalhar, dependendo do a

Sep 6, 2022

Instruções para desafio Edabit do V_Camp

Instruções para desafio Edabit do V_Camp

V_Camp Desafio Edabit Instruções Olá, Bem-vindo ao V_Camp. Gostaríamos de propor a você um pequeno exercício. Vamos lá? Visite o site https://edabit.c

Jul 10, 2022

O projeto do desafio da comunidade Ballerini no discord.

O projeto do desafio da comunidade Ballerini no discord.

O projeto do desafio da comunidade Ballerini no discord. 💻 Principais Tecnologias Utilizadas Expo React Native TypeScript 🤳 Screenshots Loading Home

Jul 21, 2022
Owner
Angela Caldas
Desenvolvedora Front-End. Arquiteta urbanista. --- Front-End Developer. Architect and Urban Planner
Angela Caldas
Programa Top - Tiempo Completo 👩🏻‍💻🧑🏼‍💻

Programa Top v20 - Tiempo Compleo Mentores ????‍??????‍?? Cristian Moreno Mateo Herrera Cristian Buitrago Estudiantes ????‍??????‍?? Pool Hijuela Emer

Make it Real 8 Apr 18, 2022
Este repositório contem o desafio do curso da rocketseat Ignite Conceitos do Nodejs

Projeto API TODO Nessa aplicação foi feita uma API, que é uma gerador de tarefas TODOS, onde o usúario pode cadastrar um name e um username, e a aplic

Macmiller Duarte de Andrade 1 May 12, 2022
Codelandia-Challenge-2-JordanShoes - Desafio da comunidade da Codelândia, realizada com React e Typescript.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

André Luís Martins de Oliveira 1 Jan 3, 2022
Desafio Gerador de senhas com Emojis - Tech da Semana 😁 🤩

Desafio Gerador de senhas com Emojis - Tech da Semana ?? ?? ?? Informações sobre o projeto O projeto foi desenvolvido com base no desafio do Discord d

Gabriel Borges 3 Nov 21, 2022
Praticando JavaScript no desafio da imersão dev da alura.

Super-Trunfo O desafio consiste em criar o jogo de cartas super trunfo, que coloca duas cartas diferentes com atributos para batalhar, dependendo do a

David Willian 6 Sep 6, 2022
Instruções para desafio Edabit do V_Camp

V_Camp Desafio Edabit Instruções Olá, Bem-vindo ao V_Camp. Gostaríamos de propor a você um pequeno exercício. Vamos lá? Visite o site https://edabit.c

Valtech Brasil 1 Jul 10, 2022
O projeto do desafio da comunidade Ballerini no discord.

O projeto do desafio da comunidade Ballerini no discord. ?? Principais Tecnologias Utilizadas Expo React Native TypeScript ?? Screenshots Loading Home

Clean Software 8 Jul 21, 2022
Desenvolvido durante um desafio do servidor Ballerini no Discord! https://discord.gg/ballerini

Desafio Autenticação Node - Tech da Semana ⏰ ?? ?? Informações sobre o projeto O projeto foi desenvolvido com base no desafio do Discord da Rafaela Ba

Gabriel Borges 5 Jun 1, 2022
Projeto desenvolvido durante o Talent Fest Brasil - Laboratória SAP007, cumprindo o desafio da empresa Pravaler. 💪🏻💪🏽🧡

Desenvolvimento web (MVP) : Comparador de Cursos ?? Link da aplicação ?? Nossa equipe de Desenvolvedoras recebeu uma tarefa enviada pela empresa Prava

Suelen Escorcio 3 Jul 3, 2022
Grupo de Trabalho para o projeto do Desafio Chefão do XP 41 do Curso de FullStck da Gama Academy

Bem Vindos a Tech Dental ?? A Tech Dental é uma plataforma para gestão de prontuários de pacientes em clínicas odontológicas. Secretárias ou até mesmo

Helenilson Holamek 6 Jul 27, 2022