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

  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