A modern plant showcase application built with NextJS, TypeScript, and TailwindCSS.
A NextJS application showcasing plants with data from the Trefle API. The project combines beautiful design with modern web development practices.
- Authentication system
- Shopping cart functionality
- Checkout flow
- Reviews system
- Plant search functionality
- Administrative panel
- Plant management dashboard
- Detailed plant information
- Pagination system
- NextJS - React framework
- TypeScript - Type safety
- TailwindCSS - Styling
- Axios - API requests
- Trefle API - Plant data
- NextJS component architecture
- TypeScript implementation
- Server & Client Components
- Dynamic routing
- Code organization
- Responsive design
# Install dependencies
pnpm install
# Start development server
pnpm devThen open http://localhost:3000
Este projeto foi desenvolvido usando NextJS para criar uma aplicação web moderna e responsiva para Breath Natural, demonstrando recursos e práticas de desenvolvimento web contemporâneo.
O design foi escolhido por sua beleza e simplicidade, a ideia desse projeto é servir como um mostruario de plantas. Para tornar o projeto mais complexo foi adicionado requisições a uma API chamada "Trefle - A global plants API" que é uma API de plantas.
Vou tomar um pouco de liberdade e adicionar coisas que não estão no design original, como:
- Pagina de login e registro - dados estaticos por enquanto
- Atalho interativo para carrinho de compras
- Adição e exclusão de plantas no carrinho
- Fluxo de checkout - dados estaticos por enquanto
- Pagina de avaliações - dados estaticos por enquanto
- Pagina de busca e resultados por nome de planta
- Painel administrativo - irei escolher outro design e artista para o painel administrativo
- Pagina com tabela de plantas e paginação no painel administrativo
- Pagina de detalhes da planta por id no painel administrativo
Essas novas funcionalidades serão adicionadas em uma release do projeto e visão tornar ele mais complexo e realista, mas ainda estão na minha area de conhecimento autais.
Pretendo fazer integração com o NextJS, que seria um novo e complexo aprendizado, e adicionar a mais funcionalidades removendo as partes estaticas, ou fica para um projeto exclusivo a isso.
- 🎨 UI Moderna com Tailwind CSS
- 📱 Princípios de design responsivo
- 🎯 Componentes do Servidor e do Cliente
- 📊 Roteamento dinâmico e busca de dados
- 🏗️ Ganhar experiência prática com a arquitetura de componentes do NextJS
- 📘 Praticar TypeScript
- 🎨 Dominar a sintaxe de template do NextJS
- 🔄 Aumentar a compreensão da renderização condicional no NextJS
- 📦 Praticar as habilidades de organização de código
- Trefle - https://trefle.io/
UI/UX inspired by https://www.figma.com/community/file/1341057411255052611 by dsingr - https://www.figma.com/@dsingr, adapted and implemented with modern web technologies.
UI/UX for contact page inspired by https://www.figma.com/@VictorBravim by Victor Bravim.
- NextJS - https://NextJS.com
- TailwindCSS - https://tailwindcss.com
- TypeScript - https://www.typescriptlang.org/
- Axios - https://axios-http.com
- Figma - https://www.figma.com
#NextJS #Web #Frontend #TypeScript #TailwindCSS #Git #Axios #Figma #CleanCode #NextJSChronicles
Made with ❤️ by Ricardo