https://github.com/arthurdsant/nike
A Front End project to introduce the Tailwind Framework, based on the Nike brand and products.
https://github.com/arthurdsant/nike
javascipt react responsive-web-design tailwindcss vite
Last synced: 3 months ago
JSON representation
A Front End project to introduce the Tailwind Framework, based on the Nike brand and products.
- Host: GitHub
- URL: https://github.com/arthurdsant/nike
- Owner: ArthurDSant
- Created: 2024-05-18T18:22:23.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-02T20:43:57.000Z (11 months ago)
- Last Synced: 2025-01-13T00:21:21.497Z (4 months ago)
- Topics: javascipt, react, responsive-web-design, tailwindcss, vite
- Language: JavaScript
- Homepage: https://nike-air.vercel.app/
- Size: 40.7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nike Store
This project was my first interaction with Tailwind CSS, with the aim of familiarizing myself with the Framework. I used Nike's aesthetics as a reference for this project, trying to adapt an e-commerce in a different way, to explore the possibilities of the Framework.
I know I still have a lot of room for improvement but I believe this was a good start.
## Stack used
    
## Features
- Dark and light themes
- Responsive UX/UI Design
- Front End structured in React
- Vite.Js framework for greater application agility
- Tailwind CSS for component customization
- Bag with addition and removal of items, allowing you to change their quantity and size
- Home page changes according to the selected item, changing its image, details and price
- Fixed navbar for greater comfort when navigating the application on mobile
## Learnings
 Tailwind is a framework that has easy-to-use pre-defined classes, which eliminates the need to write custom CSS code absolutely and gives you the freedom to create reusable styles, making code creation and maintenance simple and effective. I learned the 'Mobile-First' approach that makes it easier to create responsive layouts
. The possibility of customizing the Framework through the 'tailwind.conmfig.js' configuration file is a big difference, allowing precise adjustments when necessary. And the main thing that, in my opinion, makes Tailwind a unique Framework is the efficiency in defining styles, avoiding a huge, confusing and unnecessarily complex CSS file,
making code maintenance and understanding infinitely simpler.
## Installation
```bash
npm create vite@latest . -- --template react
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install react-icons
npm install @fontsource-variable/nunito
```
## Screenshots
### Light Mode
### Dark Mode
