Skip to content

A Front End project to introduce the Tailwind Framework, based on the Nike brand and products.

Notifications You must be signed in to change notification settings

ArthurDSant/Nike

Repository files navigation

Nike Store

Nike

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

React Vite JavaScript TailwindCSS CSS3

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

TailwindCSS 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

Nike Pc Light 1

Nike Pc Light 2

Nike Pc Light 3

Nike Pc Light 4

Nike Iphone Light 1 Nike Iphone Light 2 Nike Iphone Light 3

Dark Mode

Nike Pc Dark 1

Nike Pc Dark 2

Nike Pc Dark 3

Nike Pc Dark 4

Nike Iphone Dark 1 Nike Iphone Dark 2 Nike Iphone Dark 3

About

A Front End project to introduce the Tailwind Framework, based on the Nike brand and products.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published