Esse projeto é o front-end do Food Explorer, um site de e-commerce focado em delivery. Sendo ele, o desafio final do curso Explorer da Rocketseat.
Ele é uma interface web que consome a API desenvolvida para o projeto, que pode ser encontrada aqui
O projeto foi desenvolvido utilizando React.js, Styled Components e Vite, e permite que o usuário crie, leia, atualize e delete dados de usuários, produtos e pedidos.
Ele possui um design no Figma, que pode ser encontrado aqui.
O projeto foi construído utilizando o conceito de mobile first, e é responsivo.
O projeto possui dois tipos de usuários: administradores e clientes. Os administradores podem criar, ler, atualizar e deletar produtos e pedidos, enquanto os clientes podem criar e ler pedidos.
Para acessar a aplicação como administrador, utilize os seguintes dados:
email: [email protected]
senha: admin@123
Para acessar a aplicação como cliente, basta criar uma conta utilizando o formulário de cadastro.
Essas instruções vão te permitir obter uma cópia do projeto e rodar a aplicação localmente para propósitos de desenvolvimento e teste.
Para rodar a aplicação, você precisa ter o projeto do back-end rodando localmente. Para isso, siga as instruções aqui.
Além disso, você precisará do Node.js instalado na sua máquina. Você pode baixá-lo aqui.
Para acessar o projeto, basta clonar o repositório ou realizar o download dos arquivos do projeto.
Para clonar o repositório, utilize o seguinte comando no seu terminal:
git clone https://github.com/LeonardoSPereira/FoodExplorerFrontEndApós clonar o repositório, acesse a pasta do projeto e instale as dependências utilizando o seguinte comando no seu terminal:
npm installApós instalar as dependências, utilize o seguinte comando no seu terminal para iniciar a aplicação:
npm run devCom isso, a aplicação estará rodando em http://localhost:5173. Para acessar a aplicação, basta acessar esse endereço no seu navegador.
A estrutura do projeto é a seguinte:
├── assets: pasta onde se encontram os arquivos de imagem utilizados no projeto.
├── src: pasta onde se encontram os arquivos da aplicação.
│ ├── components: pasta onde se encontram os componentes da aplicação, juntamente com os arquivos de estilização.
│ ├── hooks: pasta onde se encontram os hooks da aplicação, como o hook de autenticação e o hook do contexto do carrinho.
│ ├── pages: pasta onde se encontram as páginas da aplicação, juntamente com os arquivos de estilização.
│ ├── routes: pasta onde se encontram as rotas da aplicação, onde são divididas as rotas de autenticação e de administrador e de clientes.
│ ├── services: pasta onde se encontram os arquivos de configuração do axios, que é utilizado para realizar as requisições à API.
│ ├── styles: pasta onde se encontram os arquivos de estilização globais da aplicação e o arquivo de temas utilizado.
│ └── main.jsx: arquivo principal da aplicação.
O deploy da aplicação foi realizado utilizando a plataforma Vercel. Que garante que a aplicação esteja sempre rodando na última versão do projeto, de forma estável e segura.
A aplicação pode ser acessada aqui.
O deploy do back-end foi realizado utilizando o plano gratuito do Render e por isso, a aplicação pode demorar alguns segundos para iniciar devido ao plano gratuito do Render colocar a aplicação em modo de hibernação após 30 minutos de inatividade.
Para utilizar a aplicação, basta acessar o link do deploy da aplicação, que pode ser encontrado na seção de deploy desse documento.
Assim como rodando localmente, conforme indicado na seção de instalação desse documento.
A aplicação possui dois tipos de usuários: administradores e clientes. Os administradores podem realizar todas as operações de CRUD de produtos e pedidos, enquanto os clientes podem criar, favoritar e ler pedidos.
Para acessar a aplicação como administrador, utilize os seguintes dados:
email: [email protected]
senha: admin@123
Para acessar a aplicação como cliente, basta criar uma conta utilizando o formulário de cadastro.
- React.js - Framework web.
- Styled Components - Biblioteca de estilização.
- Vite - Bundler.
- Radix UI - Biblioteca de componentes.
- Embla Carousel - Biblioteca de carrossel.
- React Icons - Biblioteca de ícones.
- Axios - Biblioteca de requisições HTTP.
This project is the front-end of Food Explorer, an e-commerce website focused on delivery. It is the final challenge of the Explorer course by Rocketseat.
It is a web interface that consumes the API developed for the project, which can be found here
The project was developed using React.js, Styled Components, and Vite, allowing users to create, read, update, and delete user, product, and order data.
It has a design in Figma, which can be found here.
The project was built using the mobile-first concept and is responsive.
The project has two types of users: administrators and customers. Administrators can create, read, update, and delete products and orders, while customers can create and read orders.
To access the application as an administrator, use the following credentials:
email: [email protected]
password: admin@123
To access the application as a customer, simply create an account using the registration form.
These instructions will allow you to get a copy of the project and run the application locally for development and testing purposes.
To run the application, you need to have the backend project running locally. Follow the instructions here.
In addition, you will need Node.js installed on your machine. You can download it here.
To access the project, either clone the repository or download the project files.
To clone the repository, use the following command in your terminal:
git clone https://github.com/LeonardoSPereira/FoodExplorerFrontEndAfter cloning the repository, navigate to the project folder and install dependencies using the following command in your terminal:
npm installAfter installing the dependencies, use the following command in your terminal to start the application:
npm run devThis will run the application at http://localhost:5173. To access the application, simply open this address in your browser.
The project structure is as follows:
├── assets: folder where image files used in the project are located.
├── src: folder where application files are located.
│ ├── components: folder where application components are located, along with styling files.
│ ├── hooks: folder where application hooks are located, such as authentication and shopping cart context hooks.
│ ├── pages: folder where application pages are located, along with styling files.
│ ├── routes: folder where application routes are located, dividing authentication, administrator, and customer routes.
│ ├── services: folder where axios configuration files are located, used for making API requests.
│ ├── styles: folder where global styling files for the application and the theme file are located.
│ └── main.jsx: main file of the application.
The application was deployed using the Vercel platform, ensuring that the application is always running the latest version of the project in a stable and secure manner.
The application can be accessed here.
The back-end was deployed using the free Render plan. Therefore, the application may take a few seconds to start due to the Render free plan putting the application in hibernation mode after 30 minutes of inactivity.
To use the application, simply access the application's deployment link, which can be found in the deployment section of this document.
Also, you can run it locally as indicated in the installation section of this document.
The application has two types of users: administrators and customers. Administrators can perform all CRUD operations on products and orders, while customers can create, favorite, and read orders.
To access the application as an administrator, use the following credentials:
email: [email protected]
password: admin@123
To access the application as a customer, simply create an account using the registration form.
- React.js - Web framework.
- Styled Components - Styling library.
- Vite - Bundler.
- Radix UI - Component library.
- Embla Carousel - Carousel library.
- React Icons - Icon library.
- Axios - HTTP request library.