Welcome to the React-Tailwind-NextUI E-commerce Training Ground! This project is designed to help you master React, Tailwind CSS, and Next UI through building an e-commerce website. Dive in, explore, and enhance your skills in modern web development!
- What You'll Learn
- Technologies Used
- Prerequisites
- Set Up Project
- Instructions
- Tips
- Feedbacks and Help
- Resources
- 🔥 React fundamentals and advanced concepts
- 🎨 Tailwind CSS for rapid styling
- 🧩 Next UI components for sleek interfaces
- 🏗️ Creating and using screens and components
- 🛣️ Routing between different screens
- 📊 Creating and using a JSON file for data management
- React ⚛️
- Tailwind CSS 🖌️
- Next UI 🎁
Before starting this project, it's recommended that you have:
- Basic knowledge of HTML & CSS
- Basic understanding of Tailwind CSS
- Familiarity with React fundamentals
All necessary installations have been completed. You're ready to start coding right away!
Clone the project
git clone https://github.com/alexandre95calonne/training_React-Tailwind-NextUI.git
Go to the directory :
cd training_React-Tailwind-NextUI
Install dependencies
npm install
Start the project
npm run dev
Create the following pages, incorporating components as you see fit:
- Home Page:
- Hero section with featured products
- Categories showcase
- Special offers or promotions
- Shop Page:
- Product grid or list
- Filtering and sorting options
- Pagination or infinite scroll
- Product Details Page:
- Product images
- Description and specifications
- Add to cart functionality
- Related products
- Cart Page:
- List of added items
- Quantity adjustments
- Total calculation
- Checkout button
- Contact Page:
- Contact form
- Company information
- Map integration (optional)
Remember to implement routing between these pages and create a JSON file to manage your product data.
- 🔍 Research and draw inspiration from existing e-commerce sites
- 🧩 Break down complex features into smaller, manageable components
- 🎨 Experiment with Tailwind CSS classes to achieve unique designs
- 🔄 Regularly commit your changes to track your progress
- 🐛 Encountered a bug? Open an issue!
- 💡 Have an idea for improvement? Start a discussion!
- 🤝 Want to contribute? Submit a pull request!
Happy coding, and may your e-commerce project be a stellar success! 🌟