Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/diego-ronan-felix/landing-page
Projeto de uma landing page feita com Tailwindcss, Alpine.js, Laravel e Livewire.
https://github.com/diego-ronan-felix/landing-page
alpinejs laravel livewire mailpit sail tailwindcss
Last synced: 3 months ago
JSON representation
Projeto de uma landing page feita com Tailwindcss, Alpine.js, Laravel e Livewire.
- Host: GitHub
- URL: https://github.com/diego-ronan-felix/landing-page
- Owner: diego-ronan-felix
- Created: 2024-06-09T14:06:28.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-06-12T23:51:05.000Z (6 months ago)
- Last Synced: 2024-09-26T20:43:56.953Z (3 months ago)
- Topics: alpinejs, laravel, livewire, mailpit, sail, tailwindcss
- Language: PHP
- Homepage:
- Size: 1.41 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Projeto Landing Page
Este é um projeto de uma landing page com um sistema de inscrição e gerenciamento de inscritos. O projeto foi desenvolvido utilizando Tailwind CSS, Alpine.js, Laravel e Livewire. Para o ambiente de desenvolvimento, foram utilizados Laravel Sail e Mailpit.
## Créditos
Este projeto foi desenvolvido com base no conhecimento adquirido no curso "Start with TALL: Use Tailwind, Alpine, Laravel and Livewire" da plataforma Udemy, ministrado por [JuanD MeGon](https://www.udemy.com/course/tall-stack-integrate-tailwind-alpine-laravel-and-livewire).
## Tecnologias Utilizadas
- **Tailwind CSS**: Para estilização da página.
- **Alpine.js**: Para manipulação de estados e interações no front-end.
- **Laravel**: Framework PHP utilizado para o desenvolvimento do back-end.
- **Livewire**: Para componentes interativos sem sair do Laravel.
- **Laravel Sail**: Ambiente de desenvolvimento em Docker.
- **Mailpit**: Para teste de envio de emails durante o desenvolvimento.## Durante o curso, aprendi a:
- Utilizar Tailwind CSS para estilização rápida e responsiva.
- Implementar interatividade dinâmica com Alpine.js.
- Desenvolver aplicações robustas com o framework PHP Laravel.
- Criar componentes dinâmicos e reativos com Livewire.
## Funcionalidades do app
- **Inscrição por Email**: Usuários podem se inscrever na landing page utilizando seu email.
- **Gerenciamento de Inscritos**: Interface administrativa para listar, pesquisar e deletar inscritos.## Instalação
### Pré-requisitos
- Docker e Docker Compose instalados na sua máquina.
### Passos
1. Clone o repositório:
```bash
git clone https://github.com/diego-ronan-felix/landing-page.git
cd landing-page
```2. Copie o arquivo `.env.example` para `.env` e configure as variáveis de ambiente conforme necessário:
```bash
cp .env.example .env
```4. Abra o arquivo .env em um editor de texto e configure as variáveis de ambiente conforme mostrado abaixo:
```bash
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=sail
DB_PASSWORD=passwordMAIL_MAILER=smtp
MAIL_HOST=mailpit
MAIL_PORT=1025
```
3. Instale as dependências do projeto:```bash
docker run --rm \
-u "$(id -u):$(id -g)" \
-v "$(pwd):/var/www/html" \
-w /var/www/html \
laravelsail/php83-composer:latest \
composer install --ignore-platform-reqs
```
6. Suba os containers do Laravel Sail:```bash
./vendor/bin/sail up -d
```7. Gere a chave da aplicação:
```bash
./vendor/bin/sail artisan key:generate
```8. Execute as migrações do banco de dados:
```bash
./vendor/bin/sail artisan migrate
```
9. Instale as dependências listadas no package.json:```bash
./vendor/bin/sail npm install
```10. Execute esse comando para iniciar o Vite
```bash
./vendor/bin/sail npm run dev
```
11. Tudo pronto a aplicação estará disponível em:```bash
http://localhost
http://localhost:8025
```# Screenshoots
![Print de Tela 1](public/img/01.png)
![Print de Tela 1](public/img/03.png)
![Print de Tela 1](public/img/02.png)
![Print de Tela 1](public/img/04.png)
![Print de Tela 1](public/img/05.png)
![Print de Tela 1](public/img/06.png)
![Print de Tela 1](public/img/07.png)
![Print de Tela 1](public/img/08.png)
![Print de Tela 1](public/img/09.png)
![Print de Tela 1](public/img/10.png)